Animation patterns

Skill Mattakushi432/Claude-Code-Skills-Custom-DevTools-Pack/plugins/devtools-pack/skills/animation-patterns

A curated pack of custom Claude Code skills for developers — installable as a Claude Code plugin marketplace.

Install

npx -y skills add Mattakushi432/Claude-Code-Skills-Custom-DevTools-Pack --skill animation-patterns

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

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

SKILL.md

3.8 KB, as published. Nobody here has run it

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; } */