Animation introduction

Presets
Animation from scratch
On page load
On viewport enter
On scroll
On click
On hover
On animation trigger

Animation is a great tool that lets you interact with the visitors of your site.

— It attracts attention to a particular section, button, form or element.
— It calls to some action: to click a button, to fill in a form, to give contact info, etc.
— It helps to showcase the product features.
— It illustrates abstract processes.
— It guides users around the site.

NOTE
Any animation extends the page load time.

Animation should not distract attention from the main point: users visit sites to get some information. It should help them in the search and not interfere with it. That's why you need to check that your animation doesn't slow down the site performance.

To set up animation, go to the context menu of an element or select an element and press A on the keyboard.

Now you should choose between starting animation from scratch or selecting some pre-made animations from a range of presets. 

Any set-up animation can be copied and pasted to other elements.

A preset is a saved set of animation settings that represent main types of element movement. 

Simple presets are animations made of one step: an element moves from the point A to the point B, resizes, becomes transparent/opaque, rotates or stretches.

Complex presets contain more complicated animations that are made of several steps or several parameters of a step. Presets are a handy way to start creating animation.

You can change the settings of any preset as you see fit. The example below shows how to change the settings of the first step. But you can also change the settings of the initial state and add new steps.

If you choose Start from scratch, you need to specify all the settings values on your own.

Play animation
You can set up which action of a user triggers playing animation. There are six types of play animation. We'll talk about each type below.

Number of replays
By default, any animation you create plays only once. You can also set up several replays, loop the steps and select the direction of animation.

Steps
Any animation is made of at least two steps. The initial state of an element is the state from which it starts to transform. Then you set up the steps of this transformation: change the location, size, opacity, etc. of the animated element. The more steps, the more complex your animation gets. 

When a page loads, all animations on the page start playing. If you use this setting, it's important not to overload the page. Apply animations only where they are really needed.

Animation starts playing when the relevant element enters the viewport.

This type of playing animation is used for cards and lists, elements of hero sections, and display boards. It's a perfect tool to emotionally engage the user in the site's narrative.

Learn more about Play animation on viewport enter

Animation starts playing when on scrolling the page the relevant element enters the viewport.

Set up some animated typography, appearing and vanishing elements, background that changes color, dynamic images, parallax effects and more.

Learn more about Play animation on scroll

Animation starts playing on clicking a relevant element. This type of animation is usually used for buttons or shapes that users will interact with.

You can also animate other elements. The main thing here is that users should understand why they would click this element.

Learn more about Play animation on click

This type of playing animation is great for functional elements: buttons, cards or links.

Animate hovering over a button (for example, to make the button change its size or color), set up the text to fade in when hovering over an image, make the background color change when hovering over an element.

Learn more about Play animation on hove

It's the only type of playing animation that lets you create a complex chain of animations by binding one animation to the actions of the other. That is, the second animation starts after a certain step of the first animation.

Learn more about Play animation on animation trigger