Animations

Elle includes elegant scroll-triggered animations. Customize or disable them based on your preferences.

Accessing Animation Settings

1. Open the theme editor
2. Click Theme settings (gear icon)
3. Click Animations

Enable/Disable Animations

Toggle all animations on or off:

1. Find the Enable animations checkbox
2. Uncheck to disable all scroll animations
3. This affects all sections with reveal effects

Note: Elle respects the user's system setting for reduced motion. Users who prefer reduced motion will see instant transitions regardless of this setting.

Animation Styles

Choose the intensity of animations:

| Style | Description | |-------|-------------| | Subtle | Gentle fade effects, minimal movement | | Elegant | Smooth slides and reveals (default) | | Dramatic | Bold entrance animations, more movement |

Subtle

Best for:

• Professional/corporate brands
• Minimalist designs
• Users who want understated motion

Elegant

Best for:

• Fashion and lifestyle brands
• Editorial-style layouts
• Balanced visual interest

Dramatic

Best for:

• Bold brand personalities
• Portfolio/showcase sites
• Maximum visual impact

Image Zoom Effect

Control the hover zoom on product images:

1. Find the Image zoom toggle
2. Enable for a subtle zoom when hovering product images
3. Disable for static images

This affects product cards throughout the theme.

How Animations Work

Elle uses scroll-triggered animations:

1. Elements start hidden or offset
2. As you scroll down, elements animate into view
3. Animations only play once per page load
4. Multiple elements can animate in sequence (staggered)

Performance

Animations are optimized for performance:

• Uses CSS transforms (GPU accelerated)
• Only animates elements in viewport
• Minimal impact on page speed

If you experience any performance issues, try the Subtle style or disable animations entirely.