dylantarre/animation-principles - 2ページ

animation-principles-intermediate

Use when someone has working knowledge of animation principles and needs guidance on combining them effectively in more complex animations

原文の言語: 英語

animation-principles-master

Use when someone seeks the philosophical foundation of animation principles, wants to understand why they work, or is at a teaching/mentorship level

原文の言語: 英語

animation-principles-novice

Use when someone has basic awareness of animation principles and wants to start applying them in simple projects

原文の言語: 英語

animation-principles-quick-start

Use when someone needs a rapid overview of all 12 animation principles in under 5 minutes

原文の言語: 英語

animation-principles-refresher

Use when an experienced animator needs a quick reminder of the 12 principles without basic explanations

原文の言語: 英語

animation-principles-teaching-others

Use when someone needs to explain animation principles to students, mentees, or team members at various skill levels

原文の言語: 英語

animation-principles-troubleshooting

Use when animation feels wrong and you need to diagnose which principle is failing or being misapplied

原文の言語: 英語

animation-principles-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

原文の言語: 英語

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.

原文の言語: 英語

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.

原文の言語: 英語

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

原文の言語: 英語