The animate Component

animate.* (e.g. animate.div, animate.button) is a drop-in replacement for any HTML/SVG tag that understands animated values and adds a handful of declarative animation props: the foundation everything else in the library builds on.

Basic usage

import { animate, useValue, withSpring } from 'react-ui-animate';

function AnimatedBox() {
  const [width, setWidth] = useValue(100);

  return (
    <>
      <button onClick={() => setWidth(withSpring(200))}>Expand</button>
      {/* Bind the AnimateValue directly — no React re-render on each frame */}
      <animate.div style={{ width, height: 100, background: '#60a5fa' }} />
    </>
  );
}

width is an AnimateValue from useValue. Passing it into style subscribes the element directly, so it updates outside React's render cycle.

Preview

Declarative props

Each accepts an animation target the same shape as style, and animates to it on the matching trigger:

Prop	Fires on
animate	mount, or whenever the prop's value changes
unmount	unmount (needs an Unmount wrapper)
hover	pointer enter/leave, see Interactive Props
press	pointer down/up
focus	focus/blur
view	entering the viewport (+ viewOptions)

/* Declarative targets: mount, hover, and press each animate on their trigger */
<animate.button
  animate={{ opacity: withSpring(1) }}
  hover={{ scale: withSpring(1.1) }}
  press={{ scale: withSpring(0.95) }}
  style={{ opacity: 0 }}
>
  Interactive Button
</animate.button>

Preview

tip

Any of these can also take a ready-made recipe instead of writing the descriptor by hand: hover={recipes.hoverScale}.

Transform shorthands

style accepts translateX/translateY/scale/rotate directly (no manual transform: translate(...) scale(...) string-building) alongside regular CSS properties:

/* Prefer GPU transforms over animating layout properties */
<animate.div style={{ width: 100, translateX: 100, scale: 1.2, rotate: 45 }} />

note

Prefer transforms over animating width/height/top/left. Transforms are GPU-accelerated and don't trigger layout.

Next steps

• useValue: creating the animated values animate.* reads.
• Animation Modifiers: withSpring, withTiming, and the rest.
• useTimeline: coordinate updates across several values on one shared clock.
• Unmount & Flip: exit animations.