'animations' 검색 결과

Build animated 3D scenes in React Three Fiber using examples for object motion, model playback, and spring effects. Guidance covers blending character movements, responding to interactions, and managing state to reduce unnecessary React rendering.

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

• Add rotation and floating motion to 3D objects
• Play and transition between GLTF character animations
• Create spring effects for clicks and dragging

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.

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

State machine-based vector animation with runtime interactivity and web integration. Use this skill when creating interactive animations, state-driven UI, animated components with logic, or designer-created animations with runtime control. Triggers on tasks involving Rive, state machines, interactive vector animations, animation with input handling, ViewModel data binding, or React Rive integration. Alternative to Lottie for animations requiring state machines and two-way interactivity.

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

SwiftUI animation patterns — implicit/explicit animations, transitions, phase/keyframe animations, the Animatable protocol, and the @Animatable macro. Use when implementing animations, transitions, or motion in SwiftUI views.

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

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

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

기존 화면이나 합의된 UI 안에 목적과 사용 빈도에 맞는 애니메이션을 구현합니다. 반복 조작으로 인한 중단과 동작 줄이기 설정도 처리합니다.

• 모달과 드로어의 열기·닫기 애니메이션
• 버튼과 토글 조작에 대한 피드백
• 반복 조작으로 중단되는 애니메이션 조정

GSAP ScrollTrigger로 스크롤에 반응하는 웹 애니메이션을 구현합니다. 요소 고정, 진행도 연동, 가로 이동과 함께 위치 재계산 및 페이지 이동 시 정리도 다룹니다.

• 화면에 들어온 요소에 애니메이션 적용
• 스크롤 중 특정 구간을 고정해 표시
• 세로 스크롤로 콘텐츠를 가로 이동

GSAP 기본 API로 웹 요소와 SVG의 이동, 회전, 페이드 효과를 구현합니다. 속도 변화와 시간차를 조절하고 화면 너비와 동작 줄이기 설정에 대응합니다.

• 웹 페이지에 이동과 페이드 효과를 넣을 때
• 여러 요소를 시간차로 움직일 때
• 화면 너비에 따라 동작을 바꿀 때

Build HyperFrames animations from small motion recipes, scene templates, and transitions. The skill guides runtime selection, including GSAP, Lottie, and Three.js, and provides an audit script to examine timing and choreography while following HyperFrames requirements for reproducible rendering.

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

• Combine motion recipes into a scene
• Build a multi-phase brand reveal from a template
• Design transitions between scenes

Build web animations with GSAP ScrollTrigger that respond to scrolling. Move or reveal elements, keep sections pinned in place, link animation progress to scroll position, and create parallax effects or horizontal movement driven by vertical scrolling.

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

• Reveal cards as they enter the viewport
• Keep a section pinned during scrolling
• Link animation progress to scroll position

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

Create mathematical and geometric animations in Python with Manim Community Edition. Use guidance, examples, and scene templates to structure animations, display equations, plot graphs, control cameras, and render two-dimensional or three-dimensional scenes.

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

• Animating equations and derivations
• Creating function graphs and area visualizations
• Building 3D surfaces with camera movement

Apply Disney's 12 animation principles to Lottie vector animations exported from After Effects. Use guidance on keyframes, motion paths, and playback controls to shape anticipation, timing, secondary actions, and interactive movement.

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

• Adding anticipation and squash-and-stretch to an animation
• Adjusting playback speed and frame ranges
• Coordinating main and secondary animations

Build and review HyperFrames animations using motion recipes, scene templates, and transitions. Find guidance for seven animation runtimes, including GSAP and Three.js, and inspect existing scenes for timing gaps and inconsistent motion.

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

• Combine motion recipes for text and shapes
• Build scenes with several animation phases
• Choose an animation runtime

Build web animations with Anime.js, from staggered text and image reveals to SVG shape changes and animated lines. Coordinate timing, overlapping motion, and responses to user input while accounting for accessibility and performance.

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

• Coordinate multi-stage landing page animations
• Reveal text and grids with staggered timing
• Animate SVG shapes and line drawing

Build and improve mobile apps with React Native and Expo using prioritized implementation rules. Covers faster lists, animations, images, navigation, state management, and native dependencies, with explanations and code examples for reviewing common implementation choices.

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

• Improving long lists and scrolling performance
• Reviewing Reanimated animations and gestures
• Choosing image, navigation, and modal implementations

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

Build web animations with GSAP ScrollTrigger that respond to scrolling. Move or reveal elements, keep sections pinned in place, link animation progress to scroll position, and create parallax effects or horizontal movement driven by vertical scrolling.

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

• Reveal cards as they enter the viewport
• Keep a section pinned during scrolling
• Link animation progress to scroll position

Find places in an interface where animation would help, then filter suggestions by frequency, purpose, speed, and function. Get precise motion settings and reasons for rejected candidates, without changing source code.

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

• Find useful places to add motion to an existing interface
• Specify timing and movement for dialogs and notifications
• Decide which interactions should stay free of animation

Turn Figma animations into runnable application code by combining design structure with motion data. Preserve timing, easing—the way movement accelerates—and coordinated animations while adapting to the project's existing libraries and reduced-motion accessibility preferences.

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

• Implement an animated component from a Figma URL
• Coordinate several elements on a shared animation timeline
• Reproduce animation along an SVG path

Turn Figma animations into runnable application code by combining design structure with motion data. Preserve timing, easing—the way movement accelerates—and coordinated animations while adapting to the project's existing libraries and reduced-motion accessibility preferences.

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

• Implement an animated component from a Figma URL
• Coordinate several elements on a shared animation timeline
• Reproduce animation along an SVG path

Add scroll-triggered text animations in which words rise into view one after another. Uses GSAP ScrollTrigger with hidden overflow masks, while preserving spaces, screen reader text, and static display for people who prefer reduced motion.

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

• Animating a hero headline as it enters view
• Revealing section titles word by word
• Respecting reduced-motion preferences in text animations

Add or debug web animations with GSAP, from entrance effects to scroll-driven sequences. Coordinate timing across multiple elements, adjust motion, and address rendering performance and cleanup when using animations in React.

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

• Animate a hero section with staggered entrances
• Build scroll-driven animated sections
• Coordinate navigation, headings, and buttons

Design and implement web animations that guide attention, explain hierarchy, and confirm actions. Define reusable timing and movement rules, plan coordinated sequences, and account for performance and accessibility settings that reduce motion.

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

• Plan entrance animations for a product page
• Standardize timing and easing across a UI
• Add hover feedback and navigation transitions