skaya

# Motion documentation for LLMs ## React (prev Framer Motion) ### Get started - [Get started with Motion for React](/docs/react-quick-start.md): Get started with Motion for React with our installation guide and interactive examples. ### Animations - [Gestures](/docs/react-gestures.md): Learn how to use Motion for React's powerful gesture system to trigger animations and events. - [Layout animations](/docs/react-layout-animations.md): Learn how to create layout and shared layout animations with Motion for React. - [React animation](/docs/react-animation.md): Learn how to animate with Motion for React. Discover springs, exit animations, layout animations, scroll animations and more. - [Scroll animations](/docs/react-scroll-animations.md): Learn how to create scroll-linked and scroll-triggered animations in React with Motion. - [Transitions](/docs/react-transitions.md): A transition defines how values animate from one state to another. Learn how to configure transitions in Motion for React, with durations, cubic bezier curves, springs and more. ### Components - [AnimatePresence](/docs/react-animate-presence.md): Learn how to quickly make exit animations with Motion for React's AnimatePresence component. - [LayoutGroup](/docs/react-layout-group.md): Animate layout across component groups with the LayoutGroup component. - [LazyMotion](/docs/react-lazy-motion.md): Reduce the bundlesize of Motion for React by lazy-loading functionality with the LazyMotion component. - [motion](/docs/react-motion-component.md): The motion component is a DOM element supercharged with 120fps animations and gestures. - [MotionConfig](/docs/react-motion-config.md): Learn how use the MotionConfig component to set a default transition for all components, define reduced motion settings, or set a security policy. - [Reorder](/docs/react-reorder.md): Learn how to create simple drag-to-reorder effects with Motion for React's Reorder components. ### Motion Values - [Motion values overview](/docs/react-motion-value.md): Learn how to use Motion's motion values, a performant way to track state and velocity. - [useMotionTemplate](/docs/react-use-motion-template.md): Combine multiple motion values with a string template. - [useMotionValueEvent](/docs/react-use-motion-value-event.md): Subscribe to motion value events from a React component. - [useScroll](/docs/react-use-scroll.md): Learn how to create scroll-linked animations with Motion's simple yet powerful useScroll hook. - [useSpring](/docs/react-use-spring.md): useSpring creates a motion value that animates to its target with a spring. - [useTime](/docs/react-use-time.md): A motion value that updates every animation frame with the duration, in milliseconds, since it was created. - [useTransform](/docs/react-use-transform.md): useTransform creates a new motion value that transforms the output of one or more motion values. - [useVelocity](/docs/react-use-velocity.md): Create a motion value that tracks the velocity of another motion value. ### Hooks - [useAnimate](/docs/react-use-animate.md): Create an animate function with animation controls, timelines, scoped selectors and automatic cleanup. - [useAnimationFrame](/docs/react-use-animation-frame.md): Create an animation loop that runs a callback every frame. - [useDragControls](/docs/react-use-drag-controls.md): Learn how to manually start/stop dragging a motion component with the useDragControls hook. - [useInView](/docs/react-use-in-view.md): A simple state hook for detecting when an element is within the viewport. - [useReducedMotion](/docs/react-use-reduced-motion.md): A hook that determines whether the user prefers reduced motion. ### Integrations - [Framer](/docs/framer.md): Motion for React is already installed in your Framer project. Learn how to use it in your code components and overrides with this simple guide. - [Integrate Motion with Radix](/docs/radix.md): Learn how to animate Radix components with Motion for React. Easily add layout, exit and spring animations to your Radix components. With live code examples for Tabs, Tooltip and more. ### Guides - [Accessibility](/docs/react-accessibility.md): How to design accessible animations with Motion for React. - [Reduce bundle size](/docs/react-reduce-bundle-size.md): Learn what makes up Motion's bundle size, and how to reduce it. - [Upgrade guide](/docs/react-upgrade-guide.md): How to upgrade to the latest version of Motion for React. ### 3D - [Layout cameras](/docs/react-three-fiber-layout-cameras.md): A perspective and orthographic camera that integrates with Framer Motion's layout animations. - [Motion for React Three Fiber](/docs/react-three-fiber.md): Learn how to use Motion for React with React Three Fiber. - [MotionCanvas](/docs/react-three-fiber-motion-canvas.md): A React Three Fiber Canvas replacement for linking Motion for React DOM and Three.js. ## JavaScript ### Get started - [Get started with Motion](/docs/quick-start.md): Learn how to install Motion and create your first animation. Motion can animate anything and is the only animation library capable of hardware accelerated animations. ### Animations - [animate](/docs/animate.md): Learn how to use Motion's animate() function. Animate an element to a target using hardware accelerated animations. - [Easing functions](/docs/easing-functions.md): Easing functions change the speed of an animation throughout the course of its duration. Learn which ones are included with Motion and how to use them. - [scroll](/docs/scroll.md): Learn how to create parallax and scroll-linked animations with Motion's scroll() function. It's backwards-compatible with all browsers but also uses ScrollTimeline where possible for hardware accelerated animations. ### Gestures - [hover](/docs/hover.md): Learn how to create true hover gestures with Motion's hover function. It filters out touch events to fix "stuck" UIs and other broken behaviour. - [inView](/docs/inview.md): Detect when an element enters or leaves the viewport using Motion's browser-native inView() function. - [press](/docs/press.md): Learn how to create press gestures with Motion's press() function. Its simple API lets you respond to press start, end and cancel gestures, automatically filtering secondary mouse/touch events and adding keyboard accessibility by default. ### Motion Values - [motionValue](/docs/motion-value.md): Learn how to use Motion Values, a performant way to track the state and velocity of animated values. ### Integrations - [CSS](/docs/css.md): Learn how to make spring animations purely in CSS with Motion's spring function. - [Integrate Motion with Webflow](/docs/webflow.md): Learn how to install Motion in your Webflow project for amazing animation performance and improved SEO. ### Guides - [FAQs](/docs/faqs.md): Frequently asked questions about Motion. - [Feature comparison](/docs/feature-comparison.md): Compare the bundle size and feature set of Motion and GSAP. - [Improvements to Web Animations API](/docs/improvements-to-the-web-animations-api-dx.md): Motion adds a number of features that improve the developer experience of the Web Animations API, and patches up some cross-browser inconsistencies. - [Migrate from GSAP to Motion](/docs/migrate-from-gsap-to-motion.md): Learn how to improve performance and SEO by migrating your animations from GSAP to Motion. - [Performance](/docs/performance.md): What makes an animation perform well? Perform poorly? Get the most performance from your web animations with Motion. - [Upgrade guide](/docs/upgrade-guide.md): How to upgrade to the latest version of Motion. ### Utils - [delay](/docs/delay.md): A delay function locked to the animation frame loop. - [frame](/docs/frame.md): Learn about Motion's powerful high-performance animation loop and how to use it to batch reads and writes per animation frame. - [mix](/docs/mix.md): Learn how to mix two numbers, colors, complex strings, arrays and objects using Motion's powerful mix function. - [spring](/docs/spring.md): Learn how to use Motion's spring generator to create physics-based animations. - [stagger](/docs/stagger.md): Learn how to stagger animations across elements with Motion's stagger function. - [transform](/docs/transform.md): Learn how to transform and map values from one range into another with Motion's powerful transform function. - [wrap](/docs/wrap.md): Learn how to wrap numbers within a range. This is perfect for looping through a range infinitely. ## Vue ### Get started - [Get started with Motion for Vue](/docs/vue.md): Get started with Motion for Vue with our installation guide and interactive examples. ### Animations - [Animation](/docs/vue-animation.md): Learn how to animate with Motion for Vue. Discover springs, exit animations, layout animations, scroll animations and more. - [Gestures](/docs/vue-gestures.md): Learn how to use Motion for Vue's powerful gesture system to trigger animations and events. - [Layout animations](/docs/vue-layout-animations.md): Learn how to create layout and shared layout animations with Motion for Vue. - [Scroll animations](/docs/vue-scroll-animations.md): Learn how to create scroll-linked and scroll-triggered animations with Motion for Vue. - [Transitions](/docs/vue-transitions.md): A transition defines how values animate from one state to another. Learn how to configure transitions in Motion for Vue, with durations, cubic bezier curves, springs and more. ### Components - [AnimatePresence](/docs/vue-animate-presence.md): Learn how to quickly make exit animations with Motion for Vue's AnimatePresence component. - [LayoutGroup](/docs/vue-layout-group.md): Animate layout across component groups with the LayoutGroup component. - [LazyMotion](/docs/vue-lazymotion.md): Reduce the bundlesize of Motion for Vue by lazy-loading functionality with the LazyMotion component. - [motion](/docs/vue-motion-component.md): The motion component is a DOM element supercharged with 120fps animations and gestures. - [MotionConfig](/docs/vue-motion-config.md): Learn how use the MotionConfig component to set a default transition for all components, define reduced motion settings, or set a security policy. - [Reorder](/docs/vue-reorder.md): Learn how to create simple drag-to-reorder effects with Motion for Vue's Reorder components. ### Motion Values - [Motion values](/docs/vue-motion-value.md): Learn how to use Motion's motion values, a performant way to track state and velocity. - [useMotionTemplate](/docs/vue-use-motion-template.md): Combine multiple motion values with a string template. - [useMotionValueEvent](/docs/vue-use-motion-value-event.md): Subscribe to motion value events from a Vue component. - [useScroll](/docs/vue-use-scroll.md): Learn how to create scroll-linked animations with Motion's simple yet powerful useScroll hook. - [useSpring](/docs/vue-use-spring.md): useSpring creates a motion value that animates to its target with a spring. - [useTime](/docs/vue-use-time.md): A motion value that updates every animation frame with the duration, in milliseconds, since it was created. - [useTransform](/docs/vue-use-transform.md): useTransform creates a new motion value that transforms the output of one or more motion values. - [useVelocity](/docs/vue-use-velocity.md): Create a motion value that tracks the velocity of another motion value. ### Hooks - [useAnimate](/docs/vue-use-animate.md): Create an animate function with animation controls, timelines, scoped selectors and automatic cleanup. - [useAnimationFrame](/docs/vue-use-animation-frame.md): Create an animation loop that runs a callback every frame. - [useDragControls](/docs/vue-use-drag-controls.md): Learn how to manually start/stop dragging a motion component with the useDragControls hook. - [useInView](/docs/vue-use-in-view.md): A simple state hook for detecting when an element is within the viewport. - [useReducedMotion](/docs/vue-use-reduced-motion.md): A hook that determines whether the user prefers reduced motion. ### Integrations - [Integrate Motion with Radix](/docs/vue-radix.md): Learn how to animate Radix components with Motion for Vue. Easily add layout, exit and spring animations to your Radix components. With live code examples for Tabs, Tooltip and more.