Skip to main content
Version: next

Recipes

recipes is a namespace object of ready-made AnimateProp values for common transitions you'd otherwise write by hand as { opacity: withSpring(1) } and friends. Pass one straight into animate, unmount, hover, press, or set(...) instead of hand-writing the descriptor.

import { animate, Unmount, recipes } from 'react-ui-animate';

<Unmount>
  {open && (
    <animate.div
      key="card"
      animate={recipes.scaleIn}
      unmount={recipes.scaleOut}
    />
  )}
</Unmount>
Preview
tip

Use recipes for common enter/exit/hover/press motion; reach for withSpring / withTiming when you need custom targets or timing.

Available recipes​

Fade​

fadeIn, fadeOut, fadeInUp, fadeInDown, fadeInLeft, fadeInRight

Slide​

slideInUp, slideInDown, slideInLeft, slideInRight, slideOutUp, slideOutDown, slideOutLeft, slideOutRight

Scale​

scaleIn, scaleOut, scaleUp, scaleDown

Bounce​

bounceIn, bounceOut

Rotate​

rotateIn, rotateOut, spin

Zoom​

zoomIn, zoomOut

Flip​

flipX, flipY

Slide + fade / scale + fade​

slideFadeIn, slideFadeOut, scaleFadeIn, scaleFadeOut

Hover​

hoverScale, hoverLift, hoverGlow: designed for onMouseEnter/ onMouseLeave, or as the hover prop's target.

Press​

pressScale, pressDown: designed for onPointerDown/onPointerUp, or as the press prop's target.

Unmount​

unmountFade, unmountSlideUp, unmountSlideDown, unmountScale: meant for animate.*'s unmount prop, inside an Unmount wrapper.

Why not the old flat exports?​

Earlier versions exported each of these directly (import { fadeIn } from 'react-ui-animate'). They're now grouped under the single recipes object to keep the top-level export surface small. Swap fadeIn for recipes.fadeIn and everything else is unchanged.