Skip to main content

Animations

Animations​

Since v1.0.0

The Animations settings add movement to your store: content that slides in as customers scroll, images that react on hover and the hover effect of buttons. You'll find them under Theme settings > Animations in the theme editor. To open theme settings, click the gear (settings) icon in the left sidebar of the theme editor.

Settings​

  • Animate text and images on scroll: Text, cards and images gently slide and fade in when they scroll into view. Only content below the first screen animates, so the top of the page appears right away. Items in a row, such as product cards, follow each other with a short delay.
  • Animate images on hover: Animate images when a customer hovers over them with the mouse. This works only in some sections.
  • Disable animations on mobile: Turn off the scroll animations on phones, where some customers find them distracting.
  • Button hover effect: The animation when a customer hovers over a button (options: None, Fade, Fill on hover). Fade smoothly changes the button to its hover colors. Fill on hover fills the button with the hover color from the bottom up. None switches colors instantly, without a transition. The hover colors are set in Colors under Buttons.
note

Scroll animations do not run in the theme editor, so you can edit content without waiting for it to appear. Preview your store or open it in a new tab to see them. Customers who have turned on reduced motion in their device settings do not see the scroll animations either.