About Motion Lab

How this
works

Motion Lab is a collection of animation techniques I keep coming back to on real projects. Each section on the homepage and each experiment card is a standalone component, built to be pulled apart and reused.

The approach

Every animation here does a specific job: guide focus, signal a state change, or give feedback on interaction. If a tween doesn't serve one of those, it gets cut.

Performance-wise: everything targets 60fps, respects prefers-reduced-motion, and stays off the main thread where possible. GSAP handles most of the scheduling, and Astro's partial hydration keeps the JS payload small.

Techniques covered

ScrollTrigger-driven sections

MorphSVG path interpolation

Staggered entrance tweens

SplitText character animations

gsap.to() number counters

CSS perspective + rotateX/Y

Draggable with inertia plugin

FLIP layout transitions

Parallax via scroll offsets

Cursor-tracking with quickTo()

clip-path wipe reveals

Elastic and spring easing

Built With

Tech Stack

GSAP

v3.14

Does the heavy lifting for every animation here. Timelines, scroll-linked tweens, SVG morphing. One API for all of it.

ScrollTrigger MorphSVG SplitText Flip Draggable DrawSVG

React

v19

Each demo is a React component. useRef grabs DOM nodes, useEffect wires up GSAP, cleanup reverts on unmount.

useRef useEffect Islands Architecture Client Hydration

Astro

v6

Ships zero JS by default. React components only hydrate where you add client:visible, so static sections stay static.

Static Generation Partial Hydration client:visible Multi-Page

SVG

v2.0

All the shape and path animations are SVG. Scale to any size, animate any attribute, and GSAP's MorphSVG handles the interpolation.

Path Morphing Stroke Drawing Filter Effects Transforms

Tailwind CSS

v4.2

Handles all the layout and theming. Custom properties set the dark palette, utility classes keep the markup readable.

Dark Mode Custom Properties Responsive Animation Utilities

CSS Animations

vL3

Some things don't need a library. Pulse rings, wave text, and hover transitions are pure @keyframes and transitions.

@keyframes clip-path transitions will-change

How this works