
Premium DOM Component
Storyboard
Multi-panel story with cool effects

Abstract |
---|
The rwt-storyboard DOM component displays a sequence of panels that tell a story. Transitions from one panel to the next can slide-in or fade-in to dramatic effect. The content of each panel is provided by an HTML template, and the sequencing speed can be controlled by CSS variables. |
Motivation
The rwt-storyboard DOM component is intended for use on web pages where the author wants to grab the reader's attention and funnel them towards a particular action.
The component has these features:
- Each panel may contain any arbitrary content and styling.
- Each panel may be transitioned to visibility using it's own effect.
- The first panel can be shown with an initial delay before the sequencing begins.
- The last panel can be shown with a final hold time before restarting the full sequence.
- Sequencing occurs only when the component is fully visible within the browser's viewport. It is suspended when the component is hidden or only partially visible.
- The user may suspend the auto-sequencing by clicking anywhere within the component's frame, and may resume the auto-sequencing by clicking the component a second time.
- Round buttons along the bottom of the storyboard allow the user to override the auto-sequencing to display a particular panel.
In the wild
To see an example of this component in use, visit the READ WRITE STACK website. Each page uses this component to tell a user story about apps, plugins and DOM components. To understand what's going on under the hood, use the browser's inspector to view the HTML source code and network activity.
Reference
![]() | Documentation | READ WRITE HUB |
![]() | Source code | github |
![]() | Component catalog | DOM COMPONENTS |
![]() | Package installation | npm |
![]() | Publication venue | READ WRITE STACK |