Animation Snippets
A collection of code snippets showcasing GSAP and Motion animations. Copy, learn, and integrate these patterns into your own projects.
Browse Snippets
Each snippet includes working code examples and live previews. Click to explore the full implementation.
Scroll-Triggered Fade In
Elements fade in and slide up as they enter the viewport using GSAP ScrollTrigger. Perfect for revealing content on scroll.
Staggered List Animation
Animate list items with a staggered delay using GSAP. Creates a cascading effect perfect for menus, grids, and lists.
Text Reveal Animation
Split text into characters and animate them individually with GSAP. Creates dramatic headline reveals and typewriter effects.
Spring Button Hover
A satisfying button with spring physics using Motion. Features scale and shadow animations with natural bounce.
Layout Animation
Smooth layout transitions when elements change position or size using Motion layout animations. Perfect for filtering and sorting.
Draggable Card
Create draggable elements with constraints and spring physics using Motion gestures. Includes rotation based on drag velocity.
Scroll Progress Indicator
A progress bar that fills as you scroll down the page using Motion scroll animations. Great for reading progress on articles.
Parallax Scroll Effect
Create depth with parallax scrolling using GSAP ScrollTrigger. Multiple layers move at different speeds for a 3D effect.
Scroll-Triggered Cards
Animated cards that spring into view as you scroll. Each card features a colorful gradient splash and bouncy spring physics using Motion whileInView.