Zero Block: Step-by-step animation

Setting up advanced animation capabilities in Zero Block
Video tutorial
Step-by-step animation
Watch this video tutorial about working with step-by-step animation in Zero Block or read a detailed how-to guide below.
There are two animation modes in Zero Block:

1) Basic Animation. It is simple animated effects, for example, when page elements appear (through opacity, from bottom to top, from left to right, and so on), parallax and fixed position. They are used 90 percent of cases.

Guide to basic animation →

2) Step-by-step animation allows you to make bright, creative ideas a reality – in a way that you want.

Check out different examples of what you can achieve using step-by-step animation https://tilda.cc/lp/step-by-step-animation/
Let's start with step-by-step animation
The step-by-step animation tool is available in Zero Block, a web editor aimed at professional designers. Add Zero Block to your page by simply selecting it from the block library (find it in the very bottom of the page, category Other). Or click on the Zero Block icon in the menu at the bottom of a page.
Click Edit block in the top left-hand corner to edit your page.

Add the new element, highlight it, open the site settings, scroll down to Step by Step Animation and click Add.
Creating a step-by-step animation will cancel all basic animation settings for each element.
Selecting an event to launch animation
Begin by choosing an event at which point to launch your animation. There are five such events:
  • Element on Screen — animation launches as soon as a particular element appears on screen;
  • Block on Screen — animation launches when an entire current block appears on screen;
  • On Scroll — animation launches and continues on scroll;
  • On Hover — animation launches on hover;
  • On Click — animation launches on click.
The start point of an animation has three additional options: Start Trigger, Loop and Trigger Offset.

  • Start Trigger — An area or a thing that will launch your animation. Choose from three areas: On Window Top / On Window Center / On Window Bottom;
  • Trigger Offset — This is when the start of your animated object is offset relative to the chosen trigger point: Window Top / Window Center / Window Bottom;
  • Loop — An option for looping an animation.
Test play animation of this or all elements in a block with the help of Test and Play Element / Play All buttons.
Adding animation steps
The first step was set by default. It's called Start. Add steps and change element properties at each step. This will make the element change.

To add a step, click on Add Step.
You may switch between steps. The blue stroke around an element means it is in its normal state while a green stroke means the step is being edited.
To change the object's initial position, for example if you'd like it to be invisible at launch (opacity = zero), add the first step using this property plus set the duration at 0 seconds.
Each step has a set of properties, such as: Duration, Move, Scale, Opacity, Rotate, Easing and Delay.

Duration — length of animation in seconds;
Move — coordinates of the spot where an element moves relative to its start position. Specify them as values or simply move the element;
Scale — % an element will increase or decrease by the end of this step;
Opacity — opacity value of an element towards the end of this step;
Rotate — rotation of an element, denoted in degrees, towards the end of this step;
Easing — choice of animation effects: Linear (linear animation execution); easeIn, easeOut, easeInOut (slowing down at the beginning, end or in the beginning and the end of animation); bounceFin (a small bounce of an element at the end of an animation);
Delay — a pause before launching an animation.
Animation is adding steps and changing properties of elements on a page at each step.
A two-step animation example
Let's take a look at how to move this yellow square 550 px to the right, scale it down while in motion and return to its original position.
See a step-by-step guide with our comments below:
Check how your animation works in a browser
In addition to Play Element and Play All buttons, in Tilda you can preview your animation.

Open two tabs in your browser: Zero Block and the same page in a preview mode.

So when you click Save in Zero Block, you will changes in a preview page after you refresh it.
Step-by-step animation examples:
Click to view your page and watch the animation
Click to view your page and watch the animation
Click to go to your page and watch the animation
Made on
Tilda