Command Palette

Search for a command to run...

Hectal
Scene
14
Take
01
Level
Advanced
Runtime
~3 h

GSAP

GSAP for sequencing: tweens, labelled timelines, ScrollTrigger, Flip and SplitText, matchMedia for reduced motion, cleanup, useGSAP, and the launch-day hero timeline.

7 shots13 live examples4 dailies
0/7 · 0%

CSS and the Web Animations API move one thing well. A launch-day hero moves six things in a planned order, counts a price up, pins a section while you scroll and must clean up after itself. GSAP (the GreenSock Animation Platform) is a JavaScript library built for exactly that: a timeline you can label, pause, reverse and scrub, plus plugins for scroll, layout changes and split text.

This phase teaches GSAP 3.15 the way a job meets it: tweens, timelines, ScrollTrigger and its pin spacer, Flip and SplitText with their accessibility settings, gsap.matchMedia() for reduced motion, gsap.context() for cleanup, and useGSAP for React. Every example runs on the Motion Timeline, so you can pause GSAP and read every value. The build gives the Lumen Volt page a launch-day hero timeline and a pinned battery section that switch off for reduced motion and clean up after themselves.

▶ Roll: 14.1

Scene 14 · the brief from Lumen

Tomás, founder of Lumen Bikes

“On launch day I want the first thing people see to be a moment: the headline, the Volt, the price. In order, like a trailer. And it must not break for anyone.”

Mei, the motion designer, hands Kofi a storyboard for the hero: the headline rises word by word, the Volt slides in half a second later, then the price counts up to €2,490 and the Reserve button appears. Kofi tries CSS delays. It works, until Mei moves the Volt 0.1 s earlier and every later delay needs recalculating by hand.

Ama wants a pinned battery section too: it holds still while a meter fills as you scroll. Phase 12 did that in CSS for supporting browsers. Tomás wants it on every browser the team tests, and a timeline Mei can retime without asking for code.

Ravi has one rule: with reduced motion on, the page is finished when it loads, and the headline keeps its name for his screen reader. You learn GSAP and build both pieces so that is true.

In this scene

You will learn

  • Write tweens and labelled timelines, and read them on the Motion Timeline
  • Scrub and pin a section with ScrollTrigger, and fix positions after the layout changes
  • Split text and animate layout changes with SplitText and Flip, keeping screen readers working
  • Switch GSAP animation off for reduced motion and clean it up with matchMedia, context and useGSAP

You write code in

In your lumen-motion project (npm run dev) and in the editor on this page

Files you touch

  • package.json
  • src/js/gsap/launch-timeline.js
  • src/js/gsap/scroll-story-gsap.js
  • index.html
  • src/styles/components.css
  • src/js/main.js

Shot list · 7 shots, widths by reading time

14.114.214.314.414.514.614.7
  1. 14.1GSAP TweensA tween is one animation from a start to an end. GSAP's to, from, fromTo and set cover every case, take durations in seconds, and can animate any number on any object, not only CSS. 21 min 2 live
  2. 14.2Timelines and the Position ParameterA timeline is a container of tweens placed on one clock. The position parameter says where each one goes (after the last, with it, at a label), and the timeline can then be played, reversed, sought and slowed as one thing. 19 min 1 live
  3. 14.3ScrollTriggerScrollTrigger ties a GSAP animation to scroll positions: it measures where an element's start and end are, then plays, scrubs or pins as the scroll bar passes them. It must re-measure whenever the layout changes. 24 min 3 live
  4. 14.4Flip and SplitTextFlip animates any layout change (Phase 10's FLIP, packaged): record, change the DOM, play. SplitText cuts a heading into lines, words and letters you can animate, and keeps it readable for screen readers. 21 min 2 live
  5. 14.5matchMedia, Reduced Motion and Cleanupgsap.matchMedia() runs animation code only while a media query matches and undoes it when it stops matching. gsap.context() collects everything GSAP creates so one revert() removes it all. 19 min 2 live
  6. 14.6GSAP in React with useGSAPuseGSAP from @gsap/react is useEffect for GSAP: it runs your animation code in a scoped context after render and reverts it when the component updates or leaves, which also makes React's StrictMode double run harmless. 18 min 2 live
  7. 14.7Build: The Launch-Day Hero TimelinebuildGive the hero a launch-day sequence in one labelled GSAP timeline (headline, Volt, price count-up) and add a pinned battery section, both switched off for reduced motion and both removable without leaving anything behind. 45 min 1 live

Dailies · 4 checked exercises

A film crew watches the day's shots every evening. Build each one yourself and press Check: the page freezes its clock and checks your motion at exact moments, its cost, and its reduced-motion version.

D01Sequence the heroThree tweens start together when you press Play. Turn them into one timeline that plays in order: the headline (0.5 s), then the Volt right after it, then the price starting 0.25 s after the Volt starts.IntermediateD02Scrub the meterThe meter fills by itself as soon as the page loads. Tie it to the scroll box instead, so it is empty at the top, full at the end, and follows the scroll bar both ways.IntermediateD03Split the headline, keep its nameThe headline's letters rise one by one, but a screen reader cannot read it as a sentence: the split was told not to handle accessibility.IntermediateD04A calm version with matchMediaThe headline and button animate for everybody, including people who asked for less motion. Use gsap.matchMedia() so only visitors with no reduced-motion preference get the animation.Advanced