Skip to Content
Docs🎨 ⏐ ThemeingCustom Animations

Custom Animations

reablocks uses Motion  (formerly framer-motion) for every animated component. Components that animate — Dialog, Drawer, Menu, Tooltip, Collapse, Toggle, Stepper, etc. — accept an animation prop so you can swap in your own keyframes without forking the component.

The animation prop mirrors Motion’s animate API :

  • initial — the initial state of the animation.
  • animate — the active state once mounted.
  • exit — the state to animate to before unmount (used by overlay components).
  • variants — named variant object if you’d rather drive states by key.
  • transition — easing, duration, spring config, etc.

Example: a Dialog that drops in from the top

By default Dialog fades + scales in. Pass a custom animation prop to override that — here’s a spring-driven dialog that drops in from above and exits up the same way:

import { useState } from 'react';
import { Button, Dialog, DialogHeader, DialogContent } from 'reablocks';
 
export const DropDialog = () => {
  const [open, setOpen] = useState(false);
 
  return (
    <>
      <Button onClick={() => setOpen(true)}>Open</Button>
      <Dialog
        open={open}
        onClose={() => setOpen(false)}
        animation={{
          initial: { opacity: 0, y: -40, scale: 0.96 },
          animate: { opacity: 1, y: 0, scale: 1 },
          exit: { opacity: 0, y: -40, scale: 0.96 },
          transition: { type: 'spring', stiffness: 260, damping: 22 }
        }}
      >
        <DialogHeader>Heads up</DialogHeader>
        <DialogContent>
          The dialog dropped in from the top. Try closing it — it'll exit the
          same way.
        </DialogContent>
      </Dialog>
    </>
  );
};

Example: a rotating, scaling Dialog

A second take, using a tween instead of a spring:

import { Dialog, DialogHeader, DialogContent } from 'reablocks';
 
<Dialog
  open={open}
  onClose={() => setOpen(false)}
  animation={{
    initial: { opacity: 0, scale: 0.5, rotate: -10 },
    animate: { opacity: 1, scale: 1, rotate: 0 },
    exit: { opacity: 0, scale: 0.5, rotate: 10 },
    transition: { duration: 0.4, type: 'spring', stiffness: 150 }
  }}
>
  <DialogHeader>Custom Animation Dialog</DialogHeader>
  <DialogContent>
    {/* Your content here */}
  </DialogContent>
</Dialog>

Notes

  • exit matters for overlays. Dialog and Drawer mount/unmount the surface, so exit is what runs on close. Skip it and the close will snap.
  • Springs vs. tweens. type: 'spring' ignores duration — control it with stiffness and damping. For a fixed-duration easing curve, use type: 'tween' and set duration + ease.

More

  • Motion docs  — every value you can put inside initial / animate / transition.
Last updated on
IconsData Size