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.
Basic actions when working with animations:
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.
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.
In the preview mode, the setting is displayed as a green start marker.
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.
In the preview mode, the setting is displayed as a red end marker.
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.
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 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. In preview 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%).
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.
The value for the top boundary of the viewport does not necessarily have to be less than the value for the bottom boundary. These boundaries do not directly outline the viewport, but affect the start and end points of the trigger element's visibility area, i.e. at the moment of the start and end of the animation. Therefore, when choosing them, you need to proceed from the desired animation path.
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.
This way, you can flexibly control the animation path using two types of settings:
- Viewport relevant settings: viewport boundaries — scroller-start and scroller-end;
- Trigger element relevant settings: animation start and end — start and end in combination with the trigger element offset settings.
Viewport boundaries markers are shown by default in the preview. They can be hidden using the Show boundaries on preview mode checkbox.
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.
If you add new effects or change the current ones, the Custom preset will be automatically set. Selecting a preset will reset all your settings to the default values for that preset.
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.
If you add two identical effects (for example, Rotation), the start point of the second effect will be automatically linked to the end point of the first one. This allows you to run effects sequentially. For example, the first effect will be active from the start to 30% of the animation, and the second — from 30% to its end.
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.
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.
