lottiefiles-motion-design-skill

Match easing to intent: use easeOut (0, 0, 0.2, 1) for elements entering, easeIn (0.4, 0, 1, 1) for exits, easeInOut for position changes, and easeOutBack for attention-grabbing success feedback. Never use linear easing, which feels robotic.

Duration scales with element size: 150-200ms for icons and badges, 200-300ms for buttons and inputs, 300-400ms for cards, 400-500ms for modals and drawers, and 500-700ms for full page transitions.

Yes, the principles are implementation-agnostic and include code examples for CSS transitions, Framer Motion variants, GSAP with Vue, Svelte transitions, and Angular animations. The timing and easing guidance transfers across all animation libraries.

Jank usually comes from animating layout properties like width, height, top, or left, which force reflows. Animate only transform and opacity, which are GPU-accelerated, and use will-change sparingly only during the animation.

Detect the prefers-reduced-motion media query and replace movement with simple opacity fades. In CSS, set animation and transition durations to near-zero inside a prefers-reduced-motion media block.

Follow hierarchy, stagger, and overlap rules: animate the most important element first, stagger siblings by 50-150ms depending on desired drama, and group related elements so they move together following natural reading order.