Motion demo // Scale shift

Scale and position change in sync without custom keyframe files.

Scale-shift actuators map scroll or view timelines to transform intensity, creating card zoom, gallery emphasis and parallax effects with a single attribute rather than bespoke CSS per page.

Scale-Shift Showcase Motion Principles Kinetic Motion

Ranges Map scroll to transform intensity

Performance Transform + opacity only

Pairing Combine with tonal elevation

Scroll-driven GPU composited Zero JS

Act I // Timeline-to-transform mapping

Map scroll or view timelines to transform intensity with animation-range tokens.

The CSS scroll-driven animation API lets us bind scale, translateY and rotate to the scroll position. Range tokens define entry/exit thresholds so the effect starts and ends precisely.

<!-- scale up as element enters viewport -->
<article
  vl-effect="scale-shift-up"
  vl-timeline="view"
  vl-range="entry">
  Content
</article>

<!-- parallax drift on scroll -->
<img
  src="hero.jpg"
  vl-effect="parallax"
  vl-timeline="scroll"
  vl-speed="slow"
  alt="Hero image" />

Range entry 0% → entry 100% Scale 0.9 → 1.0 as element enters viewport

Range cover 0% → cover 50% TranslateY 40px → 0 during first half of visibility

Range exit 0% → exit 100% Scale 1.0 → 0.85 as element leaves viewport

Actuator Showcase Kinetic Motion

Act II // GPU-only properties

Only transform and opacity are allowed—no layout thrash, no repaints.

Scale-shift effects use exclusively compositor-safe properties. The browser promotes elements to their own GPU layer, keeping scroll-linked animations at 120fps even on mid-range devices.

transform ✔ opacity ✔ filter ✔ width/height ✘

scale-shift actuator [vl-effect~="scale-shift"] { animation: vl-scale-shift linear; animation-timeline: view(); animation-range: entry 0% entry 100%; will-change: transform; }

Rule

No layout properties.

Margin, padding, width and height are never animated in the scale-shift system.

Act III // Depth pairing

Combine scale with tonal elevation so depth looks physical.

As an element scales up, its surface token shifts to a lighter tonal tier and its shadow grows. The visual impression is that the element is physically rising from the page.

Tonal Tiers Ambient Shadows

Pairing recipe

Scale ↑ → Tier ↑ → Shadow ↑

Three properties move together to create convincing physical depth.

Act IV // Applied scale shift

Ranges, performance limits and tonal pairing: three rules for every scale-shift effect.

Define scroll ranges, keep animations on GPU-safe properties, then pair with tonal elevation for physical depth.