dylantarre/animation-principles

5697

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

dylantarre/animation-principles

2.3K

6497

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

dylantarre/animation-principles

1.9K

7478

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

dylantarre/animation-principles

1.5K

7962

motion-designer Use when designing visual motion systems, creating animation specifications, or when a designer needs guidance on cra…

dylantarre/animation-principles

1.4K

8416

micro-interactions Use when designing small UI feedback moments like button states, toggles, form validation, loading indicators, or not…

dylantarre/animation-principles

1.3K

9204

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

dylantarre/animation-principles

1.1K

7

scroll-animations Use when triggering animations on scroll - reveal effects, parallax, sticky headers, progress indicators, or any scro…

dylantarre/animation-principles

976

8

game-designer Use when designing game feel, player feedback systems, or when creating animations that enhance gameplay and player s…

dylantarre/animation-principles

864

9

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

dylantarre/animation-principles

733

10

filmmaker Use when creating cinematic sequences, narrative animations, or when applying animation principles to video storytell…

dylantarre/animation-principles

706

11

3d-spatial Use when working in Blender, Unity 3D, Unreal Engine, Cinema 4D, VR/AR applications, or any three-dimensional animati…

dylantarre/animation-principles

630

12

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

dylantarre/animation-principles

614

13

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

dylantarre/animation-principles

599

14

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

dylantarre/animation-principles

599

15

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

dylantarre/animation-principles

561

16

page-transitions Use when implementing route changes, view transitions, modal opens/closes, or navigation animation in web and mobile …

dylantarre/animation-principles

557

17

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

dylantarre/animation-principles

548

18

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

dylantarre/animation-principles

530

19

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

dylantarre/animation-principles

528

20

educator-teacher Use when creating educational content, explaining concepts through animation, or when teaching animation principles t…

dylantarre/animation-principles

522

21

game-development Use when implementing game animations, player feedback, character movement, or interactive entertainment in Unity, Un…

dylantarre/animation-principles

522

22

emotional-narrative Use when animation needs to convey feeling, tell a story, or connect emotionally—character moments, dramatic beats, o…

dylantarre/animation-principles

511

23

accessible-motion Use when implementing reduced motion alternatives, vestibular-safe animations, WCAG compliance, or designing for user…

dylantarre/animation-principles

510

24

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

dylantarre/animation-principles

503

25

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

dylantarre/animation-principles

498

26

hover-interactions Use when creating mouse hover effects - button highlights, card lifts, link underlines, image zooms, or any pointer-t…

dylantarre/animation-principles

486

27

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

dylantarre/animation-principles

473

28

creative-director Use when overseeing animation vision, setting creative direction for motion, or guiding teams on animation quality an…

dylantarre/animation-principles

468

29

rhythm-pacing Use when animation needs musical flow—dance sequences, action choreography, comedic timing, scene pacing, or any moti…

dylantarre/animation-principles

468

30

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

dylantarre/animation-principles

464

31

travel-hospitality Use when designing animations for travel booking, hospitality apps, tourism platforms, or vacation planning experienc…

dylantarre/animation-principles

464

32

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

dylantarre/animation-principles

463

33

transition-sequences Use when orchestrating multi-step animations - page transitions, onboarding flows, wizard steps, complex reveals, or …

dylantarre/animation-principles

461

34

dramatic-2000ms-plus Use when building extended animation sequences over 2000ms - cinematic intros, story sequences, premium experiences w…

dylantarre/animation-principles

459

35

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

dylantarre/animation-principles

459

36

physics-intuition Use when motion needs to feel physically grounded—objects falling, characters jumping, things colliding, or any eleme…

dylantarre/animation-principles

458

37

loading-states Use when indicating progress or waiting - spinners, progress bars, skeleton screens, shimmer effects, or any animatio…

dylantarre/animation-principles

451

38

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

dylantarre/animation-principles

451

39

character-appeal Use when creating or animating characters that need to connect with audiences—hero protagonists, memorable villains, …

dylantarre/animation-principles

449

40

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

dylantarre/animation-principles

446

41

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

dylantarre/animation-principles

446

42

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

dylantarre/animation-principles

444

43

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

dylantarre/animation-principles

443

44

frontend-developer Use when implementing animations in code, building UI transitions, or when a developer needs practical animation guid…

dylantarre/animation-principles

440

45

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

dylantarre/animation-principles

440

46

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

dylantarre/animation-principles

438

47

fintech-banking Use when designing animations for banking apps, payment systems, investment platforms, or financial dashboards

dylantarre/animation-principles

434

48

brand-marketing Use when creating commercial animations, advertising motion, brand identity animation, logo reveals, or marketing vid…

dylantarre/animation-principles

433

49

gaming-entertainment Use when designing animations for gaming apps, streaming platforms, entertainment portals, or interactive media

dylantarre/animation-principles

432

50

accessibility-advocate Use when designing inclusive animations, addressing vestibular disorders and motion sensitivity, or ensuring animatio…

dylantarre/animation-principles

430