An animation effect can be added to any Zero Block element. There are two types of animation effects: basic and advanced, or step-by-step animation. In this article, we will cover the most basic animation settings.
Basic animation options include:
- Animation—various options for when the animation effect starts;
- Parallax—the parallax effect settings;
- Fixing—the fixed positioning effect settings.
Animation
Animation effects include Fade In, Fade In Right, Fade In Left, Fade In Up, Fade In Down, and Zoom In.
All animation effects have a number of common settings such as Duration, Delay, and Trigger Offset.
The Duration is the animation effect's duration in seconds. The numerical value is the number of seconds the animation effect will be taking place.
The Delay is the delay in seconds before the start of the animation effect.
The Trigger Offset is the offset in pixels from the Window Container's bottom edge at which the animation starts to play.
When using animation effects with elements appearing from the top, bottom, right, or left, the "Distance" option means the distance covered by the block from where it first appears.
The Zoom In effect has a Scale setting. If it is set at less than 100%, the element zooms to its original size. If it is set at more than 100%, the element zooms out and appears smaller.
The Duration is the animation effect's duration in seconds. The numerical value is the number of seconds the animation effect will be taking place.
The Delay is the delay in seconds before the start of the animation effect.
The Trigger Offset is the offset in pixels from the Window Container's bottom edge at which the animation starts to play.
When using animation effects with elements appearing from the top, bottom, right, or left, the "Distance" option means the distance covered by the block from where it first appears.
The Zoom In effect has a Scale setting. If it is set at less than 100%, the element zooms to its original size. If it is set at more than 100%, the element zooms out and appears smaller.
Parallax
Parallax animations have two settings—on scroll and mouse move.
Parallax on scroll
Parallax on mouse move
In the settings for Parallax on scroll, find the Speed setting. If the speed is less than 100%, an element will move slower than the page being scrolled. If the speed is more than 100%, the element will move faster than the page being scrolled.
In the settings for Parallax on mouse move, the distance along the X and Y axes means the maximum parallax tilt effect.
In the settings for Parallax on mouse move, the distance along the X and Y axes means the maximum parallax tilt effect.
Fixing
When setting up a fixing animation, you can choose where the element will be fixed. This is the screen area (the top, center, or bottom of the screen) at which the fixing effect starts taking place. You can choose one of the three areas—on Window Top, Window Center, or Window Bottom.
The Trigger Offset is the point where an element will be fixed relative to the Window Top, Window Centre, or Window Bottom.
Distance is the distance in pixels that the element should cover during the fixing animation.
The Trigger Offset is the point where an element will be fixed relative to the Window Top, Window Centre, or Window Bottom.
Distance is the distance in pixels that the element should cover during the fixing animation.
We recommend that you read the article "Sticky Elements in Zero Block" to learn how to create a fixing effect and what it looks like on a page.
