Examples
Got an example you want to see here & share with the community? Check out this guide.
Animating AutoAnimating widths with react-spring, use-measure and interpolation - useSpring
- useMeasure
- auto
- width
- interpolation
Async CSS variablesUsing CSS variables with the useSpring hook and animation chains - useSpring
- css
- variables
- loop
- async
- chain
Basic TrailIntroduction to using the useTrail hook as part of a wrapper component - useTrail
- Basic
- configuration
Basic TransitionBasic viewport sized transition of cards animating with the imperative API - imperative
- useTransition
- SpringRef
CardAnimating images on a card with react-spring and use-gesture. - useSpring
- interpolation
- useGesture
- scrolling
- cards
Cards StackAnimating a stack of cards with @use-gesture/react's useDrag hook, useSprings and interpolation - cards
- use-gesture
- useDrag
- useSprings
- interpolation
Chaining Transition and a SpringOrchestrating a useTransition and useSpring hook with the useChain hook. - useTransition
- useSpring
- useChain
- SpringRef
CSS GradientsUse interpolations & easings to create the CSS gradients you've been seeing all over the web. - useSpring
- interpolation
- leva
- css
- gradients
CSS KeyframesSimulating CSS keyframes with interpolations - useSpring
- interpolation
- css
- keyframes
Draggable ListUsing @use-gesture/react with react-spring to create a draggable re-orderable list - useSprings
- useDrag
- interpolation
- draggable
- list
Exit Before EnterShowcasing the exitBeforeEnter prop and animated clip-paths to give a wipe effect - useTransition
- useSpring
- exitBeforeEnter
- paths
- SpringRef
Flip CardUsing interpolations & CSS 3D create a flip card effect - css
- 3D
- useSpring
- interpolation
Floating ButtonA small floating button like Facebook's desktop messenger built with radix & stitches - use-gesture
- useSpring
- useSprings
- interpolation
- stitches
- radix-ui
Goo Blobs2D SVG metaballs animated with react-spring - useTrail
- useMeasure
- svg
- metaballs
- filters
Horizontal ParallaxThe real test of a parallax component, horizontal scrolling - Parallax
- horizontal
Image FadeSimple image fading illustrating the exitBeforeEnter prop on useTransition - image
- exitBeforeEnter
- useTransition
- onRest
List ReorderingAutomatic list reordering with animation - useTransition
- list
MacOS DockA MacOS-esque dock created in HTML with all the animations you'd expect! - useSpringValue
- useSpring
- interpolation
- useDrag
- loop
Masonry GridA pintrest-esque homepage with animations - useTransition
- masonry
- pintrest
Multistage TransitionsAsync animation scripts for entering and leaving using useTransition - async
- scripts
- useTransition
Native SlideA native-esque slider component animated with useSpring and useDrag - useSpring
- useDrag
- native
- interpolation
NoiseCreate noise with just a small image and useSpring - useSpring
- easing
- steps
- interpolation
Notification HubCreating toast notifications with useTransition - notifications
- toast
- useTransition
Popup ModalAnimate on intersections with the viewport - useInView
- useSpring
- Windows95
- styled-components
Rocket decayCreate intertia with the velocity and decay config options combined with interpolation - velocity
- intertia
- decay
- interpolation
- useSpring
- useDrag
Scrolling WaveReact to scroll progress and values to create exciting landing pages - useScroll
- interpolation
- useSpring
- events
Smile GridAn animated SVG grid with a smiley face inside! - useTrail
- useChain
- useSprings
- useSpringRef
- svg
Springy BoxesColorful boxes changing position with spring physics - react-three-fiber
- threejs
- webgl
- physics
Sticky ParallaxShowcasing the sticky prop used with the Parallax component - Parallax
- sticky
Svg FilterAnimating SVG filter nodes to distort a path - useSpring
- svg
- filters
- path
Tree ListAnimated tree styled menu list - useSpring
- useMeasure
- tree
- menu
- list
Vertical ParallaxShowcasing a basic use of vertical parallax - Parallax
- vertical
ViewpagerAnimating a viewport sized image carousel with useDrag, useMeasure and useSprings - useSprings
- useDrag
- useMeasure
- carousel
WebGL SwitchAnimating both the dom as well as the canvas with a single spring. - react-three-fiber
- threejs
- webgl
- gltf
- physics
WordleWordle tiles with useTrail - useTrail
- stitches
- interpolation