When you need animations that feel weighty and commanding rather than bouncy or playful, this gives you the timing curves and principles to pull it off. Think hero sections, premium product reveals, or dashboard metrics that should land with authority. The guide breaks down Disney animation principles through the lens of power: minimal squash and stretch, direct movement paths, decisive landings with controlled deceleration. The timing recommendations are specific (200-300ms entrances, cubic-bezier easing functions) and the impact examples show how to make elements settle with weight instead of bounce. Most useful when you're working on luxury brands, automotive sites, or anywhere confidence matters more than friendliness.

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

Install

$ npx -y skills add dylantarre/animation-principles --skill power-confidence --agent claude-code

Installs into .claude/skills of the current project.

Files

Power & Confidence Animation

Create animations that convey strength, authority, and commanding presence.

Emotional Goal

Power comes from deliberate, controlled, weighty motion. Confidence means animations that know exactly where they're going and arrive with certainty.

Disney Principles for Power

Squash & Stretch

Minimal stretch, impactful squash. Heavy objects don't stretch—they compress on impact (10-15%). Weight and solidity over flexibility.

Anticipation

Deliberate, confident preparation (100-200ms). Not hesitation—gathering power. Like a predator before striking.

Staging

Dominant positioning. Large scale, center stage. Powerful elements command attention through presence, not motion.

Straight Ahead Action

Avoid. Power requires intention and control. Every movement should be deliberate, not spontaneous.

Follow Through & Overlapping Action

Controlled deceleration. Heavy elements don't bounce—they settle with authority. Short, decisive follow-through.

Slow In & Slow Out

Strong ease-out with sudden stops. Fast acceleration, decisive landing. cubic-bezier(0.0, 0, 0.2, 1) for powerful arrivals.

Sponsors

Details

Repository
github.com/dylantarre/animation-principles
Categories
Productivity & Planning, Marketing & SEO, Design & UI/UX
First seen
Jun 3, 2026

More from dylantarre/animation-principles

All 144
1garrytan avatarplan-eng-reviewgarrytan/gstackEng manager-mode plan review. (gstack)526skills.sh installs
2garrytan avatarplan-ceo-reviewgarrytan/gstackCEO/founder-mode plan review. (gstack)517skills.sh installs
3jwynia avatararchitecture-decisionjwynia/agent-skillsSystematically evaluate architecture decisions, document trade-offs, and select appropriate patterns. This skill should be used when the user asks about 'archit500skills.sh installs
4longbridge avatarlongbridge-event-opportunitylongbridge/skillsCorporate event opportunity scanner for A-share companies via Longbridge — identifies and analyses events that may create pricing dislocations: M&A / restructur491skills.sh installs
5aj-geddes avatarincident-response-planaj-geddes/useful-ai-promptsCreate and execute incident response procedures for security breaches, data leaks, and cyber attacks. Use when handling security incidents, creating response pl484skills.sh installs
6sickn33 avatarstartup-business-analyst-market-opportunitysickn33/antigravity-awesome-skillsstartup business analyst market opportunity463skills.sh installs