dylantarre/animation-principles

skills.sh installs: 86.9K
skills: 144

Install

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

Installs into .claude/skills of the current project.

Skills

video-motion-graphicsdylantarre/animation-principlesUse when creating After Effects compositions, Premiere Pro motion, video titles, explainer videos, or broadcast motion graphics.2.7Kskills.sh installs

mobile-touchdylantarre/animation-principlesUse when designing iOS/Android gestures, haptic feedback, touch interactions, or native mobile animations.2.4Kskills.sh installs

framer-motiondylantarre/animation-principlesUse when implementing Disney's 12 animation principles with Framer Motion in React applications1.8Kskills.sh installs

motion-designerdylantarre/animation-principlesUse when designing visual motion systems, creating animation specifications, or when a designer needs guidance on crafting beautiful, meaningful movement.1.7Kskills.sh installs

micro-interactionsdylantarre/animation-principlesUse when designing small UI feedback moments like button states, toggles, form validation, loading indicators, or notification badges.1.5Kskills.sh installs

web-motion-designdylantarre/animation-principlesUse when building CSS animations, JavaScript transitions, React/Vue motion, or any browser-based animation work.1.4Kskills.sh installs

scroll-animationsdylantarre/animation-principlesUse when triggering animations on scroll - reveal effects, parallax, sticky headers, progress indicators, or any scroll-linked motion.1.2Kskills.sh installs

game-designerdylantarre/animation-principlesUse when designing game feel, player feedback systems, or when creating animations that enhance gameplay and player satisfaction.1.1Kskills.sh installs

after-effectsdylantarre/animation-principlesUse when implementing Disney's 12 animation principles in Adobe After Effects975skills.sh installs

filmmakerdylantarre/animation-principlesUse when creating cinematic sequences, narrative animations, or when applying animation principles to video storytelling and visual narrative.943skills.sh installs

3d-spatialdylantarre/animation-principlesUse when working in Blender, Unity 3D, Unreal Engine, Cinema 4D, VR/AR applications, or any three-dimensional animation work.824skills.sh installs

gsap-greensockdylantarre/animation-principlesUse when implementing Disney's 12 animation principles with GSAP (GreenSock Animation Platform)779skills.sh installs

css-nativedylantarre/animation-principlesUse when implementing Disney's 12 animation principles with pure CSS animations and transitions760skills.sh installs

saas-productivitydylantarre/animation-principlesUse when designing animations for business tools, project management, collaboration software, or productivity apps757skills.sh installs

game-developmentdylantarre/animation-principlesUse when implementing game animations, player feedback, character movement, or interactive entertainment in Unity, Unreal, or other game engines.750skills.sh installs

page-transitionsdylantarre/animation-principlesUse when implementing route changes, view transitions, modal opens/closes, or navigation animation in web and mobile applications.718skills.sh installs

fitness-wellnessdylantarre/animation-principlesUse when designing animations for fitness apps, wellness platforms, workout trackers, or meditation experiences709skills.sh installs

presentationsdylantarre/animation-principlesUse when creating Keynote, PowerPoint, Google Slides animations, or any presentation motion design work.705skills.sh installs

e-commerce-retaildylantarre/animation-principlesUse when designing animations for shopping apps, product catalogs, checkout flows, or retail experiences690skills.sh installs

educator-teacherdylantarre/animation-principlesUse when creating educational content, explaining concepts through animation, or when teaching animation principles to students.690skills.sh installs

accessible-motiondylantarre/animation-principlesUse when implementing reduced motion alternatives, vestibular-safe animations, WCAG compliance, or designing for users with motion sensitivity.689skills.sh installs

anime-jsdylantarre/animation-principlesUse when implementing Disney's 12 animation principles with Anime.js library682skills.sh installs

emotional-narrativedylantarre/animation-principlesUse when animation needs to convey feeling, tell a story, or connect emotionally—character moments, dramatic beats, or any motion that should make the audience 674skills.sh installs

rhythm-pacingdylantarre/animation-principlesUse when animation needs musical flow—dance sequences, action choreography, comedic timing, scene pacing, or any motion that should feel rhythmic and well-compo663skills.sh installs

healthcare-medicaldylantarre/animation-principlesUse when designing animations for medical apps, patient portals, telehealth, or health tracking interfaces654skills.sh installs

lottie-bodymovindylantarre/animation-principlesUse when implementing Disney's 12 animation principles with Lottie animations exported from After Effects652skills.sh installs

hover-interactionsdylantarre/animation-principlesUse when creating mouse hover effects - button highlights, card lifts, link underlines, image zooms, or any pointer-triggered animation.650skills.sh installs

character-appealdylantarre/animation-principlesUse when creating or animating characters that need to connect with audiences—hero protagonists, memorable villains, lovable sidekicks, or any figure that must 648skills.sh installs

playfulness-fundylantarre/animation-principlesUse when creating animations that entertain, engage with humor, or create lighthearted interactive experiences.648skills.sh installs

creative-directordylantarre/animation-principlesUse when overseeing animation vision, setting creative direction for motion, or guiding teams on animation quality and consistency.631skills.sh installs

data-visualizationdylantarre/animation-principlesUse when animating charts, graphs, dashboards, data transitions, or any information visualization work.629skills.sh installs

elegance-sophisticationdylantarre/animation-principlesUse when creating animations that convey luxury, refinement, or premium brand experiences.629skills.sh installs

physics-intuitiondylantarre/animation-principlesUse when motion needs to feel physically grounded—objects falling, characters jumping, things colliding, or any element that should obey believable weight and m624skills.sh installs

carousels-slidersdylantarre/animation-principlesUse when animating carousels, sliders, image galleries, or horizontally scrolling content for smooth navigation620skills.sh installs

timing-masterydylantarre/animation-principlesUse when determining how fast or slow motion should be—pacing action sequences, dramatic pauses, comedic beats, or any situation where the duration of movement 620skills.sh installs

transition-sequencesdylantarre/animation-principlesUse when orchestrating multi-step animations - page transitions, onboarding flows, wizard steps, complex reveals, or any choreographed animation sequence.619skills.sh installs

education-learningdylantarre/animation-principlesUse when designing animations for educational platforms, e-learning, tutoring apps, or skill-building experiences618skills.sh installs

rive-animationsdylantarre/animation-principlesUse when implementing Disney's 12 animation principles with Rive interactive animations618skills.sh installs

travel-hospitalitydylantarre/animation-principlesUse when designing animations for travel booking, hospitality apps, tourism platforms, or vacation planning experiences611skills.sh installs

loading-statesdylantarre/animation-principlesUse when indicating progress or waiting - spinners, progress bars, skeleton screens, shimmer effects, or any animation showing the system is working.610skills.sh installs

dramatic-2000ms-plusdylantarre/animation-principlesUse when building extended animation sequences over 2000ms - cinematic intros, story sequences, premium experiences where animation IS the product609skills.sh installs

notifications-toastsdylantarre/animation-principlesUse when animating notifications, toasts, alerts, snackbars, or system messages to grab attention appropriately606skills.sh installs

frontend-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

navigation-menusdylantarre/animation-principlesUse when animating navigation bars, menus, sidebars, or wayfinding elements to create smooth, intuitive transitions601skills.sh installs

buttons-ctasdylantarre/animation-principlesUse when animating buttons, CTAs, or clickable action elements to create satisfying, responsive interactions598skills.sh installs

figma-prototypingdylantarre/animation-principlesUse when implementing Disney's 12 animation principles in Figma prototypes and Smart Animate597skills.sh installs

brand-marketingdylantarre/animation-principlesUse when creating commercial animations, advertising motion, brand identity animation, logo reveals, or marketing video content.594skills.sh installs

solid-drawing-masterydylantarre/animation-principlesUse when creating motion that needs dimensional grounding, designing transforms that maintain object integrity, or ensuring animations feel structurally sound.593skills.sh installs

animator-traditionaldylantarre/animation-principlesUse when creating hand-drawn or classical animation, working with frame-by-frame techniques, or applying Disney principles in their original artistic context.591skills.sh installs

motion-onedylantarre/animation-principlesUse when implementing Disney's 12 animation principles with Motion One (modern, lightweight animation library)589skills.sh installs

naturalistic-motiondylantarre/animation-principlesUse when animation should feel organic and lifelike—creature animation, realistic characters, nature elements, or any motion that needs to breathe with authenti589skills.sh installs

attention-directiondylantarre/animation-principlesUse when controlling where the audience looks—composing shots, choreographing action, revealing information, or any situation requiring clear visual hierarchy a586skills.sh installs

squash-stretch-masterydylantarre/animation-principlesUse when implementing deformation effects, bounce animations, impact responses, or any motion requiring organic elasticity and weight expression.583skills.sh installs

fintech-bankingdylantarre/animation-principlesUse when designing animations for banking apps, payment systems, investment platforms, or financial dashboards581skills.sh installs

icons-badgesdylantarre/animation-principlesUse when animating icons, badges, avatars, status indicators, or small visual elements to add personality and feedback581skills.sh installs

staging-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

gesture-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

arc-masterydylantarre/animation-principlesUse when designing motion paths, character movement trajectories, gesture animations, or any motion that should feel natural rather than robotic.578skills.sh installs

follow-through-overlappingdylantarre/animation-principlesUse when animating multi-part objects, character appendages, fabric, hair, or any motion requiring realistic drag, momentum, and settling behavior.578skills.sh installs

gaming-entertainmentdylantarre/animation-principlesUse when designing animations for gaming apps, streaming platforms, entertainment portals, or interactive media578skills.sh installs

appeal-masterydylantarre/animation-principlesUse when designing character personalities, creating memorable motion signatures, ensuring animations feel polished, or making visual experiences that audiences577skills.sh installs

accessibility-advocatedylantarre/animation-principlesUse when designing inclusive animations, addressing vestibular disorders and motion sensitivity, or ensuring animation accessibility compliance.576skills.sh installs

anticipation-masterydylantarre/animation-principlesUse when designing action sequences, user interactions, state transitions, or any motion that needs telegraphing to feel intentional rather than sudden.575skills.sh installs

entrance-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

modals-dialogsdylantarre/animation-principlesUse when animating modals, dialogs, popovers, or overlay content to create smooth entrances and exits572skills.sh installs

slow-in-out-masterydylantarre/animation-principlesUse when designing easing curves, controlling motion pacing, creating natural acceleration/deceleration, or making movements feel physically grounded.572skills.sh installs

spatial-thinkingdylantarre/animation-principlesUse when animation involves depth, perspective, volume, or three-dimensional awareness—camera moves, character positioning, environmental interaction, or mainta572skills.sh installs

ux-researcherdylantarre/animation-principlesUse when evaluating animation usability, conducting motion studies, or when researching how animation affects user perception and task completion.571skills.sh installs

excitement-energydylantarre/animation-principlesUse when creating animations that generate enthusiasm, build anticipation, or create high-energy experiences.570skills.sh installs

anticipation-payoffdylantarre/animation-principlesUse when designing action sequences, gags, reveals, or any motion that needs setup before delivery—preparing audiences for what's coming and maximizing impact.568skills.sh installs

calm-relaxationdylantarre/animation-principlesUse when creating animations that soothe users, reduce anxiety, or create peaceful, meditative experiences.566skills.sh installs

joy-delightdylantarre/animation-principlesUse when creating animations that evoke happiness, surprise, or delightful moments in the user experience.566skills.sh installs

attention-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

brand-consistencydylantarre/animation-principlesUse when animation doesn't match brand personality, feels generic, or clashes with design language565skills.sh installs

timing-principle-masterydylantarre/animation-principlesUse when determining animation durations, controlling pacing, establishing rhythm, or making motion feel appropriately weighted and emotionally resonant.565skills.sh installs

micro-100-200msdylantarre/animation-principlesUse when building micro-interactions between 100-200ms - tooltips appearing, dropdown opens, small feedback animations that feel quick but perceptible564skills.sh installs

exaggeration-masterydylantarre/animation-principlesUse when determining how far to push motion beyond realism, calibrating animation intensity for context, or making key moments register with audiences.562skills.sh installs

performance-optimizationdylantarre/animation-principlesUse when animation runs slow, janky, or causes frame drops562skills.sh installs

react-springdylantarre/animation-principlesUse when implementing Disney's 12 animation principles with React Spring's physics-based animations562skills.sh installs

enterprise-b2bdylantarre/animation-principlesUse when designing animations for enterprise software, B2B platforms, admin dashboards, or corporate applications558skills.sh installs

cards-containersdylantarre/animation-principlesUse when animating cards, panels, tiles, or container elements to create depth and interactivity557skills.sh installs

orchestrated-sequencesdylantarre/animation-principlesUse when building multi-part animation sequences - staggered reveals, choreographed UI, coordinated motion where multiple elements work together557skills.sh installs

universal-emotiondylantarre/animation-principlesUse when you need to achieve any emotional outcome through animation—provides a framework for mapping Disney principles to any target emotion.556skills.sh installs

loaders-spinnersdylantarre/animation-principlesUse when creating loading indicators, spinners, progress bars, or skeleton screens to communicate system status554skills.sh installs

forms-inputsdylantarre/animation-principlesUse when animating form fields, inputs, textareas, selects, or interactive form elements to improve usability and feedback553skills.sh installs

secondary-action-masterydylantarre/animation-principlesUse when enriching primary animations, adding supporting details, creating depth in motion, or making scenes feel alive without distracting from main action.551skills.sh installs

social-mediadylantarre/animation-principlesUse when designing animations for social platforms, messaging apps, content sharing, or community features551skills.sh installs

attention-managementdylantarre/animation-principlesUse when wrong elements get attention, important content is missed, or visual hierarchy is broken by animation550skills.sh installs

brand-strategistdylantarre/animation-principlesUse when defining brand motion identity, creating animation guidelines for brand expression, or aligning animation with brand personality.548skills.sh installs

exit-animationsdylantarre/animation-principlesUse when elements need to leave the screen - closing modals, dismissing notifications, removing items, page transitions out, or any "leaving view" animation.547skills.sh installs

exaggerated-claritydylantarre/animation-principlesUse when motion needs to read clearly and powerfully—broad comedy, action highlights, important story beats, or any moment that must unmistakably communicate to546skills.sh installs

accordions-dropdownsdylantarre/animation-principlesUse when animating accordions, collapsibles, dropdowns, or expand/collapse elements for smooth reveal transitions545skills.sh installs

straight-ahead-pose-masterydylantarre/animation-principlesUse when planning animation workflows, deciding between spontaneous vs controlled approaches, or balancing creative freedom with structural precision.543skills.sh installs

timing-calibrationdylantarre/animation-principlesUse when animation speed feels wrong—too fast, too slow, or inconsistent543skills.sh installs

continuous-loopsdylantarre/animation-principlesUse when creating ongoing animations - loading spinners, pulsing indicators, ambient motion, background effects, or any animation that repeats indefinitely.542skills.sh installs

lists-gridsdylantarre/animation-principlesUse when animating lists, grids, tables, or collections of items to create smooth ordering, filtering, and loading states542skills.sh installs

urgency-actiondylantarre/animation-principlesUse when creating animations that prompt immediate user action, highlight time-sensitivity, or drive conversions.542skills.sh installs

user-feedback-claritydylantarre/animation-principlesUse when users don't notice feedback, miss state changes, or can't tell if their action worked542skills.sh installs

power-confidencedylantarre/animation-principlesUse when creating animations that convey strength, authority, or bold confidence in brand and product.540skills.sh installs

100

feedback-indicatorsdylantarre/animation-principlesUse when confirming user actions - success checkmarks, error alerts, form validation, save confirmations, or any animation acknowledging what the user did.539skills.sh installs

101

universal-patternsdylantarre/animation-principlesUse when creating any animation type - provides foundational timing, easing, and principle application that applies to all motion in interfaces.539skills.sh installs

102

continuous-infinitedylantarre/animation-principlesUse when building ongoing loop animations - loading states, ambient motion, background effects that run indefinitely without user fatigue535skills.sh installs

103

emotional-disconnectdylantarre/animation-principlesUse when animation feels wrong, creates unintended emotional response, or mismatches context534skills.sh installs

104

problem-diagnosisdylantarre/animation-principlesUse when animation "feels wrong" but you can't pinpoint why—debugging floaty movement, stiff characters, unclear action, or any motion that isn't working and ne534skills.sh installs

105

responsive-adaptivedylantarre/animation-principlesUse when building context-dependent animations - duration that changes based on device, distance, user preference, or interaction context534skills.sh installs

106

state-changesdylantarre/animation-principlesUse when elements transform in place - toggle switches, expanding accordions, checkbox animations, button states, or any transformation without entering/exiting534skills.sh installs

107

popmotiondylantarre/animation-principlesUse when implementing Disney's 12 animation principles with Popmotion's functional animation library533skills.sh installs

108

professionalism-credibilitydylantarre/animation-principlesUse when creating animations for business contexts that require seriousness, competence, and trustworthy presentation.533skills.sh installs

109

comfort-safetydylantarre/animation-principlesUse when creating animations that reassure users, reduce anxiety, or communicate protection and security.532skills.sh installs

110

implementation-debuggingdylantarre/animation-principlesUse when animation doesn't work as expected, has bugs, or behaves inconsistently532skills.sh installs

111

technical-constraintsdylantarre/animation-principlesUse when animation is limited by browser support, platform capabilities, or technical requirements532skills.sh installs

112

friendliness-approachabilitydylantarre/animation-principlesUse when creating animations that feel warm, welcoming, and make users feel comfortable engaging.531skills.sh installs

113

motion-sicknessdylantarre/animation-principlesUse when animation causes dizziness, nausea, disorientation, or vestibular discomfort531skills.sh installs

114

large-500-800msdylantarre/animation-principlesUse when building larger movement animations between 500-800ms - hero transitions, complex reveals, animations that tell a story and deserve attention530skills.sh installs

115

medium-300-500msdylantarre/animation-principlesUse when building standard animations between 300-500ms - page transitions, significant UI changes, animated illustrations that need clear communication530skills.sh installs

116

universal-industrydylantarre/animation-principlesUse when designing animations for any industry or when industry-specific guidelines do not apply530skills.sh installs

117

trust-reliabilitydylantarre/animation-principlesUse when creating animations that build user confidence, establish credibility, and communicate dependability.529skills.sh installs

118

deliberate-1200-2000msdylantarre/animation-principlesUse when building slow intentional animations between 1200-2000ms - app intros, loading sequences, storytelling moments that create emotional resonance528skills.sh installs

119

product-managerdylantarre/animation-principlesUse when prioritizing animation features, building motion roadmaps, or when a PM needs to understand the business value of animation principles.528skills.sh installs

120

small-200-300msdylantarre/animation-principlesUse when building small transitions between 200-300ms - modal appearances, card expansions, navigation transitions that users consciously perceive528skills.sh installs

121

universal-elementsdylantarre/animation-principlesUse when animating any UI element not covered by specific skills, or when applying general animation principles across multiple element types528skills.sh installs

122

universal-practitionerdylantarre/animation-principlesUse when applying animation principles in any context, for any role, or when a general understanding of Disney's 12 principles is needed.527skills.sh installs

123

universal-solutionsdylantarre/animation-principlesUse when facing any animation problem as a comprehensive diagnostic framework527skills.sh installs

124

universal-tooldylantarre/animation-principlesUse when implementing Disney's 12 animation principles with any animation tool or framework527skills.sh installs

125

accessibility-issuesdylantarre/animation-principlesUse when animation excludes users with vestibular disorders, cognitive disabilities, or assistive technology needs525skills.sh installs

126

universal-fallbackdylantarre/animation-principlesUse when the animation domain is unclear or spans multiple contexts—provides general-purpose Disney animation principle guidance.525skills.sh installs

127

instant-0-100msdylantarre/animation-principlesUse when building instantaneous UI feedback under 100ms - button presses, toggles, state changes that feel immediate and responsive524skills.sh installs

128

ux-frictiondylantarre/animation-principlesUse when animation causes user confusion, delays task completion, or creates frustration524skills.sh installs

129

media-publishingdylantarre/animation-principlesUse when designing animations for news sites, content platforms, publishing apps, or media consumption experiences521skills.sh installs

130

slow-800-1200msdylantarre/animation-principlesUse when building deliberate motion between 800-1200ms - dramatic reveals, loading sequences, storytelling moments where users should pause and absorb520skills.sh installs

131

universal-mindsetdylantarre/animation-principlesUse when approaching any animation task—establishing foundational thinking patterns, teaching animation principles, or when none of the specialized thinking sty519skills.sh installs

132

universal-timingdylantarre/animation-principlesUse when learning animation timing fundamentals - principles that apply regardless of duration, the foundational rules that scale across all time ranges519skills.sh installs

133

Animation Principles - Absolute Beginnerdylantarre/animation-principlesUse when someone has never heard of animation principles, needs the simplest explanation possible, or is a complete newcomer to animation0skills.sh installs

134

Animation Principles - Advanceddylantarre/animation-principlesUse when someone has strong command of animation principles and seeks deeper understanding of subtle applications, edge cases, and stylistic variations0skills.sh installs

135

Animation Principles - Deep Divedylantarre/animation-principlesUse when someone needs comprehensive reference material on animation principles with technical depth and extensive context0skills.sh installs

136

Animation Principles - Expertdylantarre/animation-principlesUse when someone has mastery of animation principles and wants to explore intentional rule-breaking, stylistic innovation, and pushing creative boundaries0skills.sh installs

137

Animation Principles - Intermediatedylantarre/animation-principlesUse when someone has working knowledge of animation principles and needs guidance on combining them effectively in more complex animations0skills.sh installs

138

Animation Principles - Masterdylantarre/animation-principlesUse when someone seeks the philosophical foundation of animation principles, wants to understand why they work, or is at a teaching/mentorship level0skills.sh installs

139

animation-principles---novicedylantarre/animation-principlesUse when someone has basic awareness of animation principles and wants to start applying them in simple projects0skills.sh installs

140

Animation Principles - Quick Startdylantarre/animation-principlesUse when someone needs a rapid overview of all 12 animation principles in under 5 minutes0skills.sh installs

141

Animation Principles - Refresherdylantarre/animation-principlesUse when an experienced animator needs a quick reminder of the 12 principles without basic explanations0skills.sh installs

142

Animation Principles - Teaching Othersdylantarre/animation-principlesUse when someone needs to explain animation principles to students, mentees, or team members at various skill levels0skills.sh installs

143

Animation Principles - Troubleshootingdylantarre/animation-principlesUse when animation feels wrong and you need to diagnose which principle is failing or being misapplied0skills.sh installs

144

Animation Principles - Universal Referencedylantarre/animation-principlesUse when discussing animation principles with users of unknown skill level, or when providing a balanced reference that works for any experience level0skills.sh installs