SScale Themedocs
FR

Discover Scale Theme's GPU-accelerated animations with 9 effects, 4 speeds, and stagger support for lists.

Animation System

Scale Theme includes a comprehensive animation system that brings your store to life on scroll. All animations are GPU-accelerated (transform/opacity only), run at 60fps, and automatically respect prefers-reduced-motion for accessibility.

Available Animations

9 animations are available, triggered on scroll when the element enters the viewport:

AnimationDescriptionIdeal For
fadeSimple fade-inText, subtle elements
fade-upFade + upward slideGeneral use, most versatile
fade-downFade + downward slideHeaders, elements descending into the page
fade-leftFade + slide from the rightRight columns, side elements
fade-rightFade + slide from the leftLeft columns, side elements
zoom-inProgressive zoom inImages, cards, emphasis
zoom-outZoom outReveals, image transitions
slide-upVertical upward slide (no fade)Graphic elements, bars
slide-downVertical downward slide (no fade)Menus, panels

Global Configuration

Animations are configured in Theme Settings > Animations:

SettingTypeOptionsDefaultDescription
Animations enabledCheckboxOn/OffOnEnables/disables all animations
PresetSelectMinimal / Modern / Dynamic / Elegant / PlayfulModernGlobal style
SpeedSelectFast / Normal / SlowNormalAnimation speed

5 Presets

Each preset defines the overall character of your store's animations:

PresetCharacterTypical DurationIdeal For
MinimalSubtle, nearly imperceptible~150msLuxury, minimalism, sophisticated
ModernSmooth and elegant (default)~400msGeneral use, versatile
DynamicPronounced and energetic~350msSports, tech, youth
ElegantSoft and refined~500msFashion, jewelry, beauty
PlayfulFun with bounce~450msToys, pop, creative

Speed

SpeedApproximate DurationUsage
Fast~200msStores with lots of content, quick navigation
Normal~400msGeneral use, balanced
Slow~600msImmersive experience, storytelling, sparse content

Per-Element Options

Each animated element can receive specific options:

Duration

ValueDescription
fastFast animation
normalStandard duration
slowSlow animation
very-slowVery slow animation

Delay

The delay before the animation starts, in milliseconds:

ValueDescription
0No delay, immediate animation
100Slight offset
200Medium offset
300Notable offset
400Marked offset
500Maximum delay

Easing

Easing controls the animation's acceleration curve:

ValueDescriptionFeel
smoothSoft and natural curveFluid, professional
bounceSlight bounce at the end of animationDynamic, playful
sharpFast start, clean endEnergetic, punchy

Stagger (Cascade Animation)

Stagger animates list elements one by one with a progressive delay, creating an elegant cascade effect.

Stagger is available in sections containing lists:

  • Product grids (Featured Collection, Collections)
  • Image grids (Gallery, Grid)
  • Icon lists (Icon List)
  • Card rows (Reviews, Testimonials)
💡Stagger is particularly effective with the fade-up animation: cards appear one by one rising up, guiding the eye from left to right. This is the most commonly used effect on product grids.

Per-Section Configuration

Each section can individually:

  • Enable/disable animations (independently of the global setting)
  • Choose the animation type (fade, fade-up, zoom-in, etc.)
  • Adjust the duration and delay
  • Enable stagger for lists

This allows creating custom sequences page by page:

Hero Section    → fade (delay 0)
Text Section    → fade-up (delay 100)
Grid Section    → fade-up + stagger (delay 200)
CTA Section     → zoom-in (delay 0)

Parallax

In addition to scroll animations, Scale Theme offers a parallax effect on background images:

SettingDescriptionDefault
Parallax enabledActivates the depth effect on scrollOff
Disable on mobileBetter mobile performanceOn
⚠️Parallax can impact performance on low-end mobile devices. This is why it is disabled on mobile by default. Only enable it on mobile if your target audience uses recent devices.

Performance

All animations follow performance best practices:

CriterionImplementation
GPU-acceleratedOnly transform and opacity (never width/height/top/left)
60fpsAnimations optimized for smooth rendering
will-changeAutomatically added for complex animations
prefers-reduced-motionAnimations disabled if the user requests it in their OS preferences
IntersectionObserverEfficient triggering, no costly scroll listener
LazyAnimations calculated only when the element enters the viewport
💡For maximum impact, animate above-the-fold sections with a short delay (0-100ms), and progressively increase the delay for sections below. This creates a natural loading sequence.
PreviousColor PalettesNextSVG Separators