System / Foundations / Motion
07

Motion

Duration and easing values for consistent animation timing, plus the reusable Framer Motion variants built on top of them.

Duration

TokenValueUsageExample
--duration-fast150msMicro-interactions, toggles, tooltips
--duration-normal250msStandard transitions, hover states
--duration-slow400msPage transitions, modals, complex animations
--duration-slower600msElaborate entrances, staggered lists

Easing

TokenValueUsageExample
--ease-incubic-bezier(0.4, 0, 1, 1)Elements leaving the screen
--ease-outcubic-bezier(0, 0, 0.2, 1)Elements entering the screen
--ease-in-outcubic-bezier(0.4, 0, 0.2, 1)Elements moving across screen
--ease-springcubic-bezier(0.34, 1.56, 0.64, 1)Playful, bouncy interactions

Animation Variants

Reusable Framer Motion animation variants. Click Replay to see each animation.

Fade In

Simple opacity entrance

Slide Up

Slide up from below with fade

Slide Down

Slide down from above with fade

Slide Left

Slide in from the right

Slide Right

Slide in from the left

Scale In

Scale up with spring physics

Stagger Item

Used inside a stagger container

Stagger Container

Wrap child elements with staggerContainer and apply staggerItem to each child for sequenced entrance animations.