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.
Sticky Cards
Stack large feature cards while scrolling using Angular, GSAP and ScrollTrigger.
Disappearing Features
Animate feature content in and out while scrolling through a product section.
Swap Column Features
Swap text and visual columns with a smooth GSAP layout transition.
Want the full picture?
Read the docs or browse the source on GitHub.