mirror of https://github.com/dylantarre/animation-principles.git synced 2026-09-19 03:48:46 +08:00

Files

T

Dylan Tarre 747c656abe feat: Initial release of Animation Principles Skill Marketplace

144 skills across 12 categories teaching Disney's 12 Principles of Animation:

- By Domain (web, mobile, games, 3D, data viz...)
- By Thinking Style (physics, timing, narrative...)
- By Role/Persona (developer, designer, director...)
- By Skill Level (beginner → master)
- By Animation Type (loading, hover, transitions...)
- By Emotional Outcome (joy, trust, urgency...)
- By UI Element (buttons, modals, cards...)
- By Industry (fintech, healthcare, SaaS...)
- By Tool/Framework (CSS, GSAP, Framer Motion...)
- By Time Scale (micro 100ms → dramatic 2s+)
- By Principle Focus (deep dive per principle)
- By Problem Type (debugging, performance, a11y...)

Includes:
- Comprehensive README with installation instructions
- Full documentation in /docs with index
- CONTRIBUTING.md with skill writing guidelines
- CLAUDE.md for Claude Code integration
- GitHub issue and PR templates
- MIT License

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

2025-12-30 00:19:52 -08:00

2.9 KiB

Raw Permalink Blame History

name, description

name	description
css-native	Use when implementing Disney's 12 animation principles with pure CSS animations and transitions

CSS Native Animation Principles

Implement all 12 Disney animation principles using CSS animations, transitions, and transforms.

1. Squash and Stretch

@keyframes squash-stretch {
  0%, 100% { transform: scaleX(1) scaleY(1); }
  50% { transform: scaleX(1.2) scaleY(0.8); }
}
.ball { animation: squash-stretch 0.3s ease-in-out; }

2. Anticipation

@keyframes anticipate-jump {
  0% { transform: translateY(0); }
  20% { transform: translateY(10px) scaleY(0.9); } /* wind up */
  100% { transform: translateY(-100px); }
}

3. Staging

.hero { z-index: 10; filter: none; }
.background { z-index: 1; filter: blur(2px); opacity: 0.7; }

4. Straight Ahead / Pose to Pose

/* Pose to pose - define keyframes explicitly */
@keyframes walk-cycle {
  0% { background-position: 0 0; }
  25% { background-position: -100px 0; }
  50% { background-position: -200px 0; }
  75% { background-position: -300px 0; }
  100% { background-position: -400px 0; }
}

5. Follow Through and Overlapping Action

.character { animation: move 0.5s ease-out; }
.hair { animation: move 0.5s ease-out 0.05s; } /* slight delay */
.cape { animation: move 0.5s ease-out 0.1s; }

6. Slow In and Slow Out

.element {
  transition: transform 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}
/* Or use: ease-in-out, ease-in, ease-out */

7. Arc

@keyframes arc-motion {
  0% { transform: translate(0, 0); }
  50% { transform: translate(100px, -80px); }
  100% { transform: translate(200px, 0); }
}
/* Use offset-path for true arcs */
.element { offset-path: path('M0,100 Q100,0 200,100'); }

8. Secondary Action

.button:hover {
  transform: scale(1.05);
}
.button:hover .icon {
  animation: wiggle 0.3s ease-in-out;
}

9. Timing

.fast { animation-duration: 0.15s; }
.normal { animation-duration: 0.3s; }
.slow { animation-duration: 0.6s; }
.dramatic { animation-duration: 1.2s; }

10. Exaggeration

@keyframes exaggerated-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-150px) scale(0.8, 1.3); }
}

11. Solid Drawing

.element {
  transform-style: preserve-3d;
  perspective: 1000px;
}
.face { transform: rotateY(20deg); }

12. Appeal

.appealing {
  border-radius: 50%;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}
.appealing:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

Timing Reference

Action	Duration
Micro-interaction	100-200ms
Button feedback	150-300ms
Page transitions	300-500ms
Complex animations	500-1000ms

Key CSS Properties

animation / @keyframes
transition
transform
offset-path (motion paths)
animation-timing-function
animation-delay

2.9 KiB Raw Permalink Blame History