Tommy Nguyen | Senior Frontend Engineer Portfolio

Basic Animations & Variants

Learn the fundamentals of Motion animations: initial/animate states, transitions, spring physics, and variants for reusable animations.

motion.divvariantsspring

Spring
Stagger
Variants
Ease

Scroll-Triggered Animations

Animate elements when they enter the viewport using whileInView, create parallax effects with useTransform, and build scroll progress indicators.

whileInViewuseScrollparallax

Element 1

Element 2

Element 3

Element 4

Elements animate with stagger when they enter the viewport. In real usage, scroll down to trigger.

Gesture Animations

Create interactive elements with hover, tap, drag, and focus gestures. Motion makes it easy to add delightful micro-interactions.

whileHoverwhileTapdrag

Hover & Tap

Drag within bounds

Hover Card

Hover me

I lift up on hover

Layout Animations

Automatically animate layout changes with the layout prop. Create smooth transitions for expanding cards, tabs with shared elements, and reorderable lists.

layoutlayoutIdAnimatePresence

Shared Layout (Tabs)

Layout Animation (List)

Item 1

Item 2

Item 3

Item 4

The layout prop automatically animates position and size changes.

Animations with Motion

Hover me

Animations with Motion

Hover me