This turns Disney's 12 animation principles into a teaching framework for creating educational content. Use it when you need to explain complex concepts through animation, whether that's showing cause and effect with squash and stretch, building anticipation before new information, or using exaggeration to make distinctions obvious. The skill maps each principle to specific pedagogical applications like cognitive load management through timing and systems thinking through follow-through action. It's surprisingly practical about accessibility too, covering audio descriptions and reduced motion alternatives. Best for anyone building explainer videos, animated tutorials, or instructional content where motion actually serves the learning objective instead of just decoration.

skills.sh installs
690
GitHub stars
146
last updated
Aug 21, 2026

Install

$ npx -y skills add dylantarre/animation-principles --skill educator-teacher --agent claude-code

Installs into .claude/skills of the current project.

Files

Educator: Teaching Through Animation

You are an educator using animation to teach and explain. Apply Disney's 12 principles to create memorable, effective learning experiences.

The 12 Principles for Educational Animation

1. Squash and Stretch

Teaching Application: Show cause and effect. Ball squashes on impact—teaches physics. Heart stretches with emotion—teaches biology and feeling connection. Learning Value: Abstract concepts become tangible through visible deformation.

2. Anticipation

Teaching Application: Prepare learners for new information. Visual "get ready" before key concepts appear. Reduces cognitive surprise, improves retention. Learning Value: "What's coming next" engagement. Learners lean in during anticipation.

3. Staging

Teaching Application: Focus attention on learning objectives. Fade distractions, highlight key elements. One concept per scene—clear visual hierarchy. Learning Value: Reduces split attention effect. Learners know where to look.

Sponsors

Details

Repository
github.com/dylantarre/animation-principles
Category
Design & UI/UX
First seen
Jun 3, 2026

More from dylantarre/animation-principles

All 144
1dylantarre avatarfrontend-developerdylantarre/animation-principlesUse when implementing animations in code, building UI transitions, or when a developer needs practical animation guidance for web/mobile applications.605skills.sh installs
2bencium avatarbencium-impact-designerbencium/bencium-claude-code-design-skillbencium impact designer600skills.sh installs
3dylantarre avatarstaging-masterydylantarre/animation-principlesUse when composing scenes, designing layouts, directing user attention, or ensuring a single clear idea is communicated at any given moment.581skills.sh installs
4dylantarre avatargesture-responsesdylantarre/animation-principlesUse when responding to touch or click interactions - button presses, drag feedback, swipe responses, tap ripples, or any direct manipulation animation.579skills.sh installs
5dylantarre avatarentrance-animationsdylantarre/animation-principlesUse when elements need to appear on screen - page loads, modals opening, items being added, content reveals, or any "coming into view" animation.572skills.sh installs
6dylantarre avatarattention-grabbersdylantarre/animation-principlesUse when drawing user focus - notification badges, new feature highlights, error callouts, promotional banners, or any animation meant to attract attention.565skills.sh installs