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