Tilda Blog

Easing in Zero Block

The easing feature varies the speed of animated elements so that they resemble physical objects. Movements with easing look more familiar and leave a better impression.

There are several easing types:

⚡️ Ease-In-Out
This is the most common type of easing. Animated object with this feature starts and slows down smoother. The movement looks more realistic as it starts slowly, then accelerates, and smoothly slows down until the full stop.

⚡️ Smooth Acceleration (Ease-In)
This easing type allows the object to start slowly and then maintain a constant speed. Such animation looks like a rocket launch.

⚡️ Slowing Down at the End (Ease-Out)
This easing type allows the object to start quickly and slow down gradually before stopping.

⚡️ Elasticity (Elastic Fin)
Like in real life, objects bounce off each other at collision. This easing type adds a smooth bounce at the end of the movement, just like a tennis ball falling on the floor.

While creating animation, try to think about what kind of motion the objects should have, and what the user should associate it with. This will allow you to create a suitable mood and use the animation effectively.

To configure easing in Zero Block, choose a suitable Easing type in the Properties of Step-by-Step Animation.

📌 Tip: Do not use several easing types for elements on one page, unless you do it on purpose implementing a complex animation scenario. Different effects for equivalent elements will confuse visitors and may negatively affect user experience.

Made on