Animation Patterns

Animation Patterns

CSS Animations

/* Keyframe animation */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.card {
  animation: fade-up 400ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Stagger with custom property */
.card:nth-child(1) { --delay: 0ms; }
.card:nth-child(2) { --delay: 80ms; }
.card:nth-child(3) { --delay: 160ms; }
.card { animation-delay: var(--delay, 0ms); }

/* Composite-only properties: transform + opacity only */

Scroll-Driven Animations (CSS)

/* Animate on scroll without JS */
@keyframes reveal {
  from { opacity: 0; translate: 0 40px; }
  to   { opacity: 1; translate: 0 0; }
}

.section {
  animation: reveal linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

/* Progress bar tied to scroll */
.progress {
  position: fixed; top: 0; left: 0; height: 4px;
  background: var(--color-primary);
  animation: grow-width linear;
  animation-timeline: scroll(root block);
  transform-origin: left;
}
@keyframes grow-width { from { scaleX: 0; } to { scaleX: 1; } }

Web Animations API

// Imperative animation with full control
const el = document.querySelector('.card');

const anim = el.animate(
  [
    { opacity: 0, transform: 'translateY(20px)' },
    { opacity: 1, transform: 'translateY(0)' }
  ],
  { duration: 400, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', fill: 'both' }
);

await anim.finished; // Promise resolves when done

// Pause / scrub
anim.pause();
anim.currentTime = 200; // seek to 200ms

GSAP ScrollTrigger

import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);

// Pin + scrub animation
gsap.to('.hero-text', {
  y: -100, opacity: 0,
  scrollTrigger: {
    trigger: '.hero',
    start: 'top top',
    end: 'bottom top',
    scrub: true,
    pin: true,
  }
});

// Stagger on enter
gsap.from('.card', {
  y: 60, opacity: 0, stagger: 0.1, duration: 0.6,
  ease: 'power3.out',
  scrollTrigger: { trigger: '.card-grid', start: 'top 80%' }
});

Framer Motion (React)

import { motion, useScroll, useTransform, AnimatePresence } from 'framer-motion';

// Basic animation
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  exit={{ opacity: 0 }}
  transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
/>

// Scroll-linked parallax
function ParallaxHero() {
  const { scrollY } = useScroll();
  const y = useTransform(scrollY, [0, 500], [0, -150]);
  return <motion.img style={{ y }} src="/hero.jpg" />;
}

// List with AnimatePresence
<AnimatePresence>
  {items.map(item => (
    <motion.li key={item.id}
      layout
      initial={{ opacity: 0, height: 0 }}
      animate={{ opacity: 1, height: 'auto' }}
      exit={{ opacity: 0, height: 0 }}>
      {item.name}
    </motion.li>
  ))}
</AnimatePresence>

Reduced Motion

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

// Check in JS
const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const duration = prefersReduced ? 0 : 400;

will-change — Use Sparingly

/* Only add before animation starts, remove after */
.animating { will-change: transform, opacity; }

/* Never blanket-apply */
/* WRONG: * { will-change: transform; } */