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()