# Animate on scroll

This article explains how to make an animation advance at the pace of scrolling: a block that reveals itself, a parallax, a background that tightens, a video or an image sequence with the texts that go with it. You will also learn how to give the section the height it needs.

## Before you start

- A scroll animation does not play on its own: it advances when the visitor scrolls the page, stops when they stop and can go back when they scroll up.
- It is set in the **Animations** tab of a block, like the other animations. [Animate a block](https://lovelyrender.com/documentation/animate-block/) describes this tab.
- Nothing moves in the editor. To see the result, open the page on your Staging and scroll it.
- A visitor who asks for less motion sees the block in its final state. No calculation is made while they scroll.

## Make an animation advance on scroll

1. Select the block, open the **Animations** tab and add an animation, for example **Fade in**.
2. Set the **Trigger** to **On scroll**. The duration and delay fields disappear: the visitor’s scrolling takes the place of duration.
3. Under **Starts**, choose where the block must be for the animation to be at its start.
4. Set **Ends at**, the screen height where the animation reaches its end.
5. Choose when it **Plays**, then its **Behavior** and its **Travel curve**.

| Setting | Effect | Default value |
| --- | --- | --- |
| **Starts** | The line of the screen that the top of the block must reach for the animation to be at its start: **As soon as it appears**, **Once it has entered**, **Well into view** or **At a set height**, set by a slider. | **Once it has entered** |
| **Ends at (% from the top)** | The screen height, measured from the top, where the animation reaches its end. The lower the value, the longer the path. | 20 |
| **Plays** | **On the way in**: when the block arrives, between the two lines. **On the way out**: in reverse, when the block leaves the screen through the top. **Both**: it appears as it arrives and fades as it leaves. | **On the way in** |
| **Behavior** | **Play once** keeps the furthest point when the visitor scrolls back up. **Replay** makes the animation go back with them. **Infinite** restarts the animation on every pass, on the effects that form a cycle. | **Play once** |
| **Travel curve** | How the animation follows the scrolling. **Linear** follows it as closely as possible. | **Linear** |

The animation is halfway when the block is halfway between the two lines. The end line stays at least 15% of the screen height above the start line. At the very bottom of a page, the path shortens so the animation reaches its end at the end of the page.

The **On scroll** trigger is offered for the reveals (**Fade in**, **Slide**, **Zoom in**, **3D flip**, **Expand**), for **Scale**, **Ken Burns**, **Shimmer**, **Gradient border**, **Custom @keyframes**, **Stagger children**, for the effects drawn by hand, for **Draw** and for the text effects **Count up**, **Type text**, **Enlarge text**, **Split text** and **Swap words**.

Any animation you import with **Custom @keyframes** can thus advance on scroll.

**Note:** A scroll animation can neither follow another animation nor be followed: it has no start or end in time.

### Example: a heading that fades as the page advances

1. On the page’s opening heading, add **Fade in** with the **On scroll** trigger.
2. Set **Plays** to **On the way out**.

The heading is visible when the page opens and fades while the visitor scrolls down. With **Slide** downward and **Blur** checked, it moves up while blurring.

### Animate inside a sticky block

A block placed inside a block in **Sticky** position does not move with the page while it is held. Its path becomes that of the sticky block in its section. The **Starts** and **Ends at** lines no longer apply. **On the way in** plays over this whole path, **On the way out** in reverse and **Both** appears over the first half and fades over the second.

## Move a block in parallax

The **Parallax** effect moves the block at a different speed than the page while scrolling. Its only trigger is **On scroll**.

| Setting | Effect | Default value |
| --- | --- | --- |
| **Behavior** | **Play once** freezes the block at its **Max offset**. **Replay** brings it back when the visitor scrolls up. | **Play once** |
| **Direction** | Where the block drifts when the visitor scrolls down, among eight directions. | **Upward** |
| **Speed** | From 0.1 to 1. | 0,3 |
| **Max offset** | The largest movement, in `px`, `%`, `vh` or `rem`. 0 means no limit. | 0 |

The movement starts from zero when the block enters the screen. For a block that starts offset and returns to its place, choose **Slide** on scroll instead, with **Fade** unchecked.

## Tighten a block onto another

The **Fit to a block** effect tightens a large colored background onto its content when the page scrolls. It can also make it grow from that content when the section arrives.

1. Compose the block that carries the effect at its large size, for example a background container placed under the content.
2. Give an HTML anchor to the block whose size it must take, for example a container of the content.
3. On the background, add **Fit to a block** and choose that anchor in **Reference block**.
4. Choose the direction in **Motion**.
5. Set **Starts**, **Ends at** and the **Travel curve**, as for a scroll animation.

| Choices | Effect |
| --- | --- |
| **Grows in** | The block starts at the size of the reference and grows when the section arrives. |
| **Shrinks out** | The block tightens onto the reference when the section leaves. Default value. |
| **Both** | The block grows on arrival and tightens on leaving. |

The block is clipped to the size of the reference, without moving anything in the page. Its corners go from their own rounding to that of the reference. In a **Sticky** block, the path becomes that of the sticky block in its section.

**Note:** Without a reference, or if the chosen anchor no longer exists in the page, the block keeps the layout you composed.

## Make a video follow the scroll

A video can advance at the visitor’s pace: a filmed object in rotation turns while they scroll down the page. It suits up to about 200 frames, or 8 seconds.

1. Insert a **Media** block and choose your video in the media library.
2. In the **Settings** tab, **Video settings** panel, set **Playback** to **Follows the scroll**.
3. Give height to the section that contains the block, as described in the section “Give the section its height”.

![The Video settings panel: Playback set to Follows scroll, the note about the copy being prepared, the Behavior Play once, then Loop, Muted and Player controls grayed out and Preload set to None.](https://static.lovelyrender.com/uploads/2026/10/996-doc-pages2-lecture.png)

Lovely Render prepares a copy of the video made to be scrubbed, in a few minutes. Meanwhile, the block shows the cover image and all the section’s texts are displayed. The animation starts by itself when the copy is ready: you have nothing to republish.

This mode imposes its settings, which are grayed out: no loop, sound off, no controls and a **Preload** of **None**. Setting **Playback** back to **Manual** gives them back as you had left them.

The copy weighs about four times as much as the original video: it must be able to stop on any frame.

## Scroll through an image sequence

An image sequence suits a longer animation, or one produced by a tool that outputs images instead of a video. It is imported outside the media library.

| Item | Rule |
| --- | --- |
| Archive | A `.zip` file that contains only your images. A folder inside is fine. |
| Format | AVIF or WebP, the same for all images. AVIF weighs about a third less at equal quality. |
| Size | All images at the same dimensions, 1,920 × 1,080 at most. 1,280 pixels wide suits a recent phone. |
| Count | From 2 to 9,999 images. |
| Names | Free: the images are renumbered on import, in their natural order. |

1. Insert a **Media** block without choosing a file.
2. In the **Media** panel, **Scroll animation** section, click **Choose an animation**.
3. Click **Upload a .zip of images** and choose your archive.
4. Select the imported animation. The library shows its first frame, its number of frames, its weight and its dimensions.

A sequence and a media library file exclude each other: choosing one clears the other.

Uploading an archive under the same name replaces the animation, in all the blocks that use it. An animation cannot be renamed. An animation still in use cannot be deleted.

If the archive is refused, the message gives the cause: a format other than AVIF or WebP, mixed formats, different sizes, more than 1,920 × 1,080, fewer than two images or not enough space.

## Give the section its height

The block of a video or a sequence stays stuck to the screen while its section scrolls: this travel is what plays the animation. Its **Position** switches to **Sticky** and is grayed out. Allow one screen of scrolling for 25 frames.

| Frames | Section height |
| --- | --- |
| 100 | 500 svh |
| 150 | 700 svh |
| 200 | 900 svh |

1. Read the height that the **Media** panel indicates for your animation.
2. Select the container that holds the block.
3. In the **Styles** tab, **Size & Spacing** panel, enter this value in **Height**, with the unit `svh`.

The `svh` unit does not change when a phone’s address bar slides away, unlike `vh`.

**Warning:** In a section that is too short, nothing animates: the block shows its first frame and all the section’s texts are displayed. No error appears. Put a single animation per section, because two animations would use the same travel.

## Set the behavior of the media

A block that follows the scroll receives a **Follows the scroll** entry in its **Animations** tab. Its effect cannot be changed. Its **Behavior** is taken from the **Media** panel.

| Behavior | When the visitor scrolls back up |
| --- | --- |
| **Play once** | The media keeps its last frame and the texts stay displayed. Default value. |
| **Replay** | The media goes back. The texts follow their own behavior. |
| **Infinite** | The media advances at its natural pace (25 frames or two seconds of video per screen) then restarts from zero at its end, as long as the section lasts. |

## Make the texts appear with the media

Each text in the section can appear at the moment the media shows what it talks about.

1. Place your texts in the same section as the media, next to it.
2. Select a text and add an animation to it, for example **Fade in**.
3. Set its **Trigger** to **At a point in the animation**. This choice only appears in a section that contains a media animated on scroll.
4. Set **Appears at (% of the animation)**, from 0 at the start of the media to 100 at its end.
5. Set **Ends at (% of the animation)**, the point where the text’s animation is complete. If left unset, it sits ten points further.

The text advances with the media: the closer its two points are, the faster it arrives. Its **Behavior** says what it does when the visitor scrolls back up: **Play once** keeps it, **Replay** puts it away. On a media set to **Play once**, which does not go back, a text set to **Replay** stays displayed.

Three arguments set at 20, 55 and 85% of a product animation each arrive when the image shows what it talks about.

**Note:** If the media is removed, or while its video is not ready, the texts are displayed as soon as the page loads.

## Advance lists on scroll

A list of benefits and the stack of their photos can advance together while the visitor scrolls down.

1. Place both lists in the same container, itself inside a block in **Sticky** position, in a section taller than the screen.
2. On the lists’ container, in the **Interactions** part of the **Animations** tab, turn on **Synchronize child groups**.
3. Set **Select on** to **Scroll**.
4. On the list items, set what changes in the **Active** state, for example a photo that appears.

The active item advances one rank at each equal share of the section’s path. Outside a sticky block, it changes when the container passes the middle of the screen. The lists advance over the ranks that all of them have.

## Respect visitors who are sensitive to motion

For a visitor who has asked for less motion, in their device or in an animation switcher:

- a scroll animation is displayed in its final state, except **Scale**, which keeps the block’s original size, or **Swap words**, which keeps its first word;
- a video or a sequence is not downloaded: the first frame is displayed with its alt text;
- all the section’s texts are displayed.

The alt text of the **Media** block describes the whole animation to a person who does not see it. Fill it in.

## See also

- [Animate a block](https://lovelyrender.com/documentation/animate-block/)
- [Upload your photos and videos](https://lovelyrender.com/documentation/upload-photos-videos/)
- [Set size, borders and effects](https://lovelyrender.com/documentation/size-borders-effects/)