Chapter 05 / GSAP, Lottie and Rive

Three tools, one sense of timing.

GSAP for choreographing anything in the page, Lottie for designed animations shipped as JSON, Rive for interactive animations with their own state machines. Claude wrote every demo here, including the Lottie JSON itself. The Rive files are samples from Rive's own runtime repository, because .riv files are made in the Rive editor.

Loading GSAP, Lottie and Rive from the CDN…

01 GSAP

The GreenSock Animation Platform tweens any number a browser can see: CSS, SVG, canvas, even plain objects. The whole library is free to use, including plugins like SplitText, MorphSVG and Inertia that used to be paid.

A timeline you can scrub

One GSAP timeline builds this hero section piece by piece. Play it, reverse it, change its speed, jump to a label or drag the playhead. Every tween stays in sync because they all live on the same timeline.

  • gsap.timeline
  • Labels
  • timeScale

Easing visualiser

An ease is the personality of a movement. Pick one: GSAP draws its curve, runs a dot along it and moves the ball with it. The last one is a CustomEase drawn from an SVG path.

  • parseEase
  • CustomEase

Grid stagger

One tween, 160 dots. GSAP works out each dot's distance from the starting point in the grid and delays it to match, so a click sends a ripple outward. Click anywhere in the grid.

  • stagger.grid
  • from: index

SplitText reveals

SplitText cuts a heading into lines, words and characters, and can wrap each line in a mask. Five reveals from the same markup. The text stays real, selectable and readable by screen readers.

  • SplitText
  • mask: lines

Good motion explains what just happened without a single word.

Scramble and type

ScrambleText decodes a headline through random characters; TextPlugin types the line under it. Both plugins rewrite the text content, so the final words are ordinary text.

  • ScrambleTextPlugin
  • TextPlugin
Incoming transmission

Design is decoding.

Flip layout changes

CSS can't animate a change of layout. Flip records where every tile is, lets the layout jump, then animates each tile from its old place to its new one. Switch layouts or click a tile to feature it.

  • Flip
  • Images

Shape morphing

MorphSVG turns any path into any other, even when their points don't match. DrawSVG traces the outline first. Click a shape to morph to it.

  • MorphSVGPlugin
  • DrawSVGPlugin

Motion path: draw the route

A paper plane follows an SVG path and turns to face its direction of travel, with the trail drawn in step. Press "Draw a route" and draw on the map: GSAP smooths your line into curves and the plane flies it.

  • MotionPathPlugin
  • autoRotate

Throw it: drag with momentum

Two things to throw. Let go while you are still moving and InertiaPlugin carries on with the speed you gave it, slows down naturally and snaps to the nearest number or card. The meters show how hard you threw.

  • InertiaPlugin
  • Draggable
  • snap
1
Spin the volume knob

Grab the knob, drag round in a circle and let go mid-turn. It keeps turning, slows down and clicks onto a number. It stops at 11.

Volume 0 Spin speed 0°/s
2
Fling the cards

Drag the row sideways and let go. It glides on at your speed and settles on the nearest card.

01Throw
02Glide
03Coast
04Drift
05Slow
06Snap
07Settle
08Bounce
09Land
10Rest
Fling speed 0 px/s

Keyboard: focus the knob or the cards and use the arrow keys.

Cursor and magnets

quickTo makes a reusable tween that chases a moving target, which is ideal for a custom cursor. The buttons pull towards the pointer and spring back when it leaves.

  • quickTo
  • elastic.out
Move the pointer in here

ScrollTrigger: a scene on a scroll wheel

One timeline, scrubbed by ScrollTrigger as you scroll through this card. The phone arrives, its screens slide past and the captions take turns, all tied to the scrollbar, so scrolling back runs it backwards.

  • ScrollTrigger
  • scrub
  • Sticky

Scroll is a timeline.

Every pixel is a frame.

Scroll back and it rewinds.

02 Lottie

Lottie plays vector animations stored as JSON, usually exported from After Effects. Here there is no After Effects: Claude wrote a small builder that outputs Lottie JSON (layers, shapes, keyframes and easing), and lottie-web plays it.

Lottie player with segments

A loading spinner that resolves into a tick, as one Lottie file with two segments. Loop the loading part, play the success part, scrub frames, change speed, and look at the JSON behind it.

  • lottie-web
  • playSegments

Interactive Lottie icons

Four icons, each a tiny Lottie file with an "on" and an "off" segment. Clicking plays the right segment from wherever the icon is, so fast clicks never jump.

  • Segments
  • Micro-interaction

Lottie scrubbed by scroll

ScrollTrigger drives a Lottie animation frame by frame. Once the card is in view, scrolling makes the sun rise, a seedling grow and the flower open. Scroll up and it closes again.

  • Lottie
  • ScrollTrigger
Frame 0 / 180

03 Rive

Rive animations carry their own logic: a state machine with inputs (numbers, booleans, triggers) and pointer listeners. Code sets the inputs; the file decides how to animate. These six files come from Rive's MIT-licensed runtime repository; Claude wrote the controls, keyboard support and wiring. They use state machine inputs, events and text runs, Rive's original APIs; newer Rive files use data binding instead, and the current runtime marks these as deprecated.

Star rating

A number input called rating drives the animation. Tap the stars on the canvas, or use the buttons, which set the same input from code.

  • Number input
  • Listeners

Day and night switch

Hover the toggle and it reacts; click it and the lighthouse switches between day and night. All of that lives in the file's state machine, the page only listens.

  • Hover state
  • Rive events

Avatars with moods

Three artboards from one file, each with isHappy and isSad booleans. The buttons flip the same booleans on all three at once.

  • Boolean inputs
  • Artboards

A music player built in Rive, with music

Press play on the device or below. The four tracks were composed by Claude in code and are synthesised live with Web Audio. The device's own play, skip and volume controls send Rive events that drive the music; the page writes the track name, clock and progress back into the file.

  • Rive events
  • Text runs
  • Web Audio

A character you can steer

A game character with a Move number and a Fire trigger. Click the canvas, then use the arrow keys (or A and D) to walk and space to shoot. The buttons do the same for touch screens.

  • Keyboard
  • Game character

Triggers from anywhere

The truck's Bump input is a trigger: fire it and the state machine plays the bump, then returns to driving. Here it fires from a button, from the B key and from the beat of a small drum loop you can switch on.

  • Trigger input
  • Web Audio