Site-wide animations

false

Site-wide animations

Last updated August 27, 2026 17:08

Enhance the content on your site with special styling effects.

To add striking visual effects to content throughout your site, enable site-wide animations that appear as visitors scroll through your pages. You can also add animations and other image effects to specific elements, like a section background or image block.

This guide reviews setting up site-wide animations and finding other areas where you can add effects.

Site-wide animations are available on version 7.1. On version 7.0, it depends on your template. Some 7.0 templates have template-specific animation options, like blog pages in the Bedford template family. To find your site's template, visit What's my site's version and template?.

Before you begin

  • Animations on individual image blocks, quote blocks, and other areas override site-wide animations.
  • Some collection pages, like blog pages, store pages, and portfolio pages, always have subtle animations when the page loads, even when site-wide animations are disabled.
  • Before adding visual effects to your site, you may want to review our accessibility resources.

Watch a video

Enable site-wide animations

Site-wide animations apply to most areas of your site, with effects more noticeable in some areas than others. These animations primarily affect the way images, text, and other blocks appear when you scroll through a page. Some animations also appear when a visitor hovers over links and buttons.

We recommend enabling an animation style, then testing how it affects different pages of your site. Experiment with each style until you find the one that works best for your content.

To enable site-wide animations:

  1. Open the Animations panel.
  2. Click an animation style.
  3. Choose a Slow, Medium, or Fast animation speed.
  4. Click Save to save your changes and keep editing, or clickExitand then Saveto close the editor.

Site wide animations appear as visitors scroll through your site and elements load

Site-wide animation styles

Choose from these animation styles:

  • None - Disables site-wide animations
  • Fade - Content fades in as it comes into view on the page
  • Scale - Content animates from a smaller size to its final size, creating a zoom effect
  • Slide - Content slides upward into place, accentuating the effect of scrolling down the page
  • Clip - Content slides in line by line from the left
  • Flex - Adds unique animations to headings, linked text, buttons, and portfolio pages, and adds an underline to main navigation and collection page pagination links on hover

Remove site-wide animations

To disable site-wide animations:

  1. Open the Animations panel.
  2. Choose None.
  3. Click Save to save your changes and keep editing, or clickExitand then Saveto close the editor.

Other image and text animations and effects

There are other animations and effects you can enable for specific elements on your site. To learn more about each type, visit the linked guides:

Troubleshooting

If animations aren't appearing on your site, keep in mind:

  • Some content only supports the Fade animation style. If you choose a different style, content that doesn't support it fades instead.
  • If none of your content is animating, ensure you're using a supported browser.
  • Site-wide animations and section backgrounds are only available on version 7.1.
  • Learn how other professionals use animation to enhance their client sites on our Circle blog.

Was this article helpful?

Yes No

1966 out of 2502 found this helpful

Yes No

Site-wide animations