Zero Block: Step-by-Step Animation

How to set up a complex animation in Zero Block

Video tutorial

Step-by-step animation

Watch this video tutorial on creating 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 is a simple animation. These are ready-made, most commonly used effects, such as the appearance effect (through opacity, bottom-up, right-to-left, etc.), parallax, and fixing. These are enough in 90% of cases.

Guide to basic animation →

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

Check out different examples of what you can achieve using step-by-step animation.

Getting started with step-by-step animation

The step-by-step animation tool is available in Zero Block, a web editor aimed at professional designers. Add a Zero Block to the page by selecting it in the Block Library (just below the "Other" category), or click on Zero Block at the bottom of the page.

Click on Edit Block in the top left corner of the Zero Block to customize it.

Add a new element, select it, open the Settings panel, scroll down to the "Step by Step Animation" section, and click on Add.

Creating a step-by-step animation for an element will cancel all Basic Animation settings for this element.

How to select an event to launch an animation

Start creating a step-by-step animation by selecting an Event—a condition for the animation to start playing. There are five conditions to choose from:

Element on Screen—an animation starts playing as soon as a particular element appears on the screen;
Block on Screen—an animation starts playing when an entire block appears on the screen;
On Scroll—an animation starts playing and continues to play during scrolling;
On Hover—an animation starts playing on hover;
On Click—an animation starts playing on click.

The animation's start point has three additional options: Start Trigger, Loop, and Trigger Offset.

Start Trigger is an area or thing that will launch your animation. Choose from three areas: on Window Top, Window Center, or Window Bottom;
Trigger Offset is the offset of the animation's start point to the selected Window Top, Window Center, or Window Bottom;
Loop is used to set up an animation to play on loop.

You can test an animation or a selected element or all elements in the block by clicking on Play Element or Play All.

How to add 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. An element's border turning blue means that the element is in its original position, while the element's border turning green means that the step is being edited.

To change an element's original position, for example, to make it invisible at launch (opacity—0%), add the first step and set opacity to 0% and duration to 0 seconds.

Each step has a set of properties such as Duration, Move, Scale, Opacity, Rotate, Easing, and Delay.

Duration is the duration of an animation in seconds.
Move is the coordinates where the element is moved relative to its original position. To set them up, you can either assign values or move the element.
Scale is the degree of increasing or decreasing the element by the end of the step.
Opacity is the value of element transparency by the end of the step.
Rotate is an element's rotation in degrees towards the end of the step.
Easing is the option to choose an animation effect: Linear (linear animation execution); easeIn, easeOut, easeInOut (slowing down at the beginning, end, or both at the beginning and the end of the animation); bounceFin (a small bounce of an element at the end of the animation).
Delay is the duration of a pause before an animation starts playing.

Creating an animation is adding steps and changing element properties at each step.

The example of a two-step animation

Let's take a look at how to move this yellow square 550px to the right, scale it down while in motion, and return to its original position.

Here's a step-by-step guide with our comments below:

To add a yellow square, open the element settings, go to the "Step by Step Animation" section, and click on Add.

Select an event to launch the animation.

It could be Element on Screen, for example. In this case, the animation will start playing when an element appears on the screen.

Add Step 1.

Let's change its properties. Offset to the right of the X-axis by 550 pixels.

And half its size (50%).

Add Step 2.

Let's change the element's properties during Step 2 by reverting the position and size values to its original setting: offset—0 px, size—100%.

Click on Play Element to test the animation.

Check how your animation works in the browser

In addition to the "Play Element" and "Play All" buttons, you can also preview your animation.

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

So when you click on Save in Zero Block, you will see changes on the preview page after you refresh it.