GSAP Deterministic Timelines: UI Motion, Kinetic Type & SVG Rigs
Course Architecture Overview
Use GreenSock (GSAP) for silky-smooth UI morphs, kinetic typography, and articulated SVG mascots while keeping every frame 100% deterministic under `window.seek(t)`.
Primary Open-Source Repository: github.com/greensock/GSAP
course lessons.
Core Architecture & Deterministic Implementation
- 1.1Lesson 1: Paused GSAP Timelines (`paused: true`) & Driving `tl.time(t)`
Welcome to Lesson 1 of GSAP Deterministic Timelines: UI Motion, Kinetic Type & SVG Rigs on CodingCat.dev. Today we break down Paused GSAP Timelines (`paused: true`) & Driving `tl.time(t)` and see how it powers our deterministic 3D AJ and code-rendered video pipeline.
Video📖 Written LessonStart Lesson → - 1.2Lesson 2: Choreographing Single-Container UI State Morphs (`@twoclipping` Pattern)
Welcome to Lesson 2 of GSAP Deterministic Timelines: UI Motion, Kinetic Type & SVG Rigs on CodingCat.dev. Today we break down Choreographing Single-Container UI State Morphs (`@twoclipping` Pattern) and see how it powers our deterministic 3D AJ and code-rendered video pipeline.
AI & AgentsVideo📖 Written LessonStart Lesson → - 1.3Lesson 3: Articulating 57-Path SVG Mascot Bones with Custom `transformOrigin`
Welcome to Lesson 3 of GSAP Deterministic Timelines: UI Motion, Kinetic Type & SVG Rigs on CodingCat.dev. Today we break down Articulating 57-Path SVG Mascot Bones with Custom `transformOrigin` and see how it powers our deterministic 3D AJ and code-rendered video pipeline.
Video📖 Written LessonStart Lesson → - 1.4Lesson 4: Combining Closed-Form Harmonic Springs with GSAP Custom Eases
Welcome to Lesson 4 of GSAP Deterministic Timelines: UI Motion, Kinetic Type & SVG Rigs on CodingCat.dev. Today we break down Combining Closed-Form Harmonic Springs with GSAP Custom Eases and see how it powers our deterministic 3D AJ and code-rendered video pipeline.
Video📖 Written LessonStart Lesson → - 1.5Lesson 5: Respecting `prefers-reduced-motion` & Cleaning Up Timelines on Navigation
Welcome to Lesson 5 of GSAP Deterministic Timelines: UI Motion, Kinetic Type & SVG Rigs on CodingCat.dev. Today we break down Respecting `prefers-reduced-motion` & Cleaning Up Timelines on Navigation and see how it powers our deterministic 3D AJ and code-rendered video pipeline.
Video📖 Written LessonStart Lesson →
how this course connects together.
Follow AJ from first principles to production-ready architecture.