Tutorials
Step-by-step walkthroughs for building animations with Motion. Sorted from beginner to advanced.
Latest TutorialCursor
Bobble hover
A 3x3 grid of tiles that bobble with a spring when hovered, with the bounce scaled to how fast the pointer was moving, using Motion for React.
Level03 · IntermediateAccessMotion+
Levels
Intro
React's AnimatePresence modes explained
Loading: Infinite path drawingMotion+
Loading: Circle spinner
Loading: Jumping dots
Loading rippleMotion+
Loading: Pulse dots
Loading: Circle spinner
Loading: Jumping dots
Loading rippleMotion+
Loading: Pulse dots
Loading: Circle spinner
Loading: Jumping dots
Loading rippleMotion+
Loading: Pulse dots
Gestures
Press
Hover
HTML content
Keyframe wildcards
Spinning 3D cube
CSS spring
LightboxMotion+
Page wipeMotion+
Shared view animationMotion+
View animationMotion+
Basic animation
Parallax
Rotate
Scroll fade in/out
Scroll pinning
Scroll-triggered animation
Spring
Stagger
SVG loading spinner
Exit animation
Drag
Enter animation
Gestures
Keyframes
Transition options
RotateBeginner
Scroll Direction: Hide Header
Material Design: RippleMotion+
Material Design: RippleMotion+
Split textMotion+
Characters remaining
Fill textMotion+
Loading progress barMotion+
Fill textMotion+
Loading progress barMotion+
Fill textMotion+
Loading progress barMotion+
Tilt cardMotion+
TypewriterMotion+
Tilt cardMotion+
Split Text: ScatterMotion+
Split Text: WavyMotion+
Split TextMotion+
Color interpolation
AccordionMotion+
Bounce easing
Reveal text effectMotion+
Spring: Follow CursorMotion+
AccordionMotion+
Smooth TabsMotion+
Follow pointer with spring
HTML content
SVG path morphing
Layout animation
Motion along a path
Path drawingIntermediate
Scroll Image RevealMotion+
Scroll Zoom HeroMotion+
Scroll velocity: 3D planesMotion+
To-do listMotion+
Cursor: Floating targetMotion+
Magnetic filingsMotion+
Cursor trail velocityMotion+
Cursor trailMotion+
Infinite loadingMotion+
Scroll highlightMotion+
Family-style dialogMotion+
Hold to confirmMotion+
Notifications stackMotion+
Hold to confirmMotion+
Multi state badgeMotion+
Loading overlayMotion+
Loading overlayMotion+
Loading overlayMotion+
Physical staggerMotion+
iOS App Store: Layout animation
iOS App StoreMotion+
Conic gradient pointerMotion+
Notifications listMotion+
Image reveal sliderMotion+
Modal dialogMotion+
iOS sliderMotion+
Tab selectMotion+
ParallaxMotion+
iOS Notifications stackMotion+
Three.js
Path morphing
Variants
