其他

medium-300-500ms

dylantarre/anim…inciples

Use when building standard animations between 300-500ms - page transitions, significant UI changes, animated illustrations that need clear communication

  • 493 次安装
  • 133 星标
  • 收录于

安装命令

npx skills add https://github.com/dylantarre/animation-principles --skill medium-300-500ms

SKILL.md

Medium Animations (300-500ms)

The 300-500ms range is standard animation territory. Long enough to be watched, short enough to not impede flow. The workhorse duration for meaningful motion.

Disney Principles at Medium Duration

All 12 Principles Applicable

Squash & Stretch: Full expression - visible deformation for bouncing, elastic elements. 15-25% stretch feels natural.

Anticipation: Clear preparation - 80-120ms anticipation before main action. Pull back before push forward.

Staging: Multi-element choreography possible - primary action leads, supporting elements follow.

Straight Ahead/Pose to Pose: Pose to pose recommended - define key positions, let easing handle in-betweens.

Follow Through: Essential - overlapping action where parts settle at different rates.

Slow In/Slow Out: Critical for naturalism - both directions need proper easing.