Back to Explore

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 to reveal
GSAP

Scroll-Triggered Fade In

Elements fade in and slide up as they enter the viewport using GSAP ScrollTrigger. Perfect for revealing content on scroll.

GSAPScrollTriggerFade
Item 1
Item 2
Item 3
Item 4
GSAP

Staggered List Animation

Animate list items with a staggered delay using GSAP. Creates a cascading effect perfect for menus, grids, and lists.

GSAPStaggerList
Hello World
GSAP

Text Reveal Animation

Split text into characters and animate them individually with GSAP. Creates dramatic headline reveals and typewriter effects.

GSAPTextSplitText
Motion

Spring Button Hover

A satisfying button with spring physics using Motion. Features scale and shadow animations with natural bounce.

MotionSpringButton
Motion

Layout Animation

Smooth layout transitions when elements change position or size using Motion layout animations. Perfect for filtering and sorting.

MotionLayoutTransition
Drag me!
Motion

Draggable Card

Create draggable elements with constraints and spring physics using Motion gestures. Includes rotation based on drag velocity.

MotionDragGesture
50% scrolled
Motion

Scroll Progress Indicator

A progress bar that fills as you scroll down the page using Motion scroll animations. Great for reading progress on articles.

MotionScrollProgress
Parallax layers
GSAP

Parallax Scroll Effect

Create depth with parallax scrolling using GSAP ScrollTrigger. Multiple layers move at different speeds for a 3D effect.

GSAPParallaxScrollTrigger