Zero Block: Animation

How to configure animation settings on Tilda
An animation effect can be added to any element in Zero Block. 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 choices include:
  • Animation — various options for when the animation effect starts;
  • Parallax — the parallax effect settings;
  • Fixed positioning — 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 и Trigger Offset.

Duration — length of animation effect, in seconds. This number means how for long the animation effect will appear;
Delay — delay before the start of animation effect, in seconds;
Trigger Offset — indent (in pixels) from the bottom edge of the window container, at which an animation starts to play.

When using animation effects with elements appearing from the top, at the bottom, from the right or left, the Distance option means the distance covered by a block from where it first appears.

The Zoom In effect has a Scale setting – if it is set at less than 100%, the object zooms to the original size, if it is set at more than 100% – the object 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%, this element will move faster than the page being scrolled.

In the settings for Parallax on mouse move, the distance along the X and Y axis means the maximum parallax tilt effect.
Fixed positioning
When an animated element is fixed, you can choose where the element will be fixed. It is the area of your screen (top, centre, bottom) relative to which the fixed positioning effect will start. There is a choice of three areas – On Window Top, On Window Centre and On Window Bottom.

Trigger Offset is the point where an object will be fixed relative to the Window Top, Window Centre or Window Bottom.

Distance — is the length, set in pixels, an object should cover while fixed in one spot.
For further reading about animating a fixed element, we recommend reading Fixing Elements in Zero Block, where we analyse a specific example.
Made on
Tilda