Descriptions:
AI Jason demonstrates how to unlock Gemini 3’s latent knowledge of advanced JavaScript animation libraries — specifically GSAP and Motion.dev (Framer Motion) — to produce scroll-driven animations and micro-interactions that go well beyond what the model generates by default. The video draws a clear practical distinction between the two libraries: Motion.dev excels at UI state transitions and component-level micro-interactions inside apps, while GSAP’s ScrollTrigger plugin is designed for complex landing page animations where multiple elements follow a synchronized timeline tied directly to scroll position.
The core technique is splitting creative direction from code generation into two discrete stages. In the first stage, the model is prompted as a “world-class GSAP motion designer” to plan animation sequences in detail — which DOM elements transform, in what order, and tied to what scroll milestones — before any implementation begins. Critically, the system prompt constrains the model to avoid animations requiring 3D models, complex SVGs, or embedded video, ensuring the planned sequence is achievable in pure HTML/CSS/JavaScript.
Practical examples include a horizontal scroll text animation with GSAP’s SplitText plugin, where characters appear one by one as the user scrolls, built using the Super Design vibe-design platform. The host notes the same prompting approach applies directly to Claude Code or Cursor. Key GSAP concepts covered include the scrub parameter (linking animation progress to scroll progress), timeline sequencing, and ScrollTrigger configuration — giving developers a concrete starting point for adding memorable, scroll-driven interactivity to landing pages without deep animation expertise.
📺 Source: AI Jason · Published December 24, 2025
🏷️ Format: Tutorial Demo
