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