StoryComponent

A generic story component for Framer. It displays full screen stories at a set interval. The component can be called multiple times to create sequences of stories.

Example Usage

The simpliest way to use StoryComponent is to import the module and define an array of images.

{StoryComponent} = require "StoryComponent"
exampleSet = new StoryComponent
	stories: [ "images/1.png", "images/2.png", "images/3.png" ]

The component will rescale to any device size automatically. There are also a number of variables you can customize in the component.

Customization

{StoryComponent} = require "StoryComponent"
exampleSet = new StoryComponent
	progressBarHorizontalPadding: 12
	progressBarVerticalPadding: 12
	progressBarHeight: 4
	progressBarGradient: true
	timePerStory: 3
	stories: [ "images/1.png", "images/2.png", "images/3.png" ]

Style

Define the horizontal padding of the progress bar:

progressBarHorizontalPadding: <int>

Define the vertical padding of the progress bar:

progressBarVerticalPadding: <int>

Define the height of the progress bar:

progressBarHeight: <int>

Define if there is a gradient behind progress bar:

progressBarGradient: <bool>

Time

Define the time each story is shown:

timePerStory: <int>

Listener

You can listen for the completion of a set of stories using:

example._endOfUpdatesEvent.on "change:x", ->
	if example._endOfUpdatesEvent.x == 1
		print "End of stories"

Actions

You can start the playback of a set of stories using:

example._startStoriesPlayback()

You can stop the story playback using:

example._stopStoriesPlayback()

You can reset the story set using:

example._resetStoriesPlayback()

Demo Video

• YouTube