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

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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
• Upload your photos and videos
• Set size, borders and effects