Note: While our most popular guides have been translated into Spanish, some guides are only available in English.

Animations and image effects

You can add animations to a small area of your site, like a section background or an image block, or you can enable site-wide animations that appear as visitors scroll through your site.

This guide reviews how to enable different animation effects across different areas of your site.

Tip: To add hover effects to your site, like image titles and captions, visit Creating hover effects for your images.

Before you begin

  • Animations on individual image blocks, quote blocks, and other areas override site-wide animations.
  • Some collection pages, like blog pages and portfolio pages, always have subtle animations when the page loads, even when site-wide animations are disabled.
  • When you turn off block and page animations, those areas follow site-wide styles.

Site-wide animations

Site-wide animations are only available on version 7.1.

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

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

To animate site content:

  1. While editing a page, open site styles, then click Animations.
  2. Click an animation style.
  3. Choose a Slow, Medium, or Fast animation speed.
  4. Hover over Done and click Save.

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 links on hover.

Remove site-wide animations

To disable site-wide animations:

  1. While editing a page, click the paintbrush icon, then click Animations.
  2. Choose None.
  3. Hover over Done and click Save.

Watch a video

Background image effects

Background image effects are only available on version 7.1.

If your page section uses a background image, you can add image effects to give the background a more stylized look. Some effects add an animation so the image is always moving, while others only appear as the visitor scrolls through that section of your site.

To add an image effect:

  1. After adding a section background, in the section editor, click Background.
  2. Scroll down to Image effect and choose an effect from the drop-down menu. The effect will appear on your site preview.
  3. Hover over Done and click Save.

Keep in mind:

  • Image effects only appear on browsers and devices that support WebGL, a tool that works with your device's graphics processor. To test whether your browser supports this, visit get.webgl.org. If a browser doesn't support WebGL, the section background will remain static.
  • Image effects don't appear over background videos.

Background videos

You can add background videos to page sections, banners, and other areas depending on your site's version.

Keep in mind:

Background art

Background art is only available on version 7.1.

You can add unique background art to page sections instead of an image or video. Choose an animated pattern for a lively look, or choose a more subtle color gradient. You can use a preset pattern, or customize it by choosing specific shapes, sizes, and motions.

To add background art:

  1. In the section editor, click Background, then click Art.
  2. Click a tile to preview the art in the section. The colors are pulled from the Bright options in your color palette.
  3. To further define the design, click one of the small circles that appears over the tile.
  4. To customize it even further, click the settings icon to open the details panel. See the steps below to learn more.
  5. When you find the design you like, hover over Done in the top-left corner of the page editor and click Save.

Customize background details

You can further customize your background art in the details panel. To open a background's details, click a thumbnail, then click the settings icon.

settings_icon.png

Scroll through the options and settings until you find a pattern you like. Depending on the type of background art you're starting with, you'll see different categories. Click any category to expand the drop-down menu and see more options.

For example:

  • In most background's details panel, you can click Invert colors to switch the assigned colors.
  • In any background's details panel, you can click Randomize to experiment with a random configuration.

Other settings are unique to each background art style and include sliders and toggles that change the core components of the art. We recommend experimenting with the different options in each details panel until you create a combination you love.

Keep in mind:

  • If your section includes text or other content, ensure that it's still visible and readable in front of your background art. To change the text color, use the font tweaks in that section's color theme.
  • Background art only appears on browsers and devices that support WebGL, a tool that works with your device's graphics processor. To test whether your browser supports this, visit get.webgl.org. If a browser doesn't support WebGL, the section background will remain static.
  • If your section art is animated, the section includes a pause button in the bottom right corner. This keeps your site accessible to visitors who may find moving backgrounds disorienting. It's not possible to disable this button.

Watch a video

Block animations

You can add animations to image blocks and quote blocks that visitors see when they load or refresh the page.

Image blocks

To animate an image block:

  1. In the image block editor, click Design, then click Animations.
  2. Select an effect from the list to apply to the image and any text. As you select an option, you’ll see a preview of it on the page.
  3. To animate the image and text separately, select Custom, then select options for Image and Text.

Choose from these animation options for your image, text, or both:

  • Fade in - Block, image, or text fades in
  • Slide up - Block, image, or text slides upward
  • Slide down - Image or text slides downward
  • Horizontal clip - Block or image loads in horizontal layers
  • Vertical clip - Block or image loads in vertical layers
  • Tilt up - Block or image zooms in with an upward tilt
  • Tilt down - Block or image zooms in with a downward tilt
  • Focus in - Block, image, or text looks blurry, then comes into focus
  • Collide - Image and text slide inward from the sides
  • Reveal - Image and text slide outward from the center
  • Slide from left - Image or text slides in from the left
  • Slide from right - Image or text slides in from the right

Quote blocks

To animate a quote block:

  1. Click the Design tab in the block editor.
  2. Select an effect from the drop-down menu. As you explore options, you'll see previews of how they load.

Choose from:

  • Fade in - Text fades in
  • Slide up - Text slides up from below
  • Focus in - Text looks blurry, then comes into focus
  • Reveal - Text slides outward from the center

Troubleshooting

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

  • Site-wide animations and section backgrounds are only available on version 7.1.
  • Some content only supports the Fade site-wide animation style. If you choose a different style, content that doesn't support it will fade instead.
  • If none of your content is animating, ensure you're using a supported browser.
Was this article helpful?
92 out of 146 found this helpful
Animations and image effects