--- title: "dylantarre/animation-principles skills · skilld" canonical_url: "https://skilld.dev/gh/dylantarre/animation-principles" meta: description: "Disney's 12 Animation Principles - Claude Code Skill Marketplace" "og:description": "Disney's 12 Animation Principles - Claude Code Skill Marketplace" "og:title": "dylantarre/animation-principles skills" "twitter:description": "Disney's 12 Animation Principles - Claude Code Skill Marketplace" "twitter:title": "dylantarre/animation-principles skills" --- ` [All skills](https://skilld.dev/skills) [![dylantarre avatar](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Fdylantarre.png)](https://skilld.dev/gh/dylantarre) # **dylantarre/animation-principles** Disney's 12 Animation Principles - Claude Code Skill Marketplace main Updated 9 months ago [GitHub](https://github.com/dylantarre/animation-principles) ![README badge for dylantarre/animation-principles](https://skilld.dev/b/dylantarre/animation-principles?theme=light&label=0) ## Repository statistics - Indexed skills **144** - Skill groups **12** - GitHub stars **92** - Forks **12** ## Skills by folder 144 total Sort skills ### **01 by domain** 12 skills [

**/3d-spatial**

Use when working in Blender, Unity 3D, Unreal Engine, Cinema 4D, VR/AR applications, or any three-dimensional animation work. /3d-spatial](https://skilld.dev/gh/dylantarre/animation-principles/3d-spatial) Updated 9 months ago [

**/accessible-motion**

Use when implementing reduced motion alternatives, vestibular-safe animations, WCAG compliance, or designing for users with motion sensitivity. /accessible-motion](https://skilld.dev/gh/dylantarre/animation-principles/accessible-motion) Updated 9 months ago [

**/brand-marketing**

Use when creating commercial animations, advertising motion, brand identity animation, logo reveals, or marketing video content. /brand-marketing](https://skilld.dev/gh/dylantarre/animation-principles/brand-marketing) Updated 9 months ago [

**/data-visualization**

Use when animating charts, graphs, dashboards, data transitions, or any information visualization work. /data-visualization](https://skilld.dev/gh/dylantarre/animation-principles/data-visualization) Updated 9 months ago [

**/game-development**

Use when implementing game animations, player feedback, character movement, or interactive entertainment in Unity, Unreal, or other game engines. /game-development](https://skilld.dev/gh/dylantarre/animation-principles/game-development) Updated 9 months ago [

**/micro-interactions**

Use when designing small UI feedback moments like button states, toggles, form validation, loading indicators, or notification badges. /micro-interactions](https://skilld.dev/gh/dylantarre/animation-principles/micro-interactions) Updated 9 months ago [

**/mobile-touch**

Use when designing iOS/Android gestures, haptic feedback, touch interactions, or native mobile animations. /mobile-touch](https://skilld.dev/gh/dylantarre/animation-principles/mobile-touch) Updated 9 months ago [

**/page-transitions**

Use when implementing route changes, view transitions, modal opens/closes, or navigation animation in web and mobile applications. /page-transitions](https://skilld.dev/gh/dylantarre/animation-principles/page-transitions) Updated 9 months ago [

**/presentations**

Use when creating Keynote, PowerPoint, Google Slides animations, or any presentation motion design work. /presentations](https://skilld.dev/gh/dylantarre/animation-principles/presentations) Updated 9 months ago [

**/universal-fallback**

Use when the animation domain is unclear or spans multiple contexts—provides general-purpose Disney animation principle guidance. /universal-fallback](https://skilld.dev/gh/dylantarre/animation-principles/universal-fallback) Updated 9 months ago [

**/video-motion-graphics**

Use when creating After Effects compositions, Premiere Pro motion, video titles, explainer videos, or broadcast motion graphics. /video-motion-graphics](https://skilld.dev/gh/dylantarre/animation-principles/video-motion-graphics) Updated 9 months ago [

**/web-motion-design**

Use when building CSS animations, JavaScript transitions, React/Vue motion, or any browser-based animation work. /web-motion-design](https://skilld.dev/gh/dylantarre/animation-principles/web-motion-design) Updated 9 months ago ### **02 by thinking style** 12 skills [

**/anticipation-payoff**

Use when designing action sequences, gags, reveals, or any motion that needs setup before delivery—preparing audiences for what's coming and maximizing impact. /anticipation-payoff](https://skilld.dev/gh/dylantarre/animation-principles/anticipation-payoff) Updated 9 months ago [

**/attention-direction**

Use when controlling where the audience looks—composing shots, choreographing action, revealing information, or any situation requiring clear visual hierarchy and focus management. /attention-direction](https://skilld.dev/gh/dylantarre/animation-principles/attention-direction) Updated 9 months ago [

**/character-appeal**

Use when creating or animating characters that need to connect with audiences—hero protagonists, memorable villains, lovable sidekicks, or any figure that must have personality and presence. /character-appeal](https://skilld.dev/gh/dylantarre/animation-principles/character-appeal) Updated 9 months ago [

**/emotional-narrative**

Use when animation needs to convey feeling, tell a story, or connect emotionally—character moments, dramatic beats, or any motion that should make the audience care. /emotional-narrative](https://skilld.dev/gh/dylantarre/animation-principles/emotional-narrative) Updated 9 months ago [

**/exaggerated-clarity**

Use when motion needs to read clearly and powerfully—broad comedy, action highlights, important story beats, or any moment that must unmistakably communicate to the audience. /exaggerated-clarity](https://skilld.dev/gh/dylantarre/animation-principles/exaggerated-clarity) Updated 9 months ago [

**/naturalistic-motion**

Use when animation should feel organic and lifelike—creature animation, realistic characters, nature elements, or any motion that needs to breathe with authentic living quality. /naturalistic-motion](https://skilld.dev/gh/dylantarre/animation-principles/naturalistic-motion) Updated 9 months ago [

**/physics-intuition**

Use when motion needs to feel physically grounded—objects falling, characters jumping, things colliding, or any element that should obey believable weight and momentum. /physics-intuition](https://skilld.dev/gh/dylantarre/animation-principles/physics-intuition) Updated 9 months ago [

**/problem-diagnosis**

Use 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 needs systematic troubleshooting. /problem-diagnosis](https://skilld.dev/gh/dylantarre/animation-principles/problem-diagnosis) Updated 9 months ago [

**/rhythm-pacing**

Use when animation needs musical flow—dance sequences, action choreography, comedic timing, scene pacing, or any motion that should feel rhythmic and well-composed over time. /rhythm-pacing](https://skilld.dev/gh/dylantarre/animation-principles/rhythm-pacing) Updated 9 months ago [

**/spatial-thinking**

Use when animation involves depth, perspective, volume, or three-dimensional awareness—camera moves, character positioning, environmental interaction, or maintaining consistent spatial relationships. /spatial-thinking](https://skilld.dev/gh/dylantarre/animation-principles/spatial-thinking) Updated 9 months ago [

**/timing-mastery**

Use when determining how fast or slow motion should be—pacing action sequences, dramatic pauses, comedic beats, or any situation where the duration of movement matters. /timing-mastery](https://skilld.dev/gh/dylantarre/animation-principles/timing-mastery) Updated 9 months ago [

**/universal-mindset**

Use when approaching any animation task—establishing foundational thinking patterns, teaching animation principles, or when none of the specialized thinking styles quite fit the situation. /universal-mindset](https://skilld.dev/gh/dylantarre/animation-principles/universal-mindset) Updated 9 months ago ### **03 by role persona** 12 skills [

**/accessibility-advocate**

Use when designing inclusive animations, addressing vestibular disorders and motion sensitivity, or ensuring animation accessibility compliance. /accessibility-advocate](https://skilld.dev/gh/dylantarre/animation-principles/accessibility-advocate) Updated 9 months ago [

**/animator-traditional**

Use when creating hand-drawn or classical animation, working with frame-by-frame techniques, or applying Disney principles in their original artistic context. /animator-traditional](https://skilld.dev/gh/dylantarre/animation-principles/animator-traditional) Updated 9 months ago [

**/brand-strategist**

Use when defining brand motion identity, creating animation guidelines for brand expression, or aligning animation with brand personality. /brand-strategist](https://skilld.dev/gh/dylantarre/animation-principles/brand-strategist) Updated 9 months ago [

**/creative-director**

Use when overseeing animation vision, setting creative direction for motion, or guiding teams on animation quality and consistency. /creative-director](https://skilld.dev/gh/dylantarre/animation-principles/creative-director) Updated 9 months ago [

**/educator-teacher**

Use when creating educational content, explaining concepts through animation, or when teaching animation principles to students. /educator-teacher](https://skilld.dev/gh/dylantarre/animation-principles/educator-teacher) Updated 9 months ago [

**/filmmaker**

Use when creating cinematic sequences, narrative animations, or when applying animation principles to video storytelling and visual narrative. /filmmaker](https://skilld.dev/gh/dylantarre/animation-principles/filmmaker) Updated 9 months ago [

**/frontend-developer**

Use when implementing animations in code, building UI transitions, or when a developer needs practical animation guidance for web/mobile applications. /frontend-developer](https://skilld.dev/gh/dylantarre/animation-principles/frontend-developer) Updated 9 months ago [

**/game-designer**

Use when designing game feel, player feedback systems, or when creating animations that enhance gameplay and player satisfaction. /game-designer](https://skilld.dev/gh/dylantarre/animation-principles/game-designer) Updated 9 months ago [

**/motion-designer**

Use when designing visual motion systems, creating animation specifications, or when a designer needs guidance on crafting beautiful, meaningful movement. /motion-designer](https://skilld.dev/gh/dylantarre/animation-principles/motion-designer) Updated 9 months ago [

**/product-manager**

Use when prioritizing animation features, building motion roadmaps, or when a PM needs to understand the business value of animation principles. /product-manager](https://skilld.dev/gh/dylantarre/animation-principles/product-manager) Updated 9 months ago [

**/universal-practitioner**

Use when applying animation principles in any context, for any role, or when a general understanding of Disney's 12 principles is needed. /universal-practitioner](https://skilld.dev/gh/dylantarre/animation-principles/universal-practitioner) Updated 9 months ago [

**/ux-researcher**

Use when evaluating animation usability, conducting motion studies, or when researching how animation affects user perception and task completion. /ux-researcher](https://skilld.dev/gh/dylantarre/animation-principles/ux-researcher) Updated 9 months ago ### **04 by skill level** 12 skills [

**/absolute-beginner**

Use when someone has never heard of animation principles, needs the simplest explanation possible, or is a complete newcomer to animation /absolute-beginner](https://skilld.dev/gh/dylantarre/animation-principles/absolute-beginner) Updated 9 months ago [

**/advanced**

Use when someone has strong command of animation principles and seeks deeper understanding of subtle applications, edge cases, and stylistic variations /advanced](https://skilld.dev/gh/dylantarre/animation-principles/advanced) Updated 9 months ago [

**/deep-dive**

Use when someone needs comprehensive reference material on animation principles with technical depth and extensive context /deep-dive](https://skilld.dev/gh/dylantarre/animation-principles/deep-dive) Updated 9 months ago [

**/expert**

Use when someone has mastery of animation principles and wants to explore intentional rule-breaking, stylistic innovation, and pushing creative boundaries /expert](https://skilld.dev/gh/dylantarre/animation-principles/expert) Updated 9 months ago [

**/intermediate**

Use when someone has working knowledge of animation principles and needs guidance on combining them effectively in more complex animations /intermediate](https://skilld.dev/gh/dylantarre/animation-principles/intermediate) Updated 9 months ago [

**/master**

Use when someone seeks the philosophical foundation of animation principles, wants to understand why they work, or is at a teaching/mentorship level /master](https://skilld.dev/gh/dylantarre/animation-principles/master) Updated 9 months ago [

**/novice**

Use when someone has basic awareness of animation principles and wants to start applying them in simple projects /novice](https://skilld.dev/gh/dylantarre/animation-principles/novice) Updated 9 months ago [

**/quick-start**

Use when someone needs a rapid overview of all 12 animation principles in under 5 minutes /quick-start](https://skilld.dev/gh/dylantarre/animation-principles/quick-start) Updated 9 months ago [

**/refresher**

Use when an experienced animator needs a quick reminder of the 12 principles without basic explanations /refresher](https://skilld.dev/gh/dylantarre/animation-principles/refresher) Updated 9 months ago [

**/teaching-others**

Use when someone needs to explain animation principles to students, mentees, or team members at various skill levels /teaching-others](https://skilld.dev/gh/dylantarre/animation-principles/teaching-others) Updated 9 months ago [

**/troubleshooting**

Use when animation feels wrong and you need to diagnose which principle is failing or being misapplied /troubleshooting](https://skilld.dev/gh/dylantarre/animation-principles/troubleshooting) Updated 9 months ago [

**/universal-reference**

Use when discussing animation principles with users of unknown skill level, or when providing a balanced reference that works for any experience level /universal-reference](https://skilld.dev/gh/dylantarre/animation-principles/universal-reference) Updated 9 months ago ### **05 by animation type** 12 skills [

**/attention-grabbers**

Use when drawing user focus - notification badges, new feature highlights, error callouts, promotional banners, or any animation meant to attract attention. /attention-grabbers](https://skilld.dev/gh/dylantarre/animation-principles/attention-grabbers) Updated 9 months ago [

**/continuous-loops**

Use when creating ongoing animations - loading spinners, pulsing indicators, ambient motion, background effects, or any animation that repeats indefinitely. /continuous-loops](https://skilld.dev/gh/dylantarre/animation-principles/continuous-loops) Updated 9 months ago [

**/entrance-animations**

Use when elements need to appear on screen - page loads, modals opening, items being added, content reveals, or any "coming into view" animation. /entrance-animations](https://skilld.dev/gh/dylantarre/animation-principles/entrance-animations) Updated 9 months ago [

**/exit-animations**

Use when elements need to leave the screen - closing modals, dismissing notifications, removing items, page transitions out, or any "leaving view" animation. /exit-animations](https://skilld.dev/gh/dylantarre/animation-principles/exit-animations) Updated 9 months ago [

**/feedback-indicators**

Use when confirming user actions - success checkmarks, error alerts, form validation, save confirmations, or any animation acknowledging what the user did. /feedback-indicators](https://skilld.dev/gh/dylantarre/animation-principles/feedback-indicators) Updated 9 months ago [

**/gesture-responses**

Use when responding to touch or click interactions - button presses, drag feedback, swipe responses, tap ripples, or any direct manipulation animation. /gesture-responses](https://skilld.dev/gh/dylantarre/animation-principles/gesture-responses) Updated 9 months ago [

**/hover-interactions**

Use when creating mouse hover effects - button highlights, card lifts, link underlines, image zooms, or any pointer-triggered animation. /hover-interactions](https://skilld.dev/gh/dylantarre/animation-principles/hover-interactions) Updated 9 months ago [

**/loading-states**

Use when indicating progress or waiting - spinners, progress bars, skeleton screens, shimmer effects, or any animation showing the system is working. /loading-states](https://skilld.dev/gh/dylantarre/animation-principles/loading-states) Updated 9 months ago [

**/scroll-animations**

Use when triggering animations on scroll - reveal effects, parallax, sticky headers, progress indicators, or any scroll-linked motion. /scroll-animations](https://skilld.dev/gh/dylantarre/animation-principles/scroll-animations) Updated 9 months ago [

**/state-changes**

Use when elements transform in place - toggle switches, expanding accordions, checkbox animations, button states, or any transformation without entering/exiting. /state-changes](https://skilld.dev/gh/dylantarre/animation-principles/state-changes) Updated 9 months ago [

**/transition-sequences**

Use when orchestrating multi-step animations - page transitions, onboarding flows, wizard steps, complex reveals, or any choreographed animation sequence. /transition-sequences](https://skilld.dev/gh/dylantarre/animation-principles/transition-sequences) Updated 9 months ago [

**/universal-patterns**

Use when creating any animation type - provides foundational timing, easing, and principle application that applies to all motion in interfaces. /universal-patterns](https://skilld.dev/gh/dylantarre/animation-principles/universal-patterns) Updated 9 months ago ### **06 by emotional outcome** 12 skills [

**/calm-relaxation**

Use when creating animations that soothe users, reduce anxiety, or create peaceful, meditative experiences. /calm-relaxation](https://skilld.dev/gh/dylantarre/animation-principles/calm-relaxation) Updated 9 months ago [

**/comfort-safety**

Use when creating animations that reassure users, reduce anxiety, or communicate protection and security. /comfort-safety](https://skilld.dev/gh/dylantarre/animation-principles/comfort-safety) Updated 9 months ago [

**/elegance-sophistication**

Use when creating animations that convey luxury, refinement, or premium brand experiences. /elegance-sophistication](https://skilld.dev/gh/dylantarre/animation-principles/elegance-sophistication) Updated 9 months ago [

**/excitement-energy**

Use when creating animations that generate enthusiasm, build anticipation, or create high-energy experiences. /excitement-energy](https://skilld.dev/gh/dylantarre/animation-principles/excitement-energy) Updated 9 months ago [

**/friendliness-approachability**

Use when creating animations that feel warm, welcoming, and make users feel comfortable engaging. /friendliness-approachability](https://skilld.dev/gh/dylantarre/animation-principles/friendliness-approachability) Updated 9 months ago [

**/joy-delight**

Use when creating animations that evoke happiness, surprise, or delightful moments in the user experience. /joy-delight](https://skilld.dev/gh/dylantarre/animation-principles/joy-delight) Updated 9 months ago [

**/playfulness-fun**

Use when creating animations that entertain, engage with humor, or create lighthearted interactive experiences. /playfulness-fun](https://skilld.dev/gh/dylantarre/animation-principles/playfulness-fun) Updated 9 months ago [

**/power-confidence**

Use when creating animations that convey strength, authority, or bold confidence in brand and product. /power-confidence](https://skilld.dev/gh/dylantarre/animation-principles/power-confidence) Updated 9 months ago [

**/professionalism-credibility**

Use when creating animations for business contexts that require seriousness, competence, and trustworthy presentation. /professionalism-credibility](https://skilld.dev/gh/dylantarre/animation-principles/professionalism-credibility) Updated 9 months ago [

**/trust-reliability**

Use when creating animations that build user confidence, establish credibility, and communicate dependability. /trust-reliability](https://skilld.dev/gh/dylantarre/animation-principles/trust-reliability) Updated 9 months ago [

**/universal-emotion**

Use when you need to achieve any emotional outcome through animation—provides a framework for mapping Disney principles to any target emotion. /universal-emotion](https://skilld.dev/gh/dylantarre/animation-principles/universal-emotion) Updated 9 months ago [

**/urgency-action**

Use when creating animations that prompt immediate user action, highlight time-sensitivity, or drive conversions. /urgency-action](https://skilld.dev/gh/dylantarre/animation-principles/urgency-action) Updated 9 months ago ### **07 by ui element** 12 skills [

**/accordions-dropdowns**

Use when animating accordions, collapsibles, dropdowns, or expand/collapse elements for smooth reveal transitions /accordions-dropdowns](https://skilld.dev/gh/dylantarre/animation-principles/accordions-dropdowns) Updated 9 months ago [

**/buttons-ctas**

Use when animating buttons, CTAs, or clickable action elements to create satisfying, responsive interactions /buttons-ctas](https://skilld.dev/gh/dylantarre/animation-principles/buttons-ctas) Updated 9 months ago [

**/cards-containers**

Use when animating cards, panels, tiles, or container elements to create depth and interactivity /cards-containers](https://skilld.dev/gh/dylantarre/animation-principles/cards-containers) Updated 9 months ago [

**/carousels-sliders**

Use when animating carousels, sliders, image galleries, or horizontally scrolling content for smooth navigation /carousels-sliders](https://skilld.dev/gh/dylantarre/animation-principles/carousels-sliders) Updated 9 months ago [

**/forms-inputs**

Use when animating form fields, inputs, textareas, selects, or interactive form elements to improve usability and feedback /forms-inputs](https://skilld.dev/gh/dylantarre/animation-principles/forms-inputs) Updated 9 months ago [

**/icons-badges**

Use when animating icons, badges, avatars, status indicators, or small visual elements to add personality and feedback /icons-badges](https://skilld.dev/gh/dylantarre/animation-principles/icons-badges) Updated 9 months ago [

**/lists-grids**

Use when animating lists, grids, tables, or collections of items to create smooth ordering, filtering, and loading states /lists-grids](https://skilld.dev/gh/dylantarre/animation-principles/lists-grids) Updated 9 months ago [

**/loaders-spinners**

Use when creating loading indicators, spinners, progress bars, or skeleton screens to communicate system status /loaders-spinners](https://skilld.dev/gh/dylantarre/animation-principles/loaders-spinners) Updated 9 months ago [

**/modals-dialogs**

Use when animating modals, dialogs, popovers, or overlay content to create smooth entrances and exits /modals-dialogs](https://skilld.dev/gh/dylantarre/animation-principles/modals-dialogs) Updated 9 months ago [

**/navigation-menus**

Use when animating navigation bars, menus, sidebars, or wayfinding elements to create smooth, intuitive transitions /navigation-menus](https://skilld.dev/gh/dylantarre/animation-principles/navigation-menus) Updated 9 months ago [

**/notifications-toasts**

Use when animating notifications, toasts, alerts, snackbars, or system messages to grab attention appropriately /notifications-toasts](https://skilld.dev/gh/dylantarre/animation-principles/notifications-toasts) Updated 9 months ago [

**/universal-elements**

Use when animating any UI element not covered by specific skills, or when applying general animation principles across multiple element types /universal-elements](https://skilld.dev/gh/dylantarre/animation-principles/universal-elements) Updated 9 months ago ### **08 by industry** 12 skills [

**/e-commerce-retail**

Use when designing animations for shopping apps, product catalogs, checkout flows, or retail experiences /e-commerce-retail](https://skilld.dev/gh/dylantarre/animation-principles/e-commerce-retail) Updated 9 months ago [

**/education-learning**

Use when designing animations for educational platforms, e-learning, tutoring apps, or skill-building experiences /education-learning](https://skilld.dev/gh/dylantarre/animation-principles/education-learning) Updated 9 months ago [

**/enterprise-b2b**

Use when designing animations for enterprise software, B2B platforms, admin dashboards, or corporate applications /enterprise-b2b](https://skilld.dev/gh/dylantarre/animation-principles/enterprise-b2b) Updated 9 months ago [

**/fintech-banking**

Use when designing animations for banking apps, payment systems, investment platforms, or financial dashboards /fintech-banking](https://skilld.dev/gh/dylantarre/animation-principles/fintech-banking) Updated 9 months ago [

**/fitness-wellness**

Use when designing animations for fitness apps, wellness platforms, workout trackers, or meditation experiences /fitness-wellness](https://skilld.dev/gh/dylantarre/animation-principles/fitness-wellness) Updated 9 months ago [

**/gaming-entertainment**

Use when designing animations for gaming apps, streaming platforms, entertainment portals, or interactive media /gaming-entertainment](https://skilld.dev/gh/dylantarre/animation-principles/gaming-entertainment) Updated 9 months ago [

**/healthcare-medical**

Use when designing animations for medical apps, patient portals, telehealth, or health tracking interfaces /healthcare-medical](https://skilld.dev/gh/dylantarre/animation-principles/healthcare-medical) Updated 9 months ago [

**/media-publishing**

Use when designing animations for news sites, content platforms, publishing apps, or media consumption experiences /media-publishing](https://skilld.dev/gh/dylantarre/animation-principles/media-publishing) Updated 9 months ago [

**/saas-productivity**

Use when designing animations for business tools, project management, collaboration software, or productivity apps /saas-productivity](https://skilld.dev/gh/dylantarre/animation-principles/saas-productivity) Updated 9 months ago [

**/social-media**

Use when designing animations for social platforms, messaging apps, content sharing, or community features /social-media](https://skilld.dev/gh/dylantarre/animation-principles/social-media) Updated 9 months ago [

**/travel-hospitality**

Use when designing animations for travel booking, hospitality apps, tourism platforms, or vacation planning experiences /travel-hospitality](https://skilld.dev/gh/dylantarre/animation-principles/travel-hospitality) Updated 9 months ago [

**/universal-industry**

Use when designing animations for any industry or when industry-specific guidelines do not apply /universal-industry](https://skilld.dev/gh/dylantarre/animation-principles/universal-industry) Updated 9 months ago ### **09 by tool framework** 12 skills [

**/after-effects**

Use when implementing Disney's 12 animation principles in Adobe After Effects /after-effects](https://skilld.dev/gh/dylantarre/animation-principles/after-effects) Updated 9 months ago [

**/anime-js**

Use when implementing Disney's 12 animation principles with Anime.js library /anime-js](https://skilld.dev/gh/dylantarre/animation-principles/anime-js) Updated 9 months ago [

**/css-native**

Use when implementing Disney's 12 animation principles with pure CSS animations and transitions /css-native](https://skilld.dev/gh/dylantarre/animation-principles/css-native) Updated 9 months ago [

**/figma-prototyping**

Use when implementing Disney's 12 animation principles in Figma prototypes and Smart Animate /figma-prototyping](https://skilld.dev/gh/dylantarre/animation-principles/figma-prototyping) Updated 9 months ago [

**/framer-motion**

Use when implementing Disney's 12 animation principles with Framer Motion in React applications /framer-motion](https://skilld.dev/gh/dylantarre/animation-principles/framer-motion) Updated 9 months ago [

**/gsap-greensock**

Use when implementing Disney's 12 animation principles with GSAP (GreenSock Animation Platform) /gsap-greensock](https://skilld.dev/gh/dylantarre/animation-principles/gsap-greensock) Updated 9 months ago [

**/lottie-bodymovin**

Use when implementing Disney's 12 animation principles with Lottie animations exported from After Effects /lottie-bodymovin](https://skilld.dev/gh/dylantarre/animation-principles/lottie-bodymovin) Updated 9 months ago [

**/motion-one**

Use when implementing Disney's 12 animation principles with Motion One (modern, lightweight animation library) /motion-one](https://skilld.dev/gh/dylantarre/animation-principles/motion-one) Updated 9 months ago [

**/popmotion**

Use when implementing Disney's 12 animation principles with Popmotion's functional animation library /popmotion](https://skilld.dev/gh/dylantarre/animation-principles/popmotion) Updated 9 months ago [

**/react-spring**

Use when implementing Disney's 12 animation principles with React Spring's physics-based animations /react-spring](https://skilld.dev/gh/dylantarre/animation-principles/react-spring) Updated 9 months ago [

**/rive-animations**

Use when implementing Disney's 12 animation principles with Rive interactive animations /rive-animations](https://skilld.dev/gh/dylantarre/animation-principles/rive-animations) Updated 9 months ago [

**/universal-tool**

Use when implementing Disney's 12 animation principles with any animation tool or framework /universal-tool](https://skilld.dev/gh/dylantarre/animation-principles/universal-tool) Updated 9 months ago ### **10 by time scale** 12 skills [

**/continuous-infinite**

Use when building ongoing loop animations - loading states, ambient motion, background effects that run indefinitely without user fatigue /continuous-infinite](https://skilld.dev/gh/dylantarre/animation-principles/continuous-infinite) Updated 9 months ago [

**/deliberate-1200-2000ms**

Use when building slow intentional animations between 1200-2000ms - app intros, loading sequences, storytelling moments that create emotional resonance /deliberate-1200-2000ms](https://skilld.dev/gh/dylantarre/animation-principles/deliberate-1200-2000ms) Updated 9 months ago [

**/dramatic-2000ms-plus**

Use when building extended animation sequences over 2000ms - cinematic intros, story sequences, premium experiences where animation IS the product /dramatic-2000ms-plus](https://skilld.dev/gh/dylantarre/animation-principles/dramatic-2000ms-plus) Updated 9 months ago [

**/instant-0-100ms**

Use when building instantaneous UI feedback under 100ms - button presses, toggles, state changes that feel immediate and responsive /instant-0-100ms](https://skilld.dev/gh/dylantarre/animation-principles/instant-0-100ms) Updated 9 months ago [

**/large-500-800ms**

Use when building larger movement animations between 500-800ms - hero transitions, complex reveals, animations that tell a story and deserve attention /large-500-800ms](https://skilld.dev/gh/dylantarre/animation-principles/large-500-800ms) Updated 9 months ago [

**/medium-300-500ms**

Use when building standard animations between 300-500ms - page transitions, significant UI changes, animated illustrations that need clear communication /medium-300-500ms](https://skilld.dev/gh/dylantarre/animation-principles/medium-300-500ms) Updated 9 months ago [

**/micro-100-200ms**

Use when building micro-interactions between 100-200ms - tooltips appearing, dropdown opens, small feedback animations that feel quick but perceptible /micro-100-200ms](https://skilld.dev/gh/dylantarre/animation-principles/micro-100-200ms) Updated 9 months ago [

**/orchestrated-sequences**

Use when building multi-part animation sequences - staggered reveals, choreographed UI, coordinated motion where multiple elements work together /orchestrated-sequences](https://skilld.dev/gh/dylantarre/animation-principles/orchestrated-sequences) Updated 9 months ago [

**/responsive-adaptive**

Use when building context-dependent animations - duration that changes based on device, distance, user preference, or interaction context /responsive-adaptive](https://skilld.dev/gh/dylantarre/animation-principles/responsive-adaptive) Updated 9 months ago [

**/slow-800-1200ms**

Use when building deliberate motion between 800-1200ms - dramatic reveals, loading sequences, storytelling moments where users should pause and absorb /slow-800-1200ms](https://skilld.dev/gh/dylantarre/animation-principles/slow-800-1200ms) Updated 9 months ago [

**/small-200-300ms**

Use when building small transitions between 200-300ms - modal appearances, card expansions, navigation transitions that users consciously perceive /small-200-300ms](https://skilld.dev/gh/dylantarre/animation-principles/small-200-300ms) Updated 9 months ago [

**/universal-timing**

Use when learning animation timing fundamentals - principles that apply regardless of duration, the foundational rules that scale across all time ranges /universal-timing](https://skilld.dev/gh/dylantarre/animation-principles/universal-timing) Updated 9 months ago ### **11 by principle focus** 12 skills [

**/anticipation-mastery**

Use when designing action sequences, user interactions, state transitions, or any motion that needs telegraphing to feel intentional rather than sudden. /anticipation-mastery](https://skilld.dev/gh/dylantarre/animation-principles/anticipation-mastery) Updated 9 months ago [

**/appeal-mastery**

Use when designing character personalities, creating memorable motion signatures, ensuring animations feel polished, or making visual experiences that audiences want to watch. /appeal-mastery](https://skilld.dev/gh/dylantarre/animation-principles/appeal-mastery) Updated 9 months ago [

**/arc-mastery**

Use when designing motion paths, character movement trajectories, gesture animations, or any motion that should feel natural rather than robotic. /arc-mastery](https://skilld.dev/gh/dylantarre/animation-principles/arc-mastery) Updated 9 months ago [

**/exaggeration-mastery**

Use when determining how far to push motion beyond realism, calibrating animation intensity for context, or making key moments register with audiences. /exaggeration-mastery](https://skilld.dev/gh/dylantarre/animation-principles/exaggeration-mastery) Updated 9 months ago [

**/follow-through-overlapping**

Use when animating multi-part objects, character appendages, fabric, hair, or any motion requiring realistic drag, momentum, and settling behavior. /follow-through-overlapping](https://skilld.dev/gh/dylantarre/animation-principles/follow-through-overlapping) Updated 9 months ago [

**/secondary-action-mastery**

Use when enriching primary animations, adding supporting details, creating depth in motion, or making scenes feel alive without distracting from main action. /secondary-action-mastery](https://skilld.dev/gh/dylantarre/animation-principles/secondary-action-mastery) Updated 9 months ago [

**/slow-in-out-mastery**

Use when designing easing curves, controlling motion pacing, creating natural acceleration/deceleration, or making movements feel physically grounded. /slow-in-out-mastery](https://skilld.dev/gh/dylantarre/animation-principles/slow-in-out-mastery) Updated 9 months ago [

**/solid-drawing-mastery**

Use when creating motion that needs dimensional grounding, designing transforms that maintain object integrity, or ensuring animations feel structurally sound. /solid-drawing-mastery](https://skilld.dev/gh/dylantarre/animation-principles/solid-drawing-mastery) Updated 9 months ago [

**/squash-stretch-mastery**

Use when implementing deformation effects, bounce animations, impact responses, or any motion requiring organic elasticity and weight expression. /squash-stretch-mastery](https://skilld.dev/gh/dylantarre/animation-principles/squash-stretch-mastery) Updated 9 months ago [

**/staging-mastery**

Use when composing scenes, designing layouts, directing user attention, or ensuring a single clear idea is communicated at any given moment. /staging-mastery](https://skilld.dev/gh/dylantarre/animation-principles/staging-mastery) Updated 9 months ago [

**/straight-ahead-pose-mastery**

Use when planning animation workflows, deciding between spontaneous vs controlled approaches, or balancing creative freedom with structural precision. /straight-ahead-pose-mastery](https://skilld.dev/gh/dylantarre/animation-principles/straight-ahead-pose-mastery) Updated 9 months ago [

**/timing-principle-mastery**

Use when determining animation durations, controlling pacing, establishing rhythm, or making motion feel appropriately weighted and emotionally resonant. /timing-principle-mastery](https://skilld.dev/gh/dylantarre/animation-principles/timing-principle-mastery) Updated 9 months ago ### **12 by problem type** 12 skills [

**/accessibility-issues**

Use when animation excludes users with vestibular disorders, cognitive disabilities, or assistive technology needs /accessibility-issues](https://skilld.dev/gh/dylantarre/animation-principles/accessibility-issues) Updated 9 months ago [

**/attention-management**

Use when wrong elements get attention, important content is missed, or visual hierarchy is broken by animation /attention-management](https://skilld.dev/gh/dylantarre/animation-principles/attention-management) Updated 9 months ago [

**/brand-consistency**

Use when animation doesn't match brand personality, feels generic, or clashes with design language /brand-consistency](https://skilld.dev/gh/dylantarre/animation-principles/brand-consistency) Updated 9 months ago [

**/emotional-disconnect**

Use when animation feels wrong, creates unintended emotional response, or mismatches context /emotional-disconnect](https://skilld.dev/gh/dylantarre/animation-principles/emotional-disconnect) Updated 9 months ago [

**/implementation-debugging**

Use when animation doesn't work as expected, has bugs, or behaves inconsistently /implementation-debugging](https://skilld.dev/gh/dylantarre/animation-principles/implementation-debugging) Updated 9 months ago [

**/motion-sickness**

Use when animation causes dizziness, nausea, disorientation, or vestibular discomfort /motion-sickness](https://skilld.dev/gh/dylantarre/animation-principles/motion-sickness) Updated 9 months ago [

**/performance-optimization**

Use when animation runs slow, janky, or causes frame drops /performance-optimization](https://skilld.dev/gh/dylantarre/animation-principles/performance-optimization) Updated 9 months ago [

**/technical-constraints**

Use when animation is limited by browser support, platform capabilities, or technical requirements /technical-constraints](https://skilld.dev/gh/dylantarre/animation-principles/technical-constraints) Updated 9 months ago [

**/timing-calibration**

Use when animation speed feels wrong—too fast, too slow, or inconsistent /timing-calibration](https://skilld.dev/gh/dylantarre/animation-principles/timing-calibration) Updated 9 months ago [

**/universal-solutions**

Use when facing any animation problem as a comprehensive diagnostic framework /universal-solutions](https://skilld.dev/gh/dylantarre/animation-principles/universal-solutions) Updated 9 months ago [

**/user-feedback-clarity**

Use when users don't notice feedback, miss state changes, or can't tell if their action worked /user-feedback-clarity](https://skilld.dev/gh/dylantarre/animation-principles/user-feedback-clarity) Updated 9 months ago [

**/ux-friction**

Use when animation causes user confusion, delays task completion, or creates frustration /ux-friction](https://skilld.dev/gh/dylantarre/animation-principles/ux-friction) Updated 9 months ago ## Add to your README The badge links readers to this page. It shows the skilld mark and no counts, and it follows the reader's light or dark GitHub theme. ` Skill repository on skilld.dev `