Animation system

Animations bring your store to life. They guide the visitor's eye, create an impression of quality, and make navigation memorable. Scale Theme includes a complete animation system, optimized for performance (60fps, GPU-accelerated) and respectful of accessibility (automatically disabled if the visitor has enabled prefers-reduced-motion in their system settings).

Activation and global settings

Animations are enabled by default. You can disable them globally or adjust their behavior in Theme settings > Animations.

, the preset selector (5 options visible), and the speed selector. Parallax settings are visible below.)

The 5 animation presets

Presets define the overall character of all animations in your store. Each preset automatically configures the animation type, movement intensity, easing (acceleration curve), and timing.

Minimal

Nearly imperceptible animations. Elements appear with a simple, very quick fade, with no directional movement. The visitor perceives the page as responsive without being distracted.

• Movement type: Fade only
• Intensity: Very low
• Easing: Linear
• Feel: Discreet, professional, "effortless"

Best for: Luxury stores, jewelry, watches, perfumes -- any context where restraint is a sign of elegance.

Modern (default)

Smooth and elegant animations. This is the default preset and the most versatile. Elements slide slightly from below with a fade. The movement is noticeable enough to be seen but not so much that it distracts.

• Movement type: Fade + vertical slide (fade-up)
• Intensity: Medium
• Easing: Ease-out (natural deceleration)
• Feel: Professional, modern, reliable

Best for: The majority of stores, general use. If you are unsure about your choice, keep this one.

Dynamic

Bold and energetic animations. Elements arrive with more speed and travel distance. The effect is more spectacular and conveys a sense of dynamism.

• Movement type: Fade + fast slide + slight bounce
• Intensity: High
• Easing: Ease-out with overshoot (slight overshoot)
• Feel: Energetic, athletic, impactful

Best for: Sports, fitness, electronics, gaming stores, young and dynamic brands.

Elegant

Soft and refined movements. Animations are slower and smoother than Modern, with very gentle acceleration curves. Each element seems to "float" into place.

• Movement type: Fade + gentle slide + subtle zoom
• Intensity: Medium-low
• Easing: Ease-in-out (gentle acceleration then deceleration)
• Feel: Refined, precious, polished

Best for: High fashion, jewelry, beauty, home decor, art galleries.

Playful

Playful animations with bounce. Elements arrive with an exaggerated movement that bounces slightly before settling. The effect is fun and memorable.

• Movement type: Fade + slide + pronounced bounce
• Intensity: High
• Easing: Bounce (elastic bounce)
• Feel: Fun, cheerful, approachable, memorable

Best for: Toys, kids' products, candy, gifts, pop brands.

Comparing all 5 presets

and the final position.)

Global speed

The speed applies to all animations in your store and modifies the duration of each preset.

at 3 speeds side by side. Left: Fast (products appear nearly instantly). Center: Normal. Right: Slow (products take their time appearing).)

Available animations by element type

When you choose the Custom preset for a section, you get individual control over each element type.

Heading animations

Headings can use specific animations, including advanced text animations.

Movement group:

Effects group:

Text group (exclusive to headings):

Image animations

Content animations

Content elements (paragraphs, descriptions, buttons, badges) are animated as a group.

Item animations (grids, lists)

For sections displaying lists of elements (product grids, feature cards, icons), additional animations are available.

Directions

For animations that support a direction (Fade, Slide, Wipe, Reveal), you can choose where the element arrives from:

and the final position.)

Stagger (cascade effect)

Stagger is one of the most powerful effects in the animation system. In sections containing lists (product grids, feature cards, icons), stagger animates each element with a progressive delay, creating an elegant cascade effect.

with stagger Long. Each element clearly appears after the previous one, creating a sequential reading effect.)

Easing (acceleration curve)

Easing defines how the animation accelerates and decelerates. It is a subtle detail that completely changes the feel.

Parallax

Parallax creates a depth effect where background images move more slowly than the content on scroll. It is a classic web design effect that adds a cinematic dimension to your store.

Global configuration

Per-section configuration

When the Custom preset is selected, each section also offers:

Intensity controls how much the background image moves relative to the content. A low value (2-5%) creates a subtle effect. A high value (15-20%) creates a pronounced effect.

and parallax at 15% (pronounced movement). Shows the offset between the image and content.)

Per-section animation (Custom mode)

Each section in Scale Theme can be individually configured in Custom mode for full control, independent of the global preset.

Options available in Custom mode

Accessibility

Scale Theme automatically respects the prefers-reduced-motion system preference. If a visitor has enabled reduced motion in their operating system settings (macOS, Windows, iOS, Android), all animations are automatically disabled.

This is a default behavior that cannot be overridden. It guarantees that your store is accessible to people who are sensitive to motion.

Recommendations summary

Next steps

• Animations (design) -- Using animations in sections
• Page transitions -- Effects between pages
• Hover effects -- Hover animations
• Layout -- Spacing and global layout