'animations' 검색 결과

Design and refine web animations for buttons, dialogs, menus, and gestures. The skill guides timing, changes in speed, spring motion, performance, and reduced-motion preferences so transitions fit the interaction and remain responsive.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Refine dialog and menu transitions
• Adjust button press and hover feedback
• Investigate stuttering animations

Build GSAP animations in Vue, Svelte, and related frameworks with clear setup and cleanup patterns. Scope element selection to each component, start animations after elements exist, and remove animations when the component is destroyed.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Adding GSAP animations to Vue or Svelte components
• Keeping animations scoped to one component
• Cleaning up animations when components are removed

After Effects animation rendering for web and React applications. Use this skill when implementing Lottie animations, JSON vector animations, interactive animated icons, micro-interactions, or loading animations. Triggers on tasks involving Lottie, lottie-web, lottie-react, dotLottie, After Effects JSON export, bodymovin, animated SVG alternatives, or designer-created animations. Complements GSAP ScrollTrigger and Framer Motion for scroll-driven and interactive animations.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Implement, review, or improve SwiftUI animations and transitions. Use when adding explicit animations with withAnimation, configuring implicit animations with .animation(_:body:) or .animation(_:value:), configuring spring animations (.smooth, .snappy, .bouncy), building phase or keyframe animations with PhaseAnimator/KeyframeAnimator, creating hero transitions with matchedGeometryEffect or matchedTransitionSource, adding SF Symbol effects (bounce, pulse, variableColor, breathe, rotate, wiggle), implementing custom Transition or CustomAnimation types, or ensuring animations respect accessibilityReduceMotion.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Animate 3D objects in Three.js using timed keyframes, bone movement, and shape changes. Play animations stored in GLTF models, control playback speed and looping, blend actions, and create motion through code.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Playing animations included in GLTF models
• Blending idle, walk, and run animations
• Animating facial expressions and bones

Refine interface details such as rounded corners, shadows, typography, icon alignment, and animations. Use concrete implementation rules to improve visual consistency and interaction feedback, with changes documented in before-and-after tables.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Refining the appearance of existing UI components
• Improving button and icon interaction feedback
• Reviewing entrance and exit animations

Add GSAP animations to Vue, Nuxt, Svelte, and SvelteKit components with guidance on when animations should start, which elements they affect, and how to remove animations and restore styles when components are removed.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Adding animations to Vue components
• Reviewing animation cleanup in Svelte
• Limiting animations to elements within a component

Create, repair, and review character combat animations, from sword strikes to bow shots and spells. Use joint measurements, mesh deformation tests, camera captures, and blind comparisons to identify awkward poses and assess changes against written rules.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Create melee attacks, bow shots, and spell animations
• Fix stretched arms and awkward wrist or hand poses
• Define measurable combat animation rules and tests

Measure and improve animation performance on frontend pages. Identify offscreen activity, pause CSS and canvas or WebGL loops, audit resource cleanup, and compare runtime observations before and after changes to investigate scrolling issues and long-session slowdowns.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Pause animations outside the viewport
• Investigate jerky scrolling
• Audit cleanup after page navigation

Versatile JavaScript animation engine for DOM, CSS, SVG, and JavaScript objects. Use when creating timeline-based animations, stagger effects, SVG morphing, keyframe sequences, or complex choreographed animations. Triggers on tasks involving Anime.js, timeline animations, staggered sequences, SVG path animations, morphing, or multi-step animation choreography. Alternative to GSAP for SVG-heavy animations and React-independent projects.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Design GPU-accelerated animations with Web Animations API (WAAPI), Scroll-Driven Animations (ScrollTimeline/ViewTimeline), FLIP technique, easing systems, and accessibility (prefers-reduced-motion). Use when user asks to create animations, transitions, scroll effects, page transitions, or interactive motion for web UIs. Do NOT use for canvas-based animations (Three.js, PixiJS), video editing, or non-web (native mobile) motion design.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Build GSAP animations in React or Next.js with guidance on useGSAP, element references, and component boundaries. It covers cleanup when components update or disappear, plus keeping animation code out of server rendering.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Adding GSAP animations to React components
• Cleaning up animations when components are removed
• Keeping animations within the intended component

Implement and review GSAP animations in Vue, Nuxt, Svelte, and SvelteKit. It explains when to start animations, how to limit element selection to one component, and how to clean up when that component is removed.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Adding GSAP animations to Vue or Svelte
• Reviewing animation cleanup when components are removed
• Keeping animations scoped to one component

Improve GSAP animation performance by reviewing movement properties, batching page measurements and updates, and stopping unused animations. It guides changes for smoother motion, including efficient handling of long lists, pointer tracking, and scroll-driven effects.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Reducing stutter in GSAP animations
• Improving animations across many list items
• Optimizing effects that follow the pointer

Review CSS animations for properties that cause costly layout updates, then suggest changes using transform and opacity. Check how effects look across screen sizes and interaction states, including support for users who prefer reduced motion.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Reviewing animations that stutter
• Replacing position and size animations
• Checking reduced motion support

Integrate GSAP animations into React and Next.js components using useGSAP, element references, and scoped selectors. The skill guides dependency updates, event callbacks, and cleanup when components unmount, while keeping animation code out of server rendering.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Adding GSAP animations to React components
• Restricting animations to elements within one component
• Cleaning up animations when components unmount

Find the relevant guidance for writing Remotion animations that agents can understand and that remain editable in Studio’s Visual Mode. It points to resources for scene structure, editable styles and animations, and interactive custom components.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Find guidance for animations editable in Visual Mode
• Look up scene structure and editable styles
• Find instructions for making custom components interactive

Build React Native mobile interfaces for iOS and Android, covering styling, screen navigation, gesture interactions, and animations. The skill guides React Navigation and Reanimated usage, responsive layouts, and performance improvements for mobile components.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Building React Native screens for iOS and Android
• Implementing screen navigation with React Navigation
• Adding touch gestures and Reanimated animations

Build scroll animations with GSAP or Framer Motion, including fade-ins, parallax effects that move layers at different speeds, pinned sections, and horizontal scrolling. Provides implementation patterns for vanilla JavaScript, React, and Next.js, with accessibility guidance.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Fade cards in as they enter the screen
• Create parallax effects for images and text
• Build pinned sections with sequential animations

Add animations to React interfaces using the browser's built-in view transitions. Guides page changes, shared elements that move between views, list reordering, component appearance, and loading reveals, with CSS styling and Next.js integration guidance.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Animating shared images between list and detail views
• Adding forward and back page transitions
• Animating list reordering and component visibility

Integrate GSAP animations into React and Next.js components using useGSAP, element references, and scoped selectors. The skill guides dependency updates, event callbacks, and cleanup when components unmount, while keeping animation code out of server rendering.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Adding GSAP animations to React components
• Restricting animations to elements within one component
• Cleaning up animations when components unmount

Build UI animations by first deciding whether motion serves a useful purpose. Produces code with suitable timing, transitions, interruption behavior, exit paths, reduced motion support, and hover effects adapted to the input device.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Add purposeful motion to buttons, modals, or drawers
• Build transitions that handle repeated actions and interruptions
• Adapt animations for reduced motion preferences and touch input

Audit an app’s animations for responsiveness, performance, and accessibility, then rank the findings by impact and effort. Produce detailed implementation plans that another agent can follow, while leaving source code unchanged during the audit.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Audit animations across an entire app
• Prioritize motion issues by impact and effort
• Prepare implementation plans for another agent

Simple scroll-triggered reveal animations using AOS (Animate On Scroll). Use this skill when building marketing pages, landing pages, or content-heavy sites requiring basic fade/slide effects without complex animation orchestration. Triggers on tasks involving scroll animations, scroll-triggered reveals, AOS, simple animations, or basic scroll effects. Alternative to GSAP ScrollTrigger and Locomotive Scroll for simpler use cases. Compare with motion-framer for React-specific animations.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.