/3d-spatial
Use when working in Blender, Unity 3D, Unreal Engine, Cinema 4D, VR/AR applications, or any three-dimensional animation work.
dylantarre/animation-principles
Disney's 12 Animation Principles - Claude Code Skill Marketplace
Repository statistics
Indexed skills
144
Skill groups
12
GitHub stars
92
Forks
12
Skills by folder
144 total01 by domain
12 skills/accessible-motion
Use when implementing reduced motion alternatives, vestibular-safe animations, WCAG compliance, or designing for users with motion sensitivity.
/brand-marketing
Use when creating commercial animations, advertising motion, brand identity animation, logo reveals, or marketing video content.
/data-visualization
Use when animating charts, graphs, dashboards, data transitions, or any information visualization work.
/game-development
Use when implementing game animations, player feedback, character movement, or interactive entertainment in Unity, Unreal, or other game engines.
/micro-interactions
Use when designing small UI feedback moments like button states, toggles, form validation, loading indicators, or notification badges.
/mobile-touch
Use when designing iOS/Android gestures, haptic feedback, touch interactions, or native mobile animations.
/page-transitions
Use when implementing route changes, view transitions, modal opens/closes, or navigation animation in web and mobile applications.
/presentations
Use when creating Keynote, PowerPoint, Google Slides animations, or any presentation motion design work.
/universal-fallback
Use when the animation domain is unclear or spans multiple contexts—provides general-purpose Disney animation principle guidance.
/video-motion-graphics
Use when creating After Effects compositions, Premiere Pro motion, video titles, explainer videos, or broadcast motion graphics.
/web-motion-design
Use when building CSS animations, JavaScript transitions, React/Vue motion, or any browser-based animation work.
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.
/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.
/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.
/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.
/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.
/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.
/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.
/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.
/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.
/spatial-thinking
Use when animation involves depth, perspective, volume, or three-dimensional awareness—camera moves, character positioning, environmental interaction, or maintaining consistent spatial relationships.
/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.
/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.
03 by role persona
12 skills/accessibility-advocate
Use when designing inclusive animations, addressing vestibular disorders and motion sensitivity, or ensuring animation accessibility compliance.
/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.
/brand-strategist
Use when defining brand motion identity, creating animation guidelines for brand expression, or aligning animation with brand personality.
/creative-director
Use when overseeing animation vision, setting creative direction for motion, or guiding teams on animation quality and consistency.
/educator-teacher
Use when creating educational content, explaining concepts through animation, or when teaching animation principles to students.
/filmmaker
Use when creating cinematic sequences, narrative animations, or when applying animation principles to video storytelling and visual narrative.
/frontend-developer
Use when implementing animations in code, building UI transitions, or when a developer needs practical animation guidance for web/mobile applications.
/game-designer
Use when designing game feel, player feedback systems, or when creating animations that enhance gameplay and player satisfaction.
/motion-designer
Use when designing visual motion systems, creating animation specifications, or when a designer needs guidance on crafting beautiful, meaningful movement.
/product-manager
Use when prioritizing animation features, building motion roadmaps, or when a PM needs to understand the business value of animation principles.
/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.
/ux-researcher
Use when evaluating animation usability, conducting motion studies, or when researching how animation affects user perception and task completion.
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
/advanced
Use when someone has strong command of animation principles and seeks deeper understanding of subtle applications, edge cases, and stylistic variations
/deep-dive
Use when someone needs comprehensive reference material on animation principles with technical depth and extensive context
/expert
Use when someone has mastery of animation principles and wants to explore intentional rule-breaking, stylistic innovation, and pushing creative boundaries
/intermediate
Use when someone has working knowledge of animation principles and needs guidance on combining them effectively in more complex animations
/master
Use when someone seeks the philosophical foundation of animation principles, wants to understand why they work, or is at a teaching/mentorship level
/novice
Use when someone has basic awareness of animation principles and wants to start applying them in simple projects
/quick-start
Use when someone needs a rapid overview of all 12 animation principles in under 5 minutes
/refresher
Use when an experienced animator needs a quick reminder of the 12 principles without basic explanations
/teaching-others
Use when someone needs to explain animation principles to students, mentees, or team members at various skill levels
/troubleshooting
Use when animation feels wrong and you need to diagnose which principle is failing or being misapplied
/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
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.
/continuous-loops
Use when creating ongoing animations - loading spinners, pulsing indicators, ambient motion, background effects, or any animation that repeats indefinitely.
/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.
/exit-animations
Use when elements need to leave the screen - closing modals, dismissing notifications, removing items, page transitions out, or any "leaving view" animation.
/feedback-indicators
Use when confirming user actions - success checkmarks, error alerts, form validation, save confirmations, or any animation acknowledging what the user did.
/gesture-responses
Use when responding to touch or click interactions - button presses, drag feedback, swipe responses, tap ripples, or any direct manipulation animation.
/hover-interactions
Use when creating mouse hover effects - button highlights, card lifts, link underlines, image zooms, or any pointer-triggered animation.
/loading-states
Use when indicating progress or waiting - spinners, progress bars, skeleton screens, shimmer effects, or any animation showing the system is working.
/scroll-animations
Use when triggering animations on scroll - reveal effects, parallax, sticky headers, progress indicators, or any scroll-linked motion.
/state-changes
Use when elements transform in place - toggle switches, expanding accordions, checkbox animations, button states, or any transformation without entering/exiting.
/transition-sequences
Use when orchestrating multi-step animations - page transitions, onboarding flows, wizard steps, complex reveals, or any choreographed animation sequence.
/universal-patterns
Use when creating any animation type - provides foundational timing, easing, and principle application that applies to all motion in interfaces.
06 by emotional outcome
12 skills/calm-relaxation
Use when creating animations that soothe users, reduce anxiety, or create peaceful, meditative experiences.
/comfort-safety
Use when creating animations that reassure users, reduce anxiety, or communicate protection and security.
/elegance-sophistication
Use when creating animations that convey luxury, refinement, or premium brand experiences.
/excitement-energy
Use when creating animations that generate enthusiasm, build anticipation, or create high-energy experiences.
/friendliness-approachability
Use when creating animations that feel warm, welcoming, and make users feel comfortable engaging.
/joy-delight
Use when creating animations that evoke happiness, surprise, or delightful moments in the user experience.
/playfulness-fun
Use when creating animations that entertain, engage with humor, or create lighthearted interactive experiences.
/power-confidence
Use when creating animations that convey strength, authority, or bold confidence in brand and product.
/professionalism-credibility
Use when creating animations for business contexts that require seriousness, competence, and trustworthy presentation.
/trust-reliability
Use when creating animations that build user confidence, establish credibility, and communicate dependability.
/universal-emotion
Use when you need to achieve any emotional outcome through animation—provides a framework for mapping Disney principles to any target emotion.
/urgency-action
Use when creating animations that prompt immediate user action, highlight time-sensitivity, or drive conversions.
07 by ui element
12 skills/accordions-dropdowns
Use when animating accordions, collapsibles, dropdowns, or expand/collapse elements for smooth reveal transitions
/buttons-ctas
Use when animating buttons, CTAs, or clickable action elements to create satisfying, responsive interactions
/cards-containers
Use when animating cards, panels, tiles, or container elements to create depth and interactivity
/carousels-sliders
Use when animating carousels, sliders, image galleries, or horizontally scrolling content for smooth navigation
/forms-inputs
Use when animating form fields, inputs, textareas, selects, or interactive form elements to improve usability and feedback
/icons-badges
Use when animating icons, badges, avatars, status indicators, or small visual elements to add personality and feedback
/lists-grids
Use when animating lists, grids, tables, or collections of items to create smooth ordering, filtering, and loading states
/loaders-spinners
Use when creating loading indicators, spinners, progress bars, or skeleton screens to communicate system status
/modals-dialogs
Use when animating modals, dialogs, popovers, or overlay content to create smooth entrances and exits
/navigation-menus
Use when animating navigation bars, menus, sidebars, or wayfinding elements to create smooth, intuitive transitions
/notifications-toasts
Use when animating notifications, toasts, alerts, snackbars, or system messages to grab attention appropriately
/universal-elements
Use when animating any UI element not covered by specific skills, or when applying general animation principles across multiple element types
08 by industry
12 skills/e-commerce-retail
Use when designing animations for shopping apps, product catalogs, checkout flows, or retail experiences
/education-learning
Use when designing animations for educational platforms, e-learning, tutoring apps, or skill-building experiences
/enterprise-b2b
Use when designing animations for enterprise software, B2B platforms, admin dashboards, or corporate applications
/fintech-banking
Use when designing animations for banking apps, payment systems, investment platforms, or financial dashboards
/fitness-wellness
Use when designing animations for fitness apps, wellness platforms, workout trackers, or meditation experiences
/gaming-entertainment
Use when designing animations for gaming apps, streaming platforms, entertainment portals, or interactive media
/healthcare-medical
Use when designing animations for medical apps, patient portals, telehealth, or health tracking interfaces
/media-publishing
Use when designing animations for news sites, content platforms, publishing apps, or media consumption experiences
/saas-productivity
Use when designing animations for business tools, project management, collaboration software, or productivity apps
/social-media
Use when designing animations for social platforms, messaging apps, content sharing, or community features
/travel-hospitality
Use when designing animations for travel booking, hospitality apps, tourism platforms, or vacation planning experiences
/universal-industry
Use when designing animations for any industry or when industry-specific guidelines do not apply
09 by tool framework
12 skills/after-effects
Use when implementing Disney's 12 animation principles in Adobe After Effects
/anime-js
Use when implementing Disney's 12 animation principles with Anime.js library
/css-native
Use when implementing Disney's 12 animation principles with pure CSS animations and transitions
/figma-prototyping
Use when implementing Disney's 12 animation principles in Figma prototypes and Smart Animate
/framer-motion
Use when implementing Disney's 12 animation principles with Framer Motion in React applications
/gsap-greensock
Use when implementing Disney's 12 animation principles with GSAP (GreenSock Animation Platform)
/lottie-bodymovin
Use when implementing Disney's 12 animation principles with Lottie animations exported from After Effects
/motion-one
Use when implementing Disney's 12 animation principles with Motion One (modern, lightweight animation library)
/popmotion
Use when implementing Disney's 12 animation principles with Popmotion's functional animation library
/react-spring
Use when implementing Disney's 12 animation principles with React Spring's physics-based animations
/rive-animations
Use when implementing Disney's 12 animation principles with Rive interactive animations
/universal-tool
Use when implementing Disney's 12 animation principles with any animation tool or framework
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
/deliberate-1200-2000ms
Use when building slow intentional animations between 1200-2000ms - app intros, loading sequences, storytelling moments that create emotional resonance
/dramatic-2000ms-plus
Use when building extended animation sequences over 2000ms - cinematic intros, story sequences, premium experiences where animation IS the product
/instant-0-100ms
Use when building instantaneous UI feedback under 100ms - button presses, toggles, state changes that feel immediate and responsive
/large-500-800ms
Use when building larger movement animations between 500-800ms - hero transitions, complex reveals, animations that tell a story and deserve attention
/medium-300-500ms
Use when building standard animations between 300-500ms - page transitions, significant UI changes, animated illustrations that need clear communication
/micro-100-200ms
Use when building micro-interactions between 100-200ms - tooltips appearing, dropdown opens, small feedback animations that feel quick but perceptible
/orchestrated-sequences
Use when building multi-part animation sequences - staggered reveals, choreographed UI, coordinated motion where multiple elements work together
/responsive-adaptive
Use when building context-dependent animations - duration that changes based on device, distance, user preference, or interaction context
/slow-800-1200ms
Use when building deliberate motion between 800-1200ms - dramatic reveals, loading sequences, storytelling moments where users should pause and absorb
/small-200-300ms
Use when building small transitions between 200-300ms - modal appearances, card expansions, navigation transitions that users consciously perceive
/universal-timing
Use when learning animation timing fundamentals - principles that apply regardless of duration, the foundational rules that scale across all time ranges
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.
/appeal-mastery
Use when designing character personalities, creating memorable motion signatures, ensuring animations feel polished, or making visual experiences that audiences want to watch.
/arc-mastery
Use when designing motion paths, character movement trajectories, gesture animations, or any motion that should feel natural rather than robotic.
/exaggeration-mastery
Use when determining how far to push motion beyond realism, calibrating animation intensity for context, or making key moments register with audiences.
/follow-through-overlapping
Use when animating multi-part objects, character appendages, fabric, hair, or any motion requiring realistic drag, momentum, and settling behavior.
/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.
/slow-in-out-mastery
Use when designing easing curves, controlling motion pacing, creating natural acceleration/deceleration, or making movements feel physically grounded.
/solid-drawing-mastery
Use when creating motion that needs dimensional grounding, designing transforms that maintain object integrity, or ensuring animations feel structurally sound.
/squash-stretch-mastery
Use when implementing deformation effects, bounce animations, impact responses, or any motion requiring organic elasticity and weight expression.
/staging-mastery
Use when composing scenes, designing layouts, directing user attention, or ensuring a single clear idea is communicated at any given moment.
/straight-ahead-pose-mastery
Use when planning animation workflows, deciding between spontaneous vs controlled approaches, or balancing creative freedom with structural precision.
/timing-principle-mastery
Use when determining animation durations, controlling pacing, establishing rhythm, or making motion feel appropriately weighted and emotionally resonant.
12 by problem type
12 skills/accessibility-issues
Use when animation excludes users with vestibular disorders, cognitive disabilities, or assistive technology needs
/attention-management
Use when wrong elements get attention, important content is missed, or visual hierarchy is broken by animation
/brand-consistency
Use when animation doesn't match brand personality, feels generic, or clashes with design language
/emotional-disconnect
Use when animation feels wrong, creates unintended emotional response, or mismatches context
/implementation-debugging
Use when animation doesn't work as expected, has bugs, or behaves inconsistently
/motion-sickness
Use when animation causes dizziness, nausea, disorientation, or vestibular discomfort
/performance-optimization
Use when animation runs slow, janky, or causes frame drops
/technical-constraints
Use when animation is limited by browser support, platform capabilities, or technical requirements
/timing-calibration
Use when animation speed feels wrong—too fast, too slow, or inconsistent
/universal-solutions
Use when facing any animation problem as a comprehensive diagnostic framework
/user-feedback-clarity
Use when users don't notice feedback, miss state changes, or can't tell if their action worked
/ux-friction
Use when animation causes user confusion, delays task completion, or creates frustration
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.
<a href="https://skilld.dev/gh/dylantarre/animation-principles">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://skilld.dev/b/dylantarre/animation-principles?theme=dark">
<source media="(prefers-color-scheme: light)" srcset="https://skilld.dev/b/dylantarre/animation-principles?theme=light">
<img alt="Skill repository on skilld.dev" src="https://skilld.dev/b/dylantarre/animation-principles?theme=light">
</picture>
</a>