Storyboard

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