Design
1,149 skills.
Browse
anime-jsdylantarreUse when implementing Disney's 12 animation principles with Anime.js libraryanticipation-masterydylantarreUse when designing action sequences, user interactions, state transitions, or any motion that needs telegraphing to feel intentional rather than sudden.anticipation-payoffdylantarreUse when designing action sequences, gags, reveals, or any motion that needs setup before delivery—preparing audiences for what's coming and maximizing impact.appeal-masterydylantarreUse when designing character personalities, creating memorable motion signatures, ensuring animations feel polished, or making visual experiences that audiences want to watch.arc-masterydylantarreUse when designing motion paths, character movement trajectories, gesture animations, or any motion that should feel natural rather than robotic.attention-directiondylantarreUse when controlling where the audience looks—composing shots, choreographing action, revealing information, or any situation requiring clear visual hierarchy and focus management.attention-grabbersdylantarreUse when drawing user focus - notification badges, new feature highlights, error callouts, promotional banners, or any animation meant to attract attention.attention-managementdylantarreUse when wrong elements get attention, important content is missed, or visual hierarchy is broken by animationbrand-consistencydylantarreUse when animation doesn't match brand personality, feels generic, or clashes with design languagebrand-marketingdylantarreUse when creating commercial animations, advertising motion, brand identity animation, logo reveals, or marketing video content.brand-strategistdylantarreUse when defining brand motion identity, creating animation guidelines for brand expression, or aligning animation with brand personality.buttons-ctasdylantarreUse when animating buttons, CTAs, or clickable action elements to create satisfying, responsive interactionscalm-relaxationdylantarreUse when creating animations that soothe users, reduce anxiety, or create peaceful, meditative experiences.cards-containersdylantarreUse when animating cards, panels, tiles, or container elements to create depth and interactivitycarousels-slidersdylantarreUse when animating carousels, sliders, image galleries, or horizontally scrolling content for smooth navigationcharacter-appealdylantarreUse 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.comfort-safetydylantarreUse when creating animations that reassure users, reduce anxiety, or communicate protection and security.continuous-infinitedylantarreUse when building ongoing loop animations - loading states, ambient motion, background effects that run indefinitely without user fatiguecontinuous-loopsdylantarreUse when creating ongoing animations - loading spinners, pulsing indicators, ambient motion, background effects, or any animation that repeats indefinitely.creative-directordylantarreUse when overseeing animation vision, setting creative direction for motion, or guiding teams on animation quality and consistency.css-nativedylantarreUse when implementing Disney's 12 animation principles with pure CSS animations and transitionsdata-visualizationdylantarreUse when animating charts, graphs, dashboards, data transitions, or any information visualization work.deliberate-1200-2000msdylantarreUse when building slow intentional animations between 1200-2000ms - app intros, loading sequences, storytelling moments that create emotional resonancedramatic-2000ms-plusdylantarreUse when building extended animation sequences over 2000ms - cinematic intros, story sequences, premium experiences where animation IS the producte-commerce-retaildylantarreUse when designing animations for shopping apps, product catalogs, checkout flows, or retail experienceseducation-learningdylantarreUse when designing animations for educational platforms, e-learning, tutoring apps, or skill-building experienceseducator-teacherdylantarreUse when creating educational content, explaining concepts through animation, or when teaching animation principles to students.elegance-sophisticationdylantarreUse when creating animations that convey luxury, refinement, or premium brand experiences.emotional-disconnectdylantarreUse when animation feels wrong, creates unintended emotional response, or mismatches contextemotional-narrativedylantarreUse 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.enterprise-b2bdylantarreUse when designing animations for enterprise software, B2B platforms, admin dashboards, or corporate applicationsentrance-animationsdylantarreUse when elements need to appear on screen - page loads, modals opening, items being added, content reveals, or any "coming into view" animation.exaggerated-claritydylantarreUse when motion needs to read clearly and powerfully—broad comedy, action highlights, important story beats, or any moment that must unmistakably communicate to the audience.exaggeration-masterydylantarreUse when determining how far to push motion beyond realism, calibrating animation intensity for context, or making key moments register with audiences.excitement-energydylantarreUse when creating animations that generate enthusiasm, build anticipation, or create high-energy experiences.exit-animationsdylantarreUse when elements need to leave the screen - closing modals, dismissing notifications, removing items, page transitions out, or any "leaving view" animation.feedback-indicatorsdylantarreUse when confirming user actions - success checkmarks, error alerts, form validation, save confirmations, or any animation acknowledging what the user did.figma-prototypingdylantarreUse when implementing Disney's 12 animation principles in Figma prototypes and Smart Animatefintech-bankingdylantarreUse when designing animations for banking apps, payment systems, investment platforms, or financial dashboardsfitness-wellnessdylantarreUse when designing animations for fitness apps, wellness platforms, workout trackers, or meditation experiencesfollow-through-overlappingdylantarreUse when animating multi-part objects, character appendages, fabric, hair, or any motion requiring realistic drag, momentum, and settling behavior.forms-inputsdylantarreUse when animating form fields, inputs, textareas, selects, or interactive form elements to improve usability and feedbackfriendliness-approachabilitydylantarreUse when creating animations that feel warm, welcoming, and make users feel comfortable engaging.gaming-entertainmentdylantarreUse when designing animations for gaming apps, streaming platforms, entertainment portals, or interactive mediagesture-responsesdylantarreUse when responding to touch or click interactions - button presses, drag feedback, swipe responses, tap ripples, or any direct manipulation animation.gsap-greensockdylantarreUse when implementing Disney's 12 animation principles with GSAP (GreenSock Animation Platform)healthcare-medicaldylantarreUse when designing animations for medical apps, patient portals, telehealth, or health tracking interfaceshover-interactionsdylantarreUse when creating mouse hover effects - button highlights, card lifts, link underlines, image zooms, or any pointer-triggered animation.icons-badgesdylantarreUse when animating icons, badges, avatars, status indicators, or small visual elements to add personality and feedbackinstant-0-100msdylantarreUse when building instantaneous UI feedback under 100ms - button presses, toggles, state changes that feel immediate and responsive