# Animation Patterns

> When to activate: CSS animations, GSAP, Framer Motion, scroll-driven animations, Web Animations API, transitions, motion

- Skill: `mattakushi432/animation-patterns` (Agent Skill)
- Install (CLI): `npx skillmds@latest add mattakushi432/animation-patterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/mattakushi432/animation-patterns/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: Mattakushi432 (https://skillmd.com/u/mattakushi432)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/mattakushi432/animation-patterns

---

# Animation Patterns

## CSS Animations

```css
/* 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)

```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

```js
// 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

```js
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)

```tsx
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

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

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

## will-change — Use Sparingly

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

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