# 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.

![The Animations tab of the number 12: card 1. Count up and its When visible badge, the Count up effect, the When visible trigger and the Fires setting on Once it has entered.](https://static.lovelyrender.com/uploads/2026/10/53-editor-animations-tab.png)

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**.

| Effect | Result |
| --- | --- |
| **Circle** | A circle drawn by hand around the content. |
| **Underline** | An underline drawn by hand under the content. |
| **Box** | A box drawn by hand around the text. |
| **Highlight** | A marker highlight that follows line breaks. |
| **Strike through** | A line drawn by hand across the text. |
| **Crossed off** | A cross drawn by hand over the text. |
| **Brackets** | Brackets drawn by hand around the text. |
| **Enlarge text** | The font weight increases, word after word. |
| **Swap words** | The words of the block, separated by a comma and a space, replace one another. |
| **Split text** | The text appears word after word, or character after character. |
| **Type text** | The text is written letter after letter, on a keyboard or by hand. |
| **Count up** | The number of the block climbs from zero. A screen reader always announces the real number. |

| Effect | Result |
| --- | --- |
| **Slide** | The block slides in from a chosen direction. |
| **Fade in** | The block fades in. |
| **Zoom in** | The block grows to its place. |
| **3D flip** | The block enters by pivoting around the vertical axis. |
| **Expand** | The block is revealed through a shape that grows. |
| **Ken Burns** | A slow zoom and pan, on an image. |
| **Shimmer** | A sweep of light passes over the block. |
| **Gradient border** | A gradient outline turns around the block. |
| **Scale** | The block changes size between two values. |
| **3D Tilt** | The block tilts in 3D toward the pointer. |
| **Shift** | The block moves slightly with the pointer, over its parent block. |
| **Magnetic** | The block drifts toward the pointer. |
| **Spread siblings** | Placed on a container, it spreads the other children away from the one the pointer is over. |
| **Stagger children** | The block’s direct children, or its words, animate one after another. |
| **Waved border** | A wavy outline drawn by hand. |
| **Draw** | The strokes of an icon or an SVG are drawn from start to end. |
| **Parallax** | The block moves at a different speed during scrolling. |
| **Fit to a block** | The block tightens onto another block during scrolling. |

**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](https://lovelyrender.com/documentation/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.

| Trigger | Start of the animation |
| --- | --- |
| **When visible** | When the block comes into view while scrolling. |
| **On hover** | When the pointer passes over the block. |
| **On click** | When the visitor clicks the block. |
| **When activated** | When the block becomes active: the tab or slide displayed, or a block that another one activates. |
| **On scroll** | The animation advances at the pace of scrolling. See [Animate on scroll](https://lovelyrender.com/documentation/animate-on-scroll/). |

**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.

| Choices | Start |
| --- | --- |
| **As soon as it appears** | As soon as the top of the block enters from the bottom of the screen. For a large section. |
| **Once it has entered** | When the top of the block is 80 px from the bottom of the screen. Default value. |
| **Well into view** | When the top of the block reaches about two thirds of the screen. For a counter or a hand-drawn stroke. |
| **At a set height** | When the top of the block reaches the height set with the slider, from 10 to 90% of the screen from the top. The slider opens at 50. |

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.

| Behavior | Effect of the click |
| --- | --- |
| **Play once** | The first click plays the animation, which stays in its final state. |
| **Replay** | One click plays the animation, the next rewinds it, the third replays it. |

**Warning:** The click is captured on the whole block. A click on a link or a button inside the block also triggers the animation. Animate a container that does not include the clickable element instead.

## Choose the behavior

| Behavior | Effect |
| --- | --- |
| **Play once** | The animation plays once and stays in its final state, even if the block becomes active again. Default value. |
| **Replay** | The animation replays on every entry into view, every hover or every activation. |
| **Infinite** | The animation loops as long as the block is active. Offered for effects that form a cycle: **Ken Burns**, **Gradient border**, **Shimmer**, **Custom @keyframes**, **Stagger children**, **Count up**, **Swap words**, **Draw** and **Scale** with the **Pulse** option. |

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

## Set the duration

| Setting | Effect | Default value |
| --- | --- | --- |
| **Timing function** | The curve of the movement: **Ease in out**, **Ease in**, **Ease out**, **Linear** or **Custom (cubic-bezier)**. | That of the effect |
| **Duration (ms)** | The duration of the animation. | That of the effect, for example 600 for **Fade in** and 1,000 for **Underline** |
| **Delay (ms)** | The delay before the start. | 0 |

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.

![Three animations on a heading: 1. Fade in with the When visible badge, 2. Underline with the With previous badge, 3. Highlight with the After previous badge, then the Add animation button.](https://static.lovelyrender.com/uploads/2026/10/994-doc-pages2-anim-liste.png)

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.

| Effect | Options |
| --- | --- |
| **Slide** | **Direction**, among eight, **Up** by default. **Distance**, 96 px by default. **Fade**, checked by default: the block fades in during the slide. **Blur**: the block sharpens from a slight blur. |
| **Expand** | **Shape**: **Horizontal**, **Vertical**, **Radial**, **Diamond**, **From top**, **From left** or **Lines**. |
| **Scale** | **Scale from** (1), **Scale to** (1.1) and **Pulse**, which returns to the starting value. |
| **Shimmer** | **Direction**, **Apply to** (**Whole block** or **Text only**), **Color** and **Band width**. |
| **Type text** | **Writing**: **Keyboard**, with a cursor, **By hand**, or **Letters**, with no cursor. |
| **Split text** | **Split by**: **Word** or **Character**. |
| **Stagger children** | **Targets** (**Direct children** or **Words**), **Arrangement**, then the opacity, scale and starting and ending position. |
| Hand-drawn effects | **Color**, **Weight** and **Visual variation**, whose **New variation** button draws another stroke. |

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

**Warning:** Do not put a drawn effect on a block in **Swap words**: each word replaces the content of the block, including the stroke.

## 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.

| Setting | Effect |
| --- | --- |
| **Pass the active state to children** | When the block becomes active, its direct children become active too. They stop being active with it. |
| **Add target block** | Chooses a block of the page by its anchor, the **Source event** (**Click**, **Hover** or **When activated**) and the **Action** on the target (**Activate**, **Deactivate**, **Toggle** or **Click**). |
| **Synchronize child groups** | Placed on a parent, it makes the elements of the same rank in its lists of children advance together. |

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.

| Setting | With an animation |
| --- | --- |
| **Rotation**, **Translate**, **Scale**, **Skew** | Stay applied. |
| **Opacity**, **Filter**, **Clip path** | Do not combine with an entrance effect, which animates them itself. Set on the block, they take precedence and the effect no longer animates them: a fade on a block at 50% opacity does nothing. Set by a saved style, the effect takes precedence. |

## 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](https://lovelyrender.com/documentation/appearance-motion-switchers/).

## See also

- [Animate on scroll](https://lovelyrender.com/documentation/animate-on-scroll/)
- [Set size, borders and effects](https://lovelyrender.com/documentation/size-borders-effects/)
- [Open a modal or a side panel](https://lovelyrender.com/documentation/open-modal-side-panel/)