'framer-motion' 검색 결과

Framer Motion React animation library skill — declarative animations, gestures, layout transitions, scroll-triggered animations, variants, AnimatePresence, and performance optimization.

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

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

React와 Next.js 화면의 구현과 검토를 지원합니다. 컴포넌트 조합, 상태 관리, 데이터 가져오기, 표시 속도, 폼 검증과 키보드·포커스 동작 개선 패턴을 제공합니다.

• 재사용하기 쉬운 React 컴포넌트 정리
• 상태 관리와 데이터 가져오기 검토
• 긴 목록의 표시 속도 개선

Implement animation in React with Framer Motion examples based on Disney's 12 animation principles. Add squash and stretch, preparatory movements, smooth acceleration, overlapping motion, and hover or tap responses with defined timing.

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

• Adding hover and tap responses to buttons
• Animating jumps with preparation and curved paths
• Revealing list items one after another

Design and implement interface responses such as button feedback, loading indicators, page transitions, and swipe gestures. Use motion to communicate actions and state changes, with guidance on timing, performance, and support for people who prefer reduced animation.

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

• Adding hover and click feedback to buttons
• Showing loading placeholders and progress indicators
• Creating transitions for pages and interface components

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

Guides React and Next.js interface development with examples for reusable components, shared state, forms, and error handling. It also covers loading performance, animations, and keyboard access to help build maintainable, responsive interfaces.

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

• Designing reusable interface components
• Organizing shared state and data fetching
• Improving performance for long lists

Framer Motion / Motion sub-skill - AnimatePresence, layout animations, gestures, motion values.

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

Animate React with Framer Motion (Motion): gestures, layout animations, variants, scroll-linked motion, and exit transitions. Use when adding production-grade UI animation.

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

Craft UI animations with Framer Motion: page transitions, micro-interactions, scroll reveals, and shared layouts for polished interfaces. Use for interface animation beyond basics.

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

Motion (formerly Framer Motion) patterns - motion components, variants, AnimatePresence, gestures, layout animations, scroll-linked motion, reduced-motion handling

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

Design performant animation systems with Framer Motion, GSAP, View Transitions API, and spring physics. Activate on: page transitions, micro-interactions, scroll animations, layout animations, spring physics. NOT for: CSS-only hover effects (use css-in-js-architect), video/canvas rendering (use creative-coding-expert).

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

Build Motion (Framer Motion) React animations — declarative motion components, variants, AnimatePresence, layout transitions, scroll effects, and inline SVG pathLength. Load when the user asks to animate with Motion, Framer Motion, motion.div, AnimatePresence, layout animation, whileInView, or React enter/exit transitions. Also triggers on "framer-motion", "motion/react", "useReducedMotion", or "React animation library". React/Next only — not README embeds or non-React.

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

Design performant animation systems with Framer Motion, GSAP, View Transitions API, and spring physics. Activate on: page transitions, micro-interactions, scroll animations, layout animations, spring physics. NOT for: CSS-only hover effects (use css-in-js-architect), video/canvas rendering (use creative-coding-expert).

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

Creates smooth animations and micro-interactions using Framer Motion including page transitions, gestures, scroll-based animations, and orchestrated sequences. Use when users request "add animation", "framer motion", "page transition", "animate component", or "micro-interactions".

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