
Power Confidence
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-codeInstalls 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- Feedback Indicators539
- Universal Patterns539
- Continuous Infinite535
- Emotional Disconnect534
- Problem Diagnosis534
- Responsive Adaptive534
- State Changes534
- Popmotion533
- Professionalism Credibility533
- Comfort Safety532
- Implementation Debugging532
- Technical Constraints532
- Friendliness Approachability531
- Motion Sickness531
- Large 500 800ms530
- Medium 300 500ms530
- Universal Industry530
- Trust Reliability529
- Deliberate 1200 2000ms528
- Product Manager528
- Small 200 300ms528
- Universal Elements528
- Universal Practitioner527
- Universal Solutions527