Scroll transform trigger

With Scroll transform trigger you can customize the animation when scrolling the screen. The animation will start when the trigger element is scrolled, which can be set in the parameters.

Settings for the Scroll transform trigger

Trigger element

With this setting you can select an element upon scrolling of which the animation starts. By default, the object to which the animation is applied is set as a trigger element.

To change a trigger element, click its name or the pointer icon, select the desired element on the canvas or in layers and confirm the selection.

Start

With this setting you can set the moment when the animation starts playing on the screen. The start of the animation depends on the position of the trigger element in the viewport.

Element starts entering viewport is the default option. This means that the animation starts when the top boundary of the trigger element starts appearing on the screen.

If Half of element entered viewport option is selected the animation starts when half of the trigger element is in the viewport.

If Element is fully visible in viewport is selected the animation starts when the whole trigger element is in the viewport.

End

With this setting you can set the moment when the animation stops playing on the screen. The end of the animation depends on the position of the trigger element in the viewport.

Element is fully invisible in viewport is the default option. This means that the animation stops when the trigger element has completely left the viewport.

When Half of element exited viewport is selected, the animation stops when half of element has left the viewport.

When Element starts exiting viewport is selected, the animation stops when the element starts moving out of the viewport.

Offset

With this setting you can offset the start or end of the animation by specifying an offset value for the trigger element relative to the viewport. This gives you even more flexibility in controlling the start and end of the animation depending on the position of the trigger element in the viewport.

To add an offset, click the checkbox next to the Start or End option and enter the desired value. The offset value can be set in pixels or as a percentage of the height of the trigger element: positive or negative.

Animation start offset

The selected offset value is based on the trigger element position set in the Start setting.

Examples:

Element starts entering viewport and a 30% offset are selected — the animation start boundary will be offset 30% down. In this case, the animation will start when the top third of the trigger element appears in the viewport.

Element starts entering viewport and a -100px offset are selected — the animation start boundary will be shifted 100px up. The animation starts when an area 100px above the top boundary of the trigger element in the viewport appears.

Animation end offset

The selected offset value is based on the trigger element position set in the End setting.

Examples:

Element is fully invisible in viewport and a -30% offset are selected — the animation end boundary will be offset 30% up. In this case, the animation will end when the bottom third of the trigger element is still in the viewport.

Element is fully invisible in viewport and a 100px offset are selected — the animation end boundary will be offset 100px down. The animation ends when the trigger element is completely out of the viewport and the user has scrolled an additional 100px of the page.

Smoothing

With this setting you can set the animation delay in seconds for a smoother effect. The delay is set in seconds. For example, if you set the delay to 1 second, the animation will react to scroll with a 1 second delay.

Additional settings

Additional settings for the trigger element can be enabled by clicking the three dots on the right.

About Viewport boundaries

By default, viewport is a visibility area for trigger element.

The viewport has two boundaries: top and bottom.

Bottom boundary

When scrolling a page, all elements appear bottom-up, so the bottom boundary is considered the start of the trigger element's visibility zone. The animation starts at this point. Inpreview mode, the bottom border is marked with a green scroller-start marker.

Top boundary

The top boundary of the viewport is the end of the trigger element's visibility zone. This is where the animation ends. In preview mode, the top boundary is marked with a red scroller-end marker.

By default, the top boundary of the viewport (scroller-end) coincides with the top of the page viewport (0%), and the bottom boundary of the viewport (scroller-start) coincides with the bottom of the page viewport (100%).

Viewport boundaries setup

You can change the values for the boundaries in the Viewport Boundaries setting.

Viewport bottom boundary

With this setting you can control the start boundary of the animation.

The animation starts when the start point set for the trigger element reaches this boundary (scroller-start). This looks like as follows in preview mode:

Viewport top boundary

With this setting you can control the end boundary of the animation.

The animation ends when the end point set for the trigger element reaches this boundary (scroller-end). This looks like as follows in preview mode:

The following values ​​can be set for the viewport boundaries:

top: the top boundary of the viewport;

center: the middle of the viewport;

bottom: the bottom boundary of the viewport;

any value in pixels or percentages of the viewport height.

For example, if you set both boundaries to 50%, this does not mean that the viewport will collapse to zero. In this case, the animation will work as follows:

it starts when the start point of the trigger element reaches the middle of the viewport.

it ends when the end point of the trigger element reaches the middle of the viewport.

Viewport boundaries markers are shown by default in the preview. They can be hidden using the Show boundaries on preview mode checkbox.

Presets

You can select one of the default presets. This will add a set of effects with the predefined settings. The following types of presets are available:

Fade In

Scale In

Scale In Bottom

Flip Horizontal

Flip Vertical

Slide In From Top

Slide In From Left

Slide In From Right

Slide In From Bottom

Custom

By default, when you add animation, the preset settings are set to Fade In.

Effects

Effects are used to change the behavior of the element during the animation. To add an effect, click "+" on the right.

6 effects can be customized :

Move : to move an element along the X, Y, and Z axes.

Scale : to scale (increase or decrease) the size of an element within the range from 0 to 100% (from 0 to 1) or more than 100% (1+).

Rotate : to rotate an element along the X, Y, and Z axes.

Skew :  to skew an element along the X and Y axes.

Opacity : to change the opacity of an element from 0 (completely invisible) to 100% (completely visible) or vice versa (from visible to invisible).

Size : to change the size of an element by width and height.

Clicking on the effect name will take you to its settings. Here you can view the default options and set the desired parameters.

The following settings are available for effects:

Start and End settings

With these settings you can specify values for the effect parameters at the start and end of the animation.

Effect keyframes

With this setting you can set the effect time relative to the overall animation time. To do this, you need to set the start and end of  the effect as a percentage of the start of animation.

Example: start point — 0%, end point — 50%. The effect will be active from the beginning to the middle of the animation.

This is convenient to differentiate the effect time when adding several of them.

Easing

The setting allows you to set the acceleration and deceleration pattern for the effect throughout the animation to improve its perception.

The added effect can be removed at any breakpoint by clicking the three dots and selecting the appropriate action. If you do not want to play the effect with the selected breakpoint, you can hide it by clicking the eye icon to the right of the name.

Breakpoints

Here you can disable animation for various breakpoints. By default, animation is enabled for all breakpoints.

Settings are inherited from the base resolution. For example, if you disable animation on a tablet, it will only work on a computer; mobile breakpoints will be disabled.

You may enable or disable animation playback for each device by moving the slider to the appropriate position.