With naturally fluid animations you will elevate your UI & interactions. Bringing your apps to life has never been simpler.

But wait, there’s more

It’s not just for web

Choose from our five targets:

web
native
three
konva
zdog

Missing a target you want? Request we add it or create it yourself with our advanced API usage.

Learn more about targets

import { animated, useSpring } from '@react-spring/web'
export const MyComponent = () => {
const { x } = useSpring({
from: {
      x: 0,
},
    to: {
      x: 1,
},
})
return <animated.div style={{ x }} />
}

Avoid unnecessary overhead

Run animations without re-rendering

Use our imperative API methods to run animations without updating state. Respond to events without the react rendering overhead to achieve smooth, fluid animation.

View imperative API

Designed with you in mind

Production ready with SSR support

Forget about useRef & useEffect to attach your animations to dom nodes. animated takes care of it for you.

Fully written in Typescript for easy integration to your pre-existing codebase.

Use a target for a small bundle size or omit the target and just use the core for an even smaller package.

55.1kb

react-spring

19.2kb

web

15.2kb

core

Wow, that's a lot!

And there's even more

Animate any value – strings, numbers, css variables...
Shorthand transformation styles
Interpolate values inline
Easily react to animation events
Usable with any component library

Get started now

import * as Dialog from '@radix-ui/react-dialog'
import { styled } from '@stitches/react'
import { animated, useSpring } from '@react-spring/web'
export const AnimatedDialog = ({ isOpen, onOpenCallback }) => {
const { x, backgroundColor, o } = useSpring({
    x: isOpen ? '0%' : '-100%',
    backgroundColor: isOpen
? 'var(--color-whiteblur)'
: 'var(--colors-white00)',
    o: isOpen ? 1 : 0,
onRest: () => {
if (isOpen && onOpenCallback) {
onOpenCallback()
}
},
})
return (
<Dialog.Root>
      <Overlay style={{ backgroundColor }} />
      <Modal
        style={{
          x,
          backgroundColor: o.to(o => 'rgba(255,255,255,' + o + ')'),
        }}
      />
    </Dialog.Root>
)
}
import * as Dialog from '@radix-ui/react-dialog'
import { styled } from '@stitches/react'
import { animated, useSpring } from '@react-spring/web'
export const AnimatedDialog = ({ isOpen, onOpenCallback }) => {
const { x, backgroundColor, o } = useSpring({
    x: isOpen ? '0%' : '-100%',
    backgroundColor: isOpen
? 'var(--color-whiteblur)'
: 'var(--colors-white00)',
    o: isOpen ? 1 : 0,
onRest: () => {
if (isOpen && onOpenCallback) {
onOpenCallback()
}
},
})
return (
<Dialog.Root>
      <Overlay style={{ backgroundColor }} />
      <Modal
        style={{
          x,
          backgroundColor: o.to(o => 'rgba(255,255,255,' + o + ')'),
        }}
      />
    </Dialog.Root>
)
}
import * as Dialog from '@radix-ui/react-dialog'
import { styled } from '@stitches/react'
import { animated, useSpring } from '@react-spring/web'
export const AnimatedDialog = ({ isOpen, onOpenCallback }) => {
const { x, backgroundColor, o } = useSpring({
    x: isOpen ? '0%' : '-100%',
    backgroundColor: isOpen
? 'var(--color-whiteblur)'
: 'var(--colors-white00)',
    o: isOpen ? 1 : 0,
onRest: () => {
if (isOpen && onOpenCallback) {
onOpenCallback()
}
},
})
return (
<Dialog.Root>
      <Overlay style={{ backgroundColor }} />
      <Modal
        style={{
          x,
          backgroundColor: o.to(o => 'rgba(255,255,255,' + o + ')'),
        }}
      />
    </Dialog.Root>
)
}
import * as Dialog from '@radix-ui/react-dialog'
import { styled } from '@stitches/react'
import { animated, useSpring } from '@react-spring/web'
export const AnimatedDialog = ({ isOpen, onOpenCallback }) => {
const { x, backgroundColor, o } = useSpring({
    x: isOpen ? '0%' : '-100%',
    backgroundColor: isOpen
? 'var(--color-whiteblur)'
: 'var(--colors-white00)',
    o: isOpen ? 1 : 0,
onRest: () => {
if (isOpen && onOpenCallback) {
onOpenCallback()
}
},
})
return (
<Dialog.Root>
      <Overlay style={{ backgroundColor }} />
      <Modal
        style={{
          x,
          backgroundColor: o.to(o => 'rgba(255,255,255,' + o + ')'),
        }}
      />
    </Dialog.Root>
)
}
import * as Dialog from '@radix-ui/react-dialog'
import { styled } from '@stitches/react'
import { animated, useSpring } from '@react-spring/web'
export const AnimatedDialog = ({ isOpen, onOpenCallback }) => {
const { x, backgroundColor, o } = useSpring({
    x: isOpen ? '0%' : '-100%',
    backgroundColor: isOpen
? 'var(--color-whiteblur)'
: 'var(--colors-white00)',
    o: isOpen ? 1 : 0,
onRest: () => {
if (isOpen && onOpenCallback) {
onOpenCallback()
}
},
})
return (
<Dialog.Root>
      <Overlay style={{ backgroundColor }} />
      <Modal
        style={{
          x,
          backgroundColor: o.to(o => 'rgba(255,255,255,' + o + ')'),
        }}
      />
    </Dialog.Root>
)
}