Scroll Animations

Scroll Animations add engaging visual effects as customers scroll through your store.

Configuration

Navigate to Theme Settings > Scroll Animations:

Setting	Default	Description
Enable	ON	Animate elements on scroll
Default Type	Fade Up	Default animation style
Duration	600ms	Animation duration (200-2000ms)
Enable Parallax	ON	Background depth movement
Parallax Intensity	30	Movement amount (0-100)

Animation Types

• Fade Up — Element fades in while moving up
• Fade Down — Element fades in while moving down
• Fade Left/Right — Element fades in from the side
• Zoom In — Element scales up while fading in

Adding Animations

Add the data-animate attribute to any element:

<div data-animate="fade-up">Content animates on scroll</div>

For staggered animations on groups:

<div data-animate-stagger>
  <div>Item 1 animates first</div>
  <div>Item 2 animates second</div>
</div>

Accessibility

Animations respect prefers-reduced-motion. Users who prefer reduced motion will see content appear instantly.

Best Practices

• Use lower intensity (20-40) for a more premium feel
• Don’t animate everything — focus on key elements
• Test on mobile devices for smooth performance
• Use slower durations (800-1000ms) for luxury aesthetics