Scroll Scene

Scroll scenes are used to animate parallax sections, reveal elements on scroll and to create complex animations that are controlled by scrolling the element.

Scroll Scene actions is placed on:

The scroll container element if we need to animate the scroll progress of the whole

Each Scroll Scene has its settings and one or more animations that animate the main scroll scene elements or its descendants.

General settings

Scroll Scene settings are:

Direction

Select the scroll direction: vertical, horizontal or auto detect. Although Auto detect (default) will work in many cases, it is recommended to set the direction explicitly with horizontal or vertical.

Smoothing

Smoothing is the time the scroll animation takes to catch up with the current scroll position. Default value is 0.5 seconds. This creates a nice smoothing effect on scene animations that are scrubbed with the scroll (their play value is with scroll). The smoothing has no effect on animations that are played independently.

Enable on

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.

Progress

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.

Show indicators

Check to show debug scroll indicators that show the start, end and trigger for the scroll scene.

Start and end of the scene

Start and end control at what scroll position the scene starts and ends. This can be set in different ways:

• Describe lets you precisely describe how the scene should work. This option gives the most control over the scene parameters.
• Whole scroll area is used when the Scroll Scene is added on the scroller element (body or html for the window viewport). The scene will take up the whole scroll path.

We also have legacy options for the sake of compatibility with Pinegrow Interactions 1.0. With all of these, the end of the scene is set with the Duration setting:

• Enter – the scene starts when the top of the element enters the view.
• Center – the scene starts when the top of the element reaches the center of the scroller view.
• Leave – the scene starts when the top of the element leaves the top of the view.

Let’s take a detailed look at all of these start and end options.

Describe the start and the end of the scene

But the new Scroll Scene lets gives you full control over selecting the scrolled element and defining when the scene starts and ends.

To do that select the Describe option. This will reveal a group of fields that lets you define scroll scene with a human-understandable sentences, like these:

• Start the scene when Scene’s element Top reaches the Center of the div.scroller, plus / minus 100px.
• End the scene when the Bottom of the element section.last reaches scroller’s Top, plus / minus 25%.

Start and end description has the following fields:

Start when…

• Scene element’s [Top, Center, Bottom, Left, Right] – the area of the scene element that will trigger the start of the scene when it…
• …reaches the [Top, Center, Bottom, Left, Right] – the are of the scroll container…
• …of the – select the scroll container, by default it is the window viewport
• …plus / minus – offset of the start expressed in px or % of the scroller view size. Negative value will move the start up, a positive will push it down.

End when…

• The [Top, Center, Bottom, Left, Right] – the area of the scene element (or of another element) that will trigger the end of the scene
• …of the element – select the element whose above mentioned area will trigger the end of the scene. By default this is the scene element.
• …reaches scroller’s [Top, Center, Bottom, Left, Right] – the trigger area of the scroller
• …plus / minus – offset of the ens expressed in px or % of the scroller view size. Negative value will move the end up, a positive will push it down.

Let’s take a look at the couple of examples:

In this example, the Scroll Scene is a Section within the scroll container. The Scene begins when the top of the section touches the bottom of the scroll container (when the section enters into view) and ends when the bottom of the section reaches the bottom of the scroll container (when the bottom of the section becomes visible).

The scene doesn’t have to end on the scene element itself. In this example, the scene starts when the scene element comes into view and ends when the bottom of the next section becomes visible:

Whole scroll area

This is a convenience setting for running the animation through the whole scroll area.

This is the same as saying: Start the scene when the Top of the element reaches the Top of the scroller (viewport by default) and end when the bottom of the element reaches the bottom of the scroller.

The Scroll Scene with Whole scroll area option should be added to the scroll container, body or html for the window viewport.

In this example we have a Scroll Scene with Whole scroll area on the scroll container element that animates the progress of the scroll:

Enter, Center and Leave – compatibility with Interactions 1.0

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

Duration

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.

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.

Offset

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.

Pinning the scene

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.

Note that the Pin effect is implemented by inline CSS styling with and inserting a placeholder element into the structure of the page. In some cases this can create conflicts with CSS styles or dynamic code. In case of issues, try changing the Pin settings.

The way how the pinning is done can be customized with:

Pin element – select the element that will be pinned. By default, this is the scene element. There can be only one pinned element per scene.

Pin type – the element can be pinned with position:fixed or by using the CSS transform. By default, the Interactions library will try to chose the best approach.

Append to body – check to re-parent the pinned element and append it to the body element.

Spacing – chose the way how the spacing is added below the pinned element. By default, Interactions try to chose the best approach.

Snapping

Snapping moves the scroll into selected positions after the user stops scrolling.

Snap to

Snap to setting has the following values:

• Start, center and end of the scene element, plus their combinations.
• Elements snaps to children elements of the scene element. All children elements are used unless a selector is specified with the Snap to elements selector.

Delay, duration and ease can be used to customize the snapping animation.

The most useful setting is to snap the scroll to positions of selected children elements.

In this example we have a Scroll Scene on the scroll container and activate snapping to its children elements:

We can add offset to the snapping animation by setting the Top covered value in Pagination & Options section of the Scroll Scene.

In this example the top 20px of the scroll container are set as being covered, so the elements will be snapped 20px after the top.

Pagination & Options

Pagination is used to indicate current Scroll scene element, for example the current slide.

To use it you need to select the elements that represent the scene elements and elements that represent pagination items (bullets, or links 1, 2, 3 and so on).

Next, you specify one or more animations that are played when the item becomes current and ceases to be current.

Pagination items can also scroll to their element, see Scroll to transforms.

Scene animations

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

Target selects the element that will be animated. By default, the scene element itself is animated by the selected animation.

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

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.

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.

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.

Play

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.

Scroll direction

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.

Replay each time

Replay each time setting on independent scroll animations will cause the animation to be replayed every time the scroll scene becomes visible.

Normally, the animation is played just once, unless it has the Reverse in opposite direction checked and it has reversed previously.

Enable on

Show the animation only on mobile or only on non-mobile devices. By default, the animation is played on all devices.