Animate a block

This article explains how to add an animation to a block, choose its effect, its trigger and its pace, then chain several animations. You will also learn how to import your own animations and make one block react to another.

Before you start

• Animations are set in the Animations tab of the sidebar, when a block is selected.
• Most blocks have this tab. The table, the logo, the PDF, the embed, the table of contents, the navigation menu and its links, the search, and the filters and pagination of a list do not. Animate the container around them instead.
• Animations do not play in the editor. To see them, open the page on your Staging.
• A visitor who asks for less motion sees your blocks with no animation, in their final state.

Add an animation

1. Select the block and open the Animations tab.
2. Click Add animation. A card is added to the list and opens.
3. Open the Effect menu, which shows Choose an effect…, then choose an effect. Each effect is described in the menu.
4. Choose the Trigger, then the Behavior.
5. Set the Timing function, the Duration (ms) and the Delay (ms), then the options specific to the effect.

Each animation is shown as a one-line summary, for example 1. Count up, with a badge that says when it starts. Only one card is open at a time. The trash can Remove animation deletes it.

A block can carry several animations, but the same effect appears only once: an effect already in use leaves the menu of the other cards. Two motion effects on the same block can work against each other. Prefer a single, short motion effect per block.

Choose an effect

The Effect menu sorts effects into three groups: Text effects, Block effects and Custom.

Custom @keyframes, the only effect of the Custom group, plays an animation that you import: see the section “Import an animation”. Parallax and Fit to a block are described in Animate on scroll.

The motion of an animated icon is chosen with the icon. An Icon gesture entry then appears in the list. It is set like the other animations.

Choose when the animation starts

The Trigger menu is displayed when the effect leaves a choice. Otherwise, the only possible trigger is shown under the effect.

3D Tilt, Shift, Magnetic and Spread siblings start only On hover.

Set the moment the block is visible

With When visible, the Fires setting says how far the block must have entered the screen. Each choice is a line on the screen, which the top of the block must reach.

At the very bottom of a page, a block cannot always rise to its line. Its animation then starts when the page reaches the end.

Animate on click

A click on the block activates the block and a second click deactivates it. The Behavior decides what follows.

Choose the behavior

The Behavior setting is not displayed on effects that follow the pointer.

Set the duration

Some effects add a step: Stagger step (ms) for Stagger children and Split text, Letter step (ms) for Type text. The duration of Type text is that of its letters.

Chain several animations

An animation placed under another animation that ends can start with it or after it.

1. Put the animations in the order you want with the Move up and Move down arrows of their summary.
2. Open the card of the animation that follows.
3. Under Start, choose With previous or After previous. On trigger lets it start on its own trigger.

When at least two animations precede it, the Follows setting chooses which one it follows. Two animations can thus start with the same first one. The summary then shows for example With no. 1.

An animation follows only an animation listed above it. An Infinite animation, an On scroll animation and Split text cannot be followed: they have no known end.

Set an effect’s options

Each effect adds its own settings under the pace. The following table gives the most common ones.

With no color chosen, a drawn effect is drawn in the block’s text color. Highlight takes your design system’s primary color.

Import an animation

The Custom @keyframes effect plays an animation written in CSS and kept in a library shared by the whole site.

1. Choose the Custom @keyframes effect.
2. Next to Animation library, click + (New animation).
3. In the @keyframes CSS field, paste a @keyframes block.
4. Click Save animation. It joins the library.

• An animation contains a single @keyframes block, nothing before or after. The steps accepted are from, to and whole percentages from 0 to 100%.
• Only transforms, opacity, colors, filters, clips, shadows and SVG stroke drawing are kept. Other properties are removed on import.
• A tag, @import, @media, @supports or url() causes the import to be refused.
• Editing an animation while keeping its name updates all the blocks that use it. Changing its name creates an animation.

The pencil Edit animation reopens the source and the Delete button removes the animation from the library.

Activate another block at the end

The On finish, activate setting makes another block active when the animation ends. That block can then start its animations When activated. The list offers the blocks of the page that have an HTML anchor.

With Play once, the activated block stays active. With Replay or Infinite, it is released when the animation is removed.

Make other blocks react

The Interactions part of the Animations tab links a block to others.

Each activated child does what you set for the active state: its colors in the Active state of the Styles tab, Hide this block to appear or disappear, or an animation When activated.

Example: the caption of a slide

The heading of each slide comes in in turn when it is displayed.

1. Select a slide and turn on Pass the active state to children.
2. Select the heading of its caption and add a Slide animation to it.
3. Set its Trigger to When activated.

Each time the slide is displayed, its heading slides in.

Animate a transformed block

An animation is added to the settings of the Effects panel: a tilted card slides or zooms while staying tilted.

Respect visitors who are sensitive to motion

A visitor can ask for less motion in their device settings, or with a motion switcher placed on your site. For that visitor, three things change.

• entrance animations display at once in their final state and a text written letter by letter displays in full;
• nothing follows the pointer or the scroll and animated icons freeze;
• a counter keeps the number you wrote, Swap words its first word and Scale the original size of the block.

The motion switcher is described in Appearance and motion switchers.

See also

• Animate on scroll
• Set size, borders and effects
• Open a modal or a side panel