MCPInstall

animation-principles

144 skills from dylantarre/animation-principles

Install every skill in this repository:

npx skills add https://github.com/dylantarre/animation-principles
  1. 1

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

  2. 2

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

    2.4K
  3. 3

    Use when implementing Disney's 12 animation principles with Framer Motion in React applications

  4. 4

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

  5. 5

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

  6. 6

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

  7. 7

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

  8. 8

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

  9. 9

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

  10. 10

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

  11. 11

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

  12. 12

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

  13. 13

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

  14. 14

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

  15. 15

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

  16. 16

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

  17. 17

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

  18. 18

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

  19. 19

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

  20. 20

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

  21. 21

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

  22. 22

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

  23. 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.

  24. 24

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

  25. 25

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

  26. 26

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

  27. 27

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

  28. 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.

  29. 29

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

  30. 30

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

  31. 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.

  32. 32

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

  33. 33

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

  34. 34

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

  35. 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.

  36. 36

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

  37. 37

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

  38. 38

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

  39. 39

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

  40. 40

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

  41. 41

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

  42. 42

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

  43. 43

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

  44. 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.

  45. 45

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

  46. 46

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

  47. 47

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

  48. 48

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

  49. 49

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

  50. 50

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