Scroll Scene | Pinegrow Web Editor

Scroll Scene

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.

Settings

Scroll Scene settings are:

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.

Duration 200%

This scene takes two viewport  scrolls to complete.

Duration 100%

This scene takes one viewport  scrolls to complete.

Duration 120px

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.

Start on

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:

Start on Enter

This scene starts as soon as it enters into view.

Start on Center

This scene starts when the scene reaches the center of the view.

Start on Leave

This scene starts when it start to leave the view.

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.

Offset 200px

This scene starts when it enters 200px into the view.

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.

Pin 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.

Pinned Scene

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

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

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.

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.

I have two animations

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

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 light-speeding in…

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.

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.

I’m starting at 0%
I’m starting at 50%

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.
I’ll just go along with the scroll…
I’ll be triggered at 50% and go on independently!

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 %.

I’m starting at 0% and ending at 100%
I’m starting at 0% and ending at 50%
I’m starting at 50% and ending at 80%

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.

I’m starting at 0% and will take 2s to finish
I’m starting at 0% and ending in 10s
I’m starting at 50% and will take 0.5s to complete

Scroll direction

Select the scroll direction at which the independent animation should play.

I’ll play on the way down…
…and I’ll play on the way up.

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.

I’ll play on the way down and reverse on the way up.

Enable on

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

I only move on mobile devices.
I only move on non-mobile devices.



Last updated on December 9, 2019 at 6:33 am


Print this article