Motion & Animation
Advanced animation patterns using GSAP ScrollTrigger, Framer Motion gestures, and layout animations.
Animated Timeline Steps
Horizontal timeline with sequential animations triggered on scroll.
Each circle animates in sequence with scale and opacity when scrolled into view. The connecting lines draw from 0% to 100% width between steps.
Interactive Gesture Cards
Cards with hover, tap, and spring physics animations.
Performance
Hover to scale and rotate • Tap to compress
Security
Hover to scale and rotate • Tap to compress
Global
Hover to scale and rotate • Tap to compress
Developer
Hover to scale and rotate • Tap to compress
Animated List Reordering
Items animate smoothly to new positions when reordered.
UI Components
Each item uses motion.div with layout prop. When shuffled, items animate to their new positions with spring physics. The AnimatePresence wrapper handles exit animations.
Parallax Scrolling Effect
Background layer scrolls at 0.4x speed relative to text content.
Scroll to see parallax effect
The gradient background moves at a different speed than the text content, creating depth and immersion.