Forms Inputs
Applies Disney's 12 animation principles to form elements with specific timing guidance and state transitions. You get concrete values like 150ms for focus borders, 200ms for floating labels, and shake animations at 300ms. The approach treats each input state (default, focus, filled, valid, invalid) as distinct poses with smooth easing between them. What stands out is the secondary action coordination, like timing label floats against border highlights without creating visual chaos. The CSS examples are minimal but show the cubic-bezier curves and transforms you actually need. This is most useful if you're building custom form components and want deliberate motion design rather than guessing at durations or just slapping transitions everywhere.
- skills.sh installs
- 553
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill forms-inputs --agent claude-codeInstalls into .claude/skills of the current project.
Files
Form & Input Animation Principles
Apply Disney's 12 principles to forms for clear feedback and delightful interactions.
Principles Applied to Form Elements
1. Squash & Stretch
Input fields can subtly expand on focus (1-2px height). Submit button compresses on click. Checkboxes bounce on toggle.
2. Anticipation
Label floats up before user types. Focus ring appears before content entry. Prepares user for input action.
3. Staging
Focused input should be visually prominent: border color, shadow, label position. Other fields can slightly dim. Guide attention.
4. Straight Ahead & Pose to Pose
Define input states: default, focus, filled, valid, invalid, disabled. Clear poses for each state with smooth transitions.
5. Follow Through & Overlapping Action
Floating label settles after reaching final position. Validation icon can bounce slightly. Character counter updates with subtle motion.
6. Ease In & Ease Out
Focus transitions: ease-out. Validation feedback: ease-in-out. Label float: cubic-bezier(0.4, 0, 0.2, 1).
7. Arcs
Floating labels should arc slightly during upward movement, not straight line. Adds organic feel to mechanical action.
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/dylantarre/animation-principles
- Category
- Design & UI/UX
- First seen
- Jun 3, 2026
More from dylantarre/animation-principles
All 144- Secondary Action Mastery551
- Social Media551
- Attention Management550
- Brand Strategist548
- Exit Animations547
- Exaggerated Clarity546
- Accordions Dropdowns545
- Straight Ahead Pose Mastery543
- Timing Calibration543
- Continuous Loops542
- Lists Grids542
- Urgency Action542
- User Feedback Clarity542
- Power Confidence540
- Feedback Indicators539
- Universal Patterns539
- Continuous Infinite535
- Emotional Disconnect534
- Problem Diagnosis534
- Responsive Adaptive534
- State Changes534
- Popmotion533
- Professionalism Credibility533
- Comfort Safety532
Recommended
More Design & UI/UX
social-mediadylantarre/animation-principlesUse when designing animations for social platforms, messaging apps, content sharing, or community features551skills.sh installsuser-feedback-claritydylantarre/animation-principlesUse when users don't notice feedback, miss state changes, or can't tell if their action worked542skills.sh installsprofessionalism-credibilitydylantarre/animation-principlesUse when creating animations for business contexts that require seriousness, competence, and trustworthy presentation.533skills.sh installs
prototypeplugin87/ux-ui-agent-skillsMove an idea up the fidelity ladder (content-first → wireframe → low-fi → high-fi → code) with a validation plan at each level, plus user-journey mapping and us528skills.sh installstoken-buildplugin87/ux-ui-agent-skillsSet up or run the token build pipeline — transform the DTCG tokens/*.json (source of truth) into platform artifacts (CSS variables, Tailwind @theme, JS/TS, iOS 522skills.sh installs
web-prototypenexu-io/open-designGeneral-purpose desktop web prototype. Single self-contained HTML file built by copying the seed `assets/template.html` and pasting section layouts from `refere301skills.sh installs