> Canonical URL: https://codingcat.dev/course/gsap-deterministic-timelines-svg # GSAP Deterministic Timelines: UI Motion, Kinetic Type & SVG Rigs | CodingCat.dev Course 🧶 CodingCat.dev Course5 Lessons[â–¶ Watch Course Playlist on YouTube ↗](https://www.youtube.com/@codingcatdev/playlists?sub_confirmation=1)[Start Course →](/course/gsap-deterministic-timelines-svg/lesson/gsap-deterministic-timelines-svg-lesson-1-tl-time-t) # GSAP Deterministic Timelines: UI Motion, Kinetic Type & SVG Rigs ![CodingCat.dev tutorial cover image](https://cdn.sanity.io/images/hfh83o0w/production/968a9f08466d72969a6796920549f57e6f134f29-1376x768.png?w=1376&q=82&fit=max&auto=format)[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson) ## 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. 1 ### 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.![](/logos/tags/video-symbol-light.svg)![](/logos/tags/video-symbol-dark.svg)Videođź“– Written LessonStart Lesson →](/course/gsap-deterministic-timelines-svg/lesson/gsap-deterministic-timelines-svg-lesson-1-tl-time-t) - [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.![](/logos/tags/ai-symbol-light.svg)![](/logos/tags/ai-symbol-dark.svg)AI & Agents![](/logos/tags/video-symbol-light.svg)![](/logos/tags/video-symbol-dark.svg)Videođź“– Written LessonStart Lesson →](/course/gsap-deterministic-timelines-svg/lesson/gsap-deterministic-timelines-svg-lesson-2-ui-morph) - [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.![](/logos/tags/video-symbol-light.svg)![](/logos/tags/video-symbol-dark.svg)Videođź“– Written LessonStart Lesson →](/course/gsap-deterministic-timelines-svg/lesson/gsap-deterministic-timelines-svg-lesson-3-svg-pivots) - [1.4Lesson 4: Combining Closed-Form Harmonic Springs with GSAP Custom EasesWelcome 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.![](/logos/tags/video-symbol-light.svg)![](/logos/tags/video-symbol-dark.svg)Videođź“– Written LessonStart Lesson →](/course/gsap-deterministic-timelines-svg/lesson/gsap-deterministic-timelines-svg-lesson-4-spring-ease) - [1.5Lesson 5: Respecting `prefers-reduced-motion` & Cleaning Up Timelines on NavigationWelcome 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.![](/logos/tags/video-symbol-light.svg)![](/logos/tags/video-symbol-dark.svg)Videođź“– Written LessonStart Lesson →](/course/gsap-deterministic-timelines-svg/lesson/gsap-deterministic-timelines-svg-lesson-5-a11y-motion) ✏️ Visual Architecture Diagram ## how this course connects together. Follow AJ from first principles to production-ready architecture. Let’s build it!✏️ Visual Diagram: GSAP Deterministic Timelines: UI Motion, Kinetic…✓ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]Step-by-step diagram breakdown for GSAP Deterministic Timelines: UI Motion, Kinetic Type & SVG Rigs: start with Core Architecture & Deterministic Implementation, implement Hands-On Implementation, and ship to production.AAA Contrast Verified ## related deep dives. [View All→](/blog)[![Flagship 3: Deterministic HTML Motion & Critique with HyperFrames, GSAP, Impeccable & Chrome DevTools MCP](https://cdn.sanity.io/images/hfh83o0w/production/b155eb490d8cc1576c7332ce9294f612cbc917aa-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/deterministic-html-motion-hyperframes-gsap-devtools-mcp)November 4, 2026[![](/logos/tags/html-symbol-light.svg)![](/logos/tags/html-symbol-dark.svg)HTML](/topic/html)[![](/logos/tags/ai-symbol-light.svg)![](/logos/tags/ai-symbol-dark.svg)AI & Agents](/topic/ai) ### [Flagship 3: Deterministic HTML Motion & Critique with HyperFrames, GSAP, Impeccable & Chrome DevTools MCP](/course/deterministic-html-motion-hyperframes-gsap-devtools-mcp) Build framework-agnostic HTML-to-video pipelines for AI agents. Combine HyperFrames, paused GSAP timelines, Impeccable design linting, and Chrome DevTools MCP self-healing visual inspection. [![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Remotion Skills: Teaching AI Agents to Build Videos the Right Way](https://cdn.sanity.io/images/hfh83o0w/production/0980e327798a7bfa3580457d05953c763b3ce650-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/remotion-skills-ai-agents)November 4, 2026[![](/logos/tags/react-symbol-light.svg)![](/logos/tags/react-symbol-dark.svg)React](/topic/react)[![](/logos/tags/remotion-symbol-light.svg)![](/logos/tags/remotion-symbol-dark.svg)Remotion](/topic/remotion) ### [Remotion Skills: Teaching AI Agents to Build Videos the Right Way](/course/remotion-skills-ai-agents) Install and customize remotion-dev/skills so Claude Code, Cursor, and Google Antigravity write deterministic, well-paced React video compositions on the first try. [![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)