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
modals-dialogs
Use when animating modals, dialogs, popovers, or overlay content to create smooth entrances and exits
navigation-menus
Use when animating navigation bars, menus, sidebars, or wayfinding elements to create smooth, intuitive transitions
notifications-toasts
Use when animating notifications, toasts, alerts, snackbars, or system messages to grab attention appropriately
universal-elements
Use when animating any UI element not covered by specific skills, or when applying general animation principles across multiple element types
e-commerce-retail
Use when designing animations for shopping apps, product catalogs, checkout flows, or retail experiences
education-learning
Use when designing animations for educational platforms, e-learning, tutoring apps, or skill-building experiences
enterprise-b2b
Use when designing animations for enterprise software, B2B platforms, admin dashboards, or corporate applications
fintech-banking
Use when designing animations for banking apps, payment systems, investment platforms, or financial dashboards
fitness-wellness
Use when designing animations for fitness apps, wellness platforms, workout trackers, or meditation experiences
gaming-entertainment
Use when designing animations for gaming apps, streaming platforms, entertainment portals, or interactive media
healthcare-medical
Use when designing animations for medical apps, patient portals, telehealth, or health tracking interfaces
media-publishing
Use when designing animations for news sites, content platforms, publishing apps, or media consumption experiences
saas-productivity
Use when designing animations for business tools, project management, collaboration software, or productivity apps
social-media
Use when designing animations for social platforms, messaging apps, content sharing, or community features
travel-hospitality
Use when designing animations for travel booking, hospitality apps, tourism platforms, or vacation planning experiences
universal-industry
Use when designing animations for any industry or when industry-specific guidelines do not apply
after-effects
Use when implementing Disney's 12 animation principles in Adobe After Effects
anime-js
Use when implementing Disney's 12 animation principles with Anime.js library
css-native
Use when implementing Disney's 12 animation principles with pure CSS animations and transitions
figma-prototyping
Use when implementing Disney's 12 animation principles in Figma prototypes and Smart Animate
Page 2 of 3 · 144 results