Skip to main content

What the engine does today

An accurate map of what already exists, grouped by scope. The point of this page: the base is broad, which is exactly why the focus areas are so specific.

Animation Engine capabilities by scope Node-level effects on every element; section-level orchestration; site-wide effects; and real 3D and special elements. Animation Engine NODE-LEVEL — every element Scroll Motion · Hover · Text FX Physics · Parallax · Marquee · Flip SECTION-LEVEL Scroll Story · Sticky Stack Horizontal · Motion Sequence 3D & SPECIAL WebGL Object · Model Viewer 3D Gallery · Image Sequence SITE-WIDE Cursor · Page Transitions Preloader · Scroll Progress · Backgrounds
The engine adds motion in four places — on every element, across a section, site-wide, and as real 3D / special elements.

The core it's built on​

FoundationWhat it powers
GSAP + ScrollTrigger + SplitTextThe industry-standard animation core — drives Scroll Motion's scrub, pin and text reveals.
Three.js (real WebGL)WebGL Object — refractive glass/metal objects, particle systems, full-screen shaders.
Google <model-viewer>Model Viewer — glTF/GLB models with orbit, HDR lighting, and AR.
Lenis smooth-scrollScroll Loop — smooth, snapping, seamless section scroll.

On every element's Animations tab​

  • Scroll Motion — genuine scroll scrub, pin (with pin length), parallax, velocity-skew, colour-scrub, count-ups, and SplitText staggers, plus an advanced tier with curated easing curves.
  • Hover Interactions — dozens of pointer effects: spotlight, lift, 3D tilt, magnetic pull, glow-border, glitch, text-scramble, WebGL image displace — stackable.
  • Text Effects — kinetic typography: shimmer, typewriter, scramble, wave, split reveals, glitch, variable-font weight, 3D flip.
  • Physics — spring/verlet motion: drag & throw, slingshot, float, orbit, gravity, jelly.
  • Parallax, Marquee, Motion Path (travel an SVG path, scroll-scrub option), Flip Card (CSS-3D).

Section-level orchestration​

  • Scroll Story / Scrollytelling — the flagship. A pinned full-screen stage where each column is a full-viewport scene played in order over a scrubbed backdrop (numbered frames, scrubbed video, or image), with beats, persistent layers, and a published scroll-progress value that child elements can scrub against. Includes the pan/dolly camera-glide over a still backdrop.
  • Sticky Stack (deck-of-cards pin), Horizontal Scroll (incl. a 3D perspective wall), Scroll Loop (Lenis smooth + snap), Scroll Color Shift.
  • Motion Sequence — the one true timeline today: it assembles a Section's children into a single gsap.timeline() on one trigger (play-once, or scrub-and-pin), tuned by an "overlap" control.

Site-wide​

Real 3D & special elements​

  • WebGL Object — real Three.js: glass/metal objects, image particles, full-screen shaders (plasma, aurora, fluid, image-distort), pointer + scroll reactive, with automatic quality drop and a poster fallback.
  • Model Viewer — glTF/GLB with orbit, HDR lighting, baked animation clips, AR ("view in your space"), hotspots and material variants.
  • 3D Gallery — CSS-3D ring / wall / sphere / orbit / scatter / stack / device layouts, scroll-scrubbable and able to sync to a Scroll Story beat.
  • Image Sequence (frame-scrub "video from stills"), SVG Draw (self-drawing line art, scroll-scrub).
The takeaway

This is a wide, capable base — more complete than most WordPress motion tools. That's why the roadmap can be narrow and specific: a few high-leverage moves, not a rebuild.

Next: where we're leveling up →