Use Scroll Scene action to animate the element as it scrolls in and out of view.
Scroll scenes are used to animate parallax sections, reveal elements on scroll and to create complex animations that are controlled by scrolling the element.
Each Scroll Scene has its settings and one or more animations that animate the main scroll scene elements or its descendants.
Scroll Scene settings are:
Duration of the scene is not set in time, but as the scroll distance.
It is specified as % of the viewport (visible page area) height or in px as the absolute distance.
Default duration is 200%, or two viewport heights. This ensures that the scroll duration will cover the whole cycle of the scene visibility: it will start when the element enters into view at the bottom edge of the viewport, move up, start to disappear behind the top viewport edge and then move out of the view completely.
This scene takes two viewport scrolls to complete.
This scene takes one viewport scrolls to complete.
This scene takes 120px scroll to complete.
Note that this assumes that the scene is not larger than the height of the viewport. For larger scenes the duration needs to be adjusted accordingly.
Set the position at which the scene starts:
- Enter – as soon as the scene enters into view
- Center – when the scene center comes into view
- Leave – when the scene starts leaving the view
Take a look at this illustration to better understand these settings:
This scene starts as soon as it enters into view.
This scene starts when the scene reaches the center of the view.
This scene starts when it start to leave the view.
Offset adjusts the enter and leave events by the amount of specified pixels.
For example, setting the offset of 200px and Start on enter will activate the scene when the element is 200px into the view.
This scene starts when it enters 200px into the view.
Enable the scroll scene only on mobile or only on non-mobile devices. This is useful for creating different sets of interactions for mobile devices or for disabling interactions on mobile devices altogether.
Scroll scene animations have individual Enable on controls as well.
Scroll scene can be pinned to the viewport when it comes into view and unpinned when it leaves the view.
That means that the scene will become fixed (stuck) at the top of the view and will not move through the duration of the scene. Once the duration ends, the scene is unpinned and start moving out of view.
This scene will be fixed to the view for the length of its duration.
Note that the Pin effect is implemented by inline CSS styling with position:fixed and inserting a placeholder element into the structure of the page. In some cases this can create conflicts with CSS styles or dynamic code.
Progress is a helper that shows the percent of the scrolled scene. This information is helpful for seeing when the scene starts and ends and for setting up start times of scene animations.
Enter a name to show debug scroll indicators that show the start, end and trigger for the scroll scene. The name is used to label the indicators.
Scroll scene can have up to ten animations. Each of them animates one or more target elements.
Click on Add animation to add a new animation item to the scroll scene.
Target selects the element that will be animated. By default, the scene element itself is animated by the selected animation.
The first one animates the progress bar,
and the second one animates the scene itself.
Note that custom animations can define their own targets as well, so there is some flexibility how animation targets are chosen. The best practice is to use the Scroll scene animation target to select the top animated element and then use targets in the custom animation to animate its sub-elements.
Animation is the animation that will be played on target elements as the scene is scrolled.
You can select one of predefined animations or chose to create a custom animation with the Timeline editor.
I’m fading in from below…
You can also select a predefined animation and then customize it in the Timeline editor by clicking on the Edit animation button.
See Timeline Editor for information on creating custom animations.
By default the animation will be synchronized with the scroll scene progress. At 0% the animation will be at the beginning and at the end of the scroll scene it will reach the end.
This can be changed with Advanced options.
Start at %
The scroll position at which the animation will be started. By default, that is 0, the beginning of the scroll progress. The value is set in %.
By default, all animations finish at the same time, at the end of the scroll duration.
Set how to play the animation:
- with scroll will synchronize the animation playback with the scroll scene progress (default)
- independently will trigger the animation at the Start at position and will let it play by itself, with its natural duration, not controlled by the scroll progress.
By default, independent animations don’t reverse back when scrolling in the opposite direction. See below at the “Reverse in opposite direction” setting to enable that.
Duration in %
For animations played with scroll, set the scene progress position at which the animation ends. By default, that is the end of the scene. The value is expressed in %.
Duration in s
You can override duration of animations that are played independently of the scroll progress. The value here is the actually time the animation should take to play from start to finish.
Select the scroll direction at which the independent animation should play.
Reverse in opposite direction
When checked the independent animation will be reversed when scrolled in the opposite direction from the one set in Scroll direction.
Show the animation only on mobile or only on non-mobile devices. By default, the animation is played on all devices.