Motion Recipes
Angular-first GSAP animation patterns with live demos, source code and implementation recipes.
Blocks
Complete UI sections ready to copy: Hero, Pricing, CTA, Footer, Features, Testimonials.
Explore Blocks →Motion Recipes
Reusable animation patterns — Stagger Reveal, Scroll Reveal, Text Split, Magnetic Button, Spotlight Card, Card to Modal — built the Angular way so you can copy and adapt them.
Stagger Reveal
Reveal a list of elements one after another using gsap.from and stagger.
Scroll Reveal
Reveal an element as it enters the viewport using an SSR-safe ScrollTrigger directive.
Text Split Reveal
Reveal a heading word-by-word with GSAP stagger while keeping the sentence accessible.
Magnetic Button
A button that gently follows the cursor using gsap.quickTo, without touching Angular state.
Spotlight Card
A card with a radial glow that follows the pointer, positioned with CSS variables and smoothed with GSAP.
Card to Modal
Expand a compact card into an accessible modal using the FLIP technique and GSAP.
Want the full picture?
Read the docs or browse the source on GitHub.