'animation' 검색 결과

Expert patterns for AnimationTree including StateMachine transitions, BlendSpace2D for directional movement, BlendTree for layered animations, root motion, transition conditions, advance expressions, and state machine sub-states. Use for complex character animation systems with movement blending and state management. Trigger keywords: AnimationTree, AnimationNodeStateMachine, BlendSpace2D, BlendSpace1D, BlendTree, transition_request, blend_position, advance_expression, AnimationNodeAdd2, AnimationNodeBlend2, root_motion.

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

Write Swift animation code using Apple's latest frameworks — SwiftUI animations, Core Animation, and UIKit. Prefer first-party APIs over third-party libraries. Use when implementing iOS animations, writing animation code, building transitions, creating gesture-driven interactions, or converting animation specs/designs into working Swift code. Covers iOS 18 through iOS 26 APIs including KeyframeAnimator, PhaseAnimator, custom Transition protocol, zoom navigation transitions, matchedGeometryEffect, symbol effects, mesh gradients, and SwiftUI-UIKit animation bridging.

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

React와 Next.js에서 드래그, 스와이프, 텍스트와 SVG 애니메이션을 구현합니다. 여러 단계의 동작과 로딩 표시를 다루며 용도에 맞는 API 선택도 안내합니다.

• 드래그로 닫는 패널과 정렬 목록 구현하기
• 단어별 텍스트 표시와 숫자 애니메이션 만들기
• SVG 선 그리기와 원형 진행 표시 구현하기

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

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

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

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

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

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

Animate in Godot 4.7 three ways: AnimationPlayer for keyframed clips (incl. call and signal tracks), AnimationTree with state machines and blend spaces for character animation, and Tween for short procedural/UI tweens via create_tween(). Use when working with AnimationPlayer/AnimationTree nodes in a .tscn, blending character states, sprite-sheet animation, or code-driven Tweens.

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

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.

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

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.

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

Generate cartoon and animation style video prompts for Seedance 2.0 on Higgsfield. Use whenever the user wants cartoon, 2D animation, cel-shaded, hand-drawn, illustrated, flat animation, or motion graphics animation style video. Triggers on: cartoon, animation, cel shading, hand-drawn, illustrated, flat design animation, vector animation, retro cartoon, rubber hose, motion graphics, or any cartoon/animated style request. Use even for vague requests like "make it look animated" or "fun colorful style.

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

World-class motion design expertise combining Disney's 12 principles of animation, Material Design's motion system, and the performance-first philosophy of production interfaces. Motion design is the craft of bringing interfaces to life - not through decoration, but through clarity, continuity, and communication. Great motion design is invisible. Users don't notice the animations - they notice that the interface feels natural, responsive, and alive. Every transition tells a story: where did this come from? Where is it going? What just happened? Motion is the language of cause and effect in digital interfaces. Use when "animation, motion, transition, microinteraction, easing, timing, choreography, loading animation, skeleton loader, page transition, hover effect, scroll animation, spring animation, keyframes, framer motion, gsap, lottie, animation, motion, transitions, microinteractions, easing, timing, accessibility, performance, frontend, design" mentioned.

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

Anime.js Animation Skill workflow skill. Use this skill when the user needs Advanced JavaScript animation library skill for creating complex, high-performance web animations and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.

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

Reviews iOS animation code for correctness, performance, accessibility, and Apple API best practices. Use when reviewing .swift files containing animation code — withAnimation, .animation(), PhaseAnimator, KeyframeAnimator, matchedGeometryEffect, navigationTransition, CABasicAnimation, CASpringAnimation, UIViewPropertyAnimator, UIDynamicAnimator, symbolEffect, scrollTransition, contentTransition, or custom Transition conformances.

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

This skill should be used when the user asks to "fix janky CSS animation", "make animation 60fps", "stop layout thrashing", "animate width/height/top/left smoothly", "convert animation to transform", "animate box-shadow performantly", "animate height auto", "FLIP animation", or "why is my scroll/hover animation choppy".

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

Generate hand-crafted web animation patterns as self-contained HTML: typewriter/rotator effects, progress bar simulations, file review state machines, staggered reveals, terminal status displays, streaming AI-response demos, popover/dialog/toast lifecycles, Lottie orchestration, scroll-driven sequences. Behavioral animations that simulate live software. Triggers on typewriter effect, progress animation, stagger reveal, terminal animation, streaming text, AI demo animation, toast animation, data simulation, product demo animation, loading sequence, conductor motion.

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

Three.js animation - keyframe animation, skeletal animation, morph targets, animation mixing. Use when animating objects, playing GLTF animations, creating procedural motion, or blending animations.

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

Three.js animation - keyframe animation, skeletal animation, morph targets, animation mixing. Use when animating objects, playing GLTF animations, creating procedural motion, or blending animations.

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

Build coordinated animation sequences with GSAP, an animation library. Arrange movements in order or in parallel, set start times with labels, group sequences inside others, and control playback, pauses, seeking, and reverse motion.

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

• Playing several animations in a defined order
• Overlapping movements at precise start times
• Grouping sequences and controlling their playback

Build coordinated animation sequences with GSAP timelines. Set when each movement starts, overlap effects, name key moments, combine smaller sequences, and control playback, including pause, reverse, restart, and jumps to a specific point.

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

• Animating several elements in a planned order
• Overlapping effects at precise times
• Organizing animation sections with labels

Create and review GSAP code that animates webpage elements and SVG graphics. Covers movement, fades, easing that controls speed changes, staggered effects, playback controls, and adaptations for screen size and reduced-motion preferences.

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

• Adding entrance animations to webpage elements
• Animating multiple items with staggered starts
• Adjusting motion for desktop and mobile screens

Improve GSAP animation performance by reviewing animated properties, browser layout work, and simultaneous updates. Use transforms, grouped updates, reusable animations, and targeted cleanup to reduce stuttering in lists, mouse followers, and scroll effects.

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

• Reviewing stuttering GSAP animations
• Reducing animation load in long lists
• Optimizing mouse-following effects