Results for “animation”

Expert in real-time game animation systems including skeletal animation, blend trees, state machines, inverse kinematics, root motion, procedural animation, and animation retargeting. Specializes in creating fluid, responsive character animation that balances visual quality with performance constraints. Use when "animation system, state machine, blend tree, skeletal animation, inverse kinematics, IK system, root motion, animation blending, character animation, animator controller, motion matching, animation retargeting, foot IK, look at IK, aim offset, animation montage, animation notify, additive animation, animation layers, procedural animation, animation, game-dev, character, state-machine, unity, unreal, godot, skeletal, rigging, motion" mentioned.

The English summary is being prepared. Showing the original description.

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

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

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.

The English summary is being prepared. Showing the original description.

Expert patterns for AnimationPlayer including track types (Value, Method, Audio, Bezier), root motion extraction, animation callbacks, procedural animation generation, call mode optimization, and RESET tracks. Use for timeline-based animations, cutscenes, or UI transitions. Trigger keywords: AnimationPlayer, Animation, track_insert_key, root_motion, animation_finished, RESET_track, call_mode, animation_set_next, queue, blend_times.

The English summary is being prepared. Showing the original description.

Expert patterns for 2D animation in Godot using AnimatedSprite2D and skeletal cutout rigs. Use when implementing sprite frame animations, procedural animation (squash/stretch), cutout bone hierarchies, or frame-perfect timing systems. Trigger keywords: AnimatedSprite2D, SpriteFrames, animation_finished, animation_looped, frame_changed, frame_progress, set_frame_and_progress, cutout animation, skeletal 2D, Bone2D, procedural animation, animation state machine, advance(0).

The English summary is being prepared. Showing the original description.

Expert patterns for AnimationPlayer including track types (Value, Method, Audio, Bezier), root motion extraction, animation callbacks, procedural animation generation, call mode optimization, and RESET tracks. Use for timeline-based animations, cutscenes, or UI transitions. Trigger keywords: AnimationPlayer, Animation, track_insert_key, root_motion, animation_finished, RESET_track, call_mode, animation_set_next, queue, blend_times.

The English summary is being prepared. Showing the original description.

Expert patterns for 2D animation in Godot using AnimatedSprite2D and skeletal cutout rigs. Use when implementing sprite frame animations, procedural animation (squash/stretch), cutout bone hierarchies, or frame-perfect timing systems. Trigger keywords: AnimatedSprite2D, SpriteFrames, animation_finished, animation_looped, frame_changed, frame_progress, set_frame_and_progress, cutout animation, skeletal 2D, Bone2D, procedural animation, animation state machine, advance(0).

The English summary is being prepared. Showing the original description.

Build a shared animation foundation for React and Next.js with motion/react. Define reusable timing and spring settings, respect reduced-motion preferences, adapt to device performance, and align initial animation states with server-rendered content.

• Standardize animation settings across components
• Define reusable spring animation presets
• Respect users' reduced-motion preferences

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

Build web animations with GSAP ScrollTrigger that respond to scrolling. The skill covers pinned sections, animation progress linked to scroll position, horizontal movement, and the position updates and cleanup needed when page content changes.

• Animate elements as they enter the viewport
• Keep a section pinned while its content animates
• Move content horizontally through vertical scrolling

Build and review web animations with GSAP's core API, including movement, rotation, fades, and staggered starts. Adjust timing and easing, meaning changes in speed, and adapt animations to screen size and reduced-motion preferences.

• Adding movement and fades to web page elements
• Animating multiple elements with staggered starts
• Adapting animations to desktop and mobile screens

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

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

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

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

Design and implement web animations that feel natural and purposeful. Use this skill proactively whenever the user asks questions about animations, motion, easing, timing, duration, springs, transitions, or animation performance. This includes questions about how to animate specific UI elements, which easing to use, animation best practices, or accessibility considerations for motion. Triggers on: easing, ease-out, ease-in, ease-in-out, cubic-bezier, bounce, spring physics, keyframes, transform, opacity, fade, slide, scale, hover effects, microinteractions, Framer Motion, React Spring, GSAP, CSS transitions, entrance/exit animations, page transitions, stagger, will-change, GPU acceleration, prefers-reduced-motion, modal/dropdown/tooltip/popover/drawer animations, gesture animations, drag interactions, button press feel, feels janky, make it smooth.

The English summary is being prepared. Showing the original description.

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.

The English summary is being prepared. Showing the original description.

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.

The English summary is being prepared. Showing the original description.

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.

The English summary is being prepared. Showing the original description.

Build interactive animations in React or Next.js, including draggable elements, swipe gestures, animated text, SVG line drawing, and loading indicators. Guides API selection and multi-step animation sequences, with touch testing and cleanup practices.

• Building draggable sheets and reorderable lists
• Adding word reveals and animated number counters
• Animating SVG lines and circular progress

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