animation-principles
144 skills from dylantarre/animation-principles
Install every skill in this repository:
npx skills add https://github.com/dylantarre/animation-principles- 1

Use when creating After Effects compositions, Premiere Pro motion, video titles, explainer videos, or broadcast motion graphics.
2.4K - 2

Use when designing iOS/Android gestures, haptic feedback, touch interactions, or native mobile animations.
2.4K - 3

Use when implementing Disney's 12 animation principles with Framer Motion in React applications
1.7K - 4

Use when designing visual motion systems, creating animation specifications, or when a designer needs guidance on crafting beautiful, meaningful movement.
1.6K - 5

Use when designing small UI feedback moments like button states, toggles, form validation, loading indicators, or notification badges.
1.4K - 6

Use when building CSS animations, JavaScript transitions, React/Vue motion, or any browser-based animation work.
1.3K - 7

Use when triggering animations on scroll - reveal effects, parallax, sticky headers, progress indicators, or any scroll-linked motion.
1.1K - 8

Use when designing game feel, player feedback systems, or when creating animations that enhance gameplay and player satisfaction.
1K - 9

Use when implementing Disney's 12 animation principles in Adobe After Effects
892 - 10

Use when creating cinematic sequences, narrative animations, or when applying animation principles to video storytelling and visual narrative.
869 - 11

Use when working in Blender, Unity 3D, Unreal Engine, Cinema 4D, VR/AR applications, or any three-dimensional animation work.
771 - 12

Use when implementing Disney's 12 animation principles with GSAP (GreenSock Animation Platform)
730 - 13

Use when implementing Disney's 12 animation principles with pure CSS animations and transitions
716 - 14

Use when designing animations for business tools, project management, collaboration software, or productivity apps
709 - 15

Use when implementing game animations, player feedback, character movement, or interactive entertainment in Unity, Unreal, or other game engines.
680 - 16

Use when implementing route changes, view transitions, modal opens/closes, or navigation animation in web and mobile applications.
670 - 17

Use when designing animations for fitness apps, wellness platforms, workout trackers, or meditation experiences
664 - 18

Use when creating Keynote, PowerPoint, Google Slides animations, or any presentation motion design work.
652 - 19

Use when designing animations for shopping apps, product catalogs, checkout flows, or retail experiences
648 - 20

Use when creating educational content, explaining concepts through animation, or when teaching animation principles to students.
644 - 21

Use when implementing reduced motion alternatives, vestibular-safe animations, WCAG compliance, or designing for users with motion sensitivity.
642 - 22

Use when implementing Disney's 12 animation principles with Anime.js library
640 - 23

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.
625 - 24

Use when designing animations for medical apps, patient portals, telehealth, or health tracking interfaces
607 - 25

Use when creating mouse hover effects - button highlights, card lifts, link underlines, image zooms, or any pointer-triggered animation.
605 - 26

Use when implementing Disney's 12 animation principles with Lottie animations exported from After Effects
604 - 27

Use when creating animations that entertain, engage with humor, or create lighthearted interactive experiences.
594 - 28

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.
594 - 29

Use when creating animations that convey luxury, refinement, or premium brand experiences.
585 - 30

Use when animating charts, graphs, dashboards, data transitions, or any information visualization work.
584 - 31

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.
581 - 32

Use when overseeing animation vision, setting creative direction for motion, or guiding teams on animation quality and consistency.
581 - 33

Use when animating carousels, sliders, image galleries, or horizontally scrolling content for smooth navigation
576 - 34

Use when orchestrating multi-step animations - page transitions, onboarding flows, wizard steps, complex reveals, or any choreographed animation sequence.
575 - 35

Use when motion needs to feel physically grounded—objects falling, characters jumping, things colliding, or any element that should obey believable weight and momentum.
571 - 36

Use when designing animations for educational platforms, e-learning, tutoring apps, or skill-building experiences
570 - 37

Use when designing animations for travel booking, hospitality apps, tourism platforms, or vacation planning experiences
568 - 38

Use when building extended animation sequences over 2000ms - cinematic intros, story sequences, premium experiences where animation IS the product
566 - 39

Use when indicating progress or waiting - spinners, progress bars, skeleton screens, shimmer effects, or any animation showing the system is working.
565 - 40

Use when implementing Disney's 12 animation principles with Rive interactive animations
564 - 41

Use when animating notifications, toasts, alerts, snackbars, or system messages to grab attention appropriately
561 - 42

Use when implementing animations in code, building UI transitions, or when a developer needs practical animation guidance for web/mobile applications.
558 - 43

Use when animating navigation bars, menus, sidebars, or wayfinding elements to create smooth, intuitive transitions
557 - 44

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.
555 - 45

Use when animating buttons, CTAs, or clickable action elements to create satisfying, responsive interactions
553 - 46

Use when implementing Disney's 12 animation principles in Figma prototypes and Smart Animate
550 - 47

Use when creating commercial animations, advertising motion, brand identity animation, logo reveals, or marketing video content.
546 - 48

Use when implementing Disney's 12 animation principles with Motion One (modern, lightweight animation library)
545 - 49

Use when controlling where the audience looks—composing shots, choreographing action, revealing information, or any situation requiring clear visual hierarchy and focus management.
540 - 50

Use when animating icons, badges, avatars, status indicators, or small visual elements to add personality and feedback
538