Framer Motion

Crafting a Motion Language for Enterprise Dashboards

March 1st, 20241 min read

Motion must reinforce meaning. Every easing curve and delay should communicate hierarchy or state transitions.

motion-presets.ts

const container = {
  hidden: { opacity: 0, y: 16 },
  show: {
    opacity: 1,
    y: 0,
    transition: {
      staggerChildren: 0.08,
      ease: [0.16, 1, 0.3, 1],
    },
  },
};