Skip to content
On this page

Animations

This guide describes the Theme settings > Animations menu options.

Apply animations to simulate movement on your store's pages for media items inside cascading content sections, like images.

The previous video shows a store's Collection page with a Cascading content section. Refer to Create layouts with cascading content. In the Theme settings > Animations menu, the checkbox option to Fade in items is set to on. As the page scrolls down, a fade-in animation effect is applied to the media items that enter into view from the bottom of the page.

For general guidance with adjusting a theme setting, refer to Settings overview and Shopify help: Theme settings

Configure animations

To set how animations are displayed on your store's pages:

  1. Go to Theme settings > Animations.

    Theme setting's Animations menu.

  2. Select a setting described in the following table.

Setting nameDescription
Cascading content > Fade in itemsSelect the checkbox Fade in items to turn on/ off fade-in animations for media items inside cascading sections. This setting is on (enabled) by default. With this setting on, a fade-in animation effect is applied to media items. When a store visitor scrolls down a store page, the animation is displayed as the media items enter into view from the bottom of the page.
Cascading content > Enable parallax animationsSelect the checkbox Enable parallax animations to turn on/ off parallax animations for media items inside cascading sections. This setting is on (enabled) by default. With this setting on, an animation effect scrolls smaller-sized media items at a faster speed than larger items, when a store visitor scrolls through a store page.
Cascading content > Parallax intensityAdjust the Parallax intensity slider to make the parallax animation effect more or less visible. The slider ranges from 0% to 100% (percent).