Scroll animations

Sections animate into view as visitors scroll. Learn where animations play, how to turn them off site-wide, and how to disable them for one section.

On this page
  1. Where animations play
  2. Turn animations off for the whole site
  3. Turn animations off for one section
  4. Choosing or customising animations
  5. Animations do not play? Check these

Many sections come with built-in scroll animations: headings, images and cards fade or slide into place as a visitor scrolls down to them. Animations are on for every site by default and need no setup. This article covers where they play and how to switch them off, for the whole site or for a single section.

Where animations play

  • Your live site: animations play for every visitor, on every plan.
  • Page editor: while you are editing, elements are shown in their final, fully visible state so nothing gets in your way. Switch the top bar from Edit to Desktop or Mobile preview to watch the animations play from the start. Going back to Edit stops them again.
  • Design and Navigation previews: animations play as they would on the live site.

Note: Visitors who have asked their device to reduce motion (an accessibility setting in the operating system) never see the animations. Everything still appears, just without movement.

Turn animations off for the whole site

If you prefer a completely still site, switch animations off once for everything:

  1. Open your site in the dashboard and choose Settings in the sidebar.
  2. Turn on Disable animations.
  3. Click Save changes.

With this on, nothing animates anywhere: not on the live site and not in any preview. Content that would have animated simply appears in place, so nothing is hidden from visitors or search engines. Turn the toggle off again to bring the animations back.

Turn animations off for one section

You can also keep animations on for the site but stop a single section from moving, for example a dense gallery where the reveal feels distracting:

  1. Open the page in the page editor.
  2. Hover the section and click its gear icon to open the section's options.
  3. On the General tab, turn Animations off.

Only that section renders still; the rest of the page keeps animating. Because this changes how the section is rendered, switch to Desktop or Mobile preview to see the effect, then click Update live site when you are ready for visitors to see it.

The Animations toggle only appears when it can do something. You will not see it on a section type that has no animations, or when Disable animations is on in Settings.

The Animations switch in the Section options panel
The Animations switch in the Section options panel

Choosing or customising animations

Animations are part of each section's design; there is no per-element animation picker. If you want a different effect, try a different section type of the same kind; the section library shows what each one looks like. See build a page with sections.

Animations do not play? Check these

  • Disable animations is on in Settings.
  • The section's own Animations toggle is off.
  • You are looking at the page editor in Edit mode rather than Desktop or Mobile preview.
  • Your device has a reduce-motion setting enabled.
  • You changed a setting but have not clicked Update live site yet, so the live site is still serving the old version.

Related articles