motion

Malicious tool definition detected

const sequence = async () => { await animate(scope.current, { x: 100 }) await animate(scope.current, { y: 100 }) await animate(scope.current, { x: 0, y: 0 }) } ``` ### Animate with Options ```jsx animate(scope.current, { scale: 1.5 }, { duration: 0.5, ease: "easeOut" }) ``` ### Keyframes ```jsx animate(scope.current, { x: [0, 100, 200, 0], scale: [1, 1.5, 1] }) ``` ## Key Points - `useAnimate` returns `[scope, animate]` - `scope` is a ref to attach to elements - `animate` function animates eleme

Malicious tool definition detected

## Key Points - Prefer `m` over `motion` for components - Use LazyMotion with the smallest feature set you need - Import from `motion/client` in Next.js Client Components - Use `motion/mini` when only imperative animations are needed <!-- Source references: - packages/motion/src/ - advanced-lazy-motion.md -->

Malicious tool definition detected

### Style Properties Standard CSS properties: - `opacity` - Opacity (0-1) - `backgroundColor` - Color values - `borderRadius` - Border radius - `width`, `height` - Dimensions - Any CSS property ### SVG Properties SVG-specific properties: - `pathLength` - Path drawing animation - `pathOffset` - Path offset - `pathSpacing` - Path spacing ## Keyframe Animations Use arrays for keyframe animations: ```jsx <motion.div animate={{ x: [0, 100, 200, 0], scale: [1, 1.5, 1], rotate: [0, 90, 180, 0] }} trans

Malicious tool definition detected

Tool: references/core-frameloop.md Description: --- name: core-frameloop description: frame, cancelFrame for Motion's animation loop --- # frame & cancelFrame Motion uses a batched animation loop.

Malicious tool definition detected

Tool: references/core-javascript-animate.md Description: --- name: core-javascript-animate description: Vanilla animate() API and animation sequences for elements, motion values, and objects --- # JavaScript animate() and Sequences Motion exposes an imperative `animate()` function for JavaScript (and React).

Malicious tool definition detected

const [scope, animate] = useAnimate() const runAnimation = () => { animate(scope.current, { x: 100 }, { duration: 0.5 }) } return <div ref={scope} onClick={runAnimation}>Animate</div> } ``` ## What's Included - `useAnimate` (mini) — imperative animation with WAAPI - No motion components, gestures, layout, or MotionValues - Smallest possible Motion footprint ## Key Points - Use `motion/mini` for minimal bundle when you only need imperative animations - WAAPI (Web Animations API) only — no JavaScr

Malicious tool definition detected

Tool: references/core-vanilla-motion-value.md Description: --- name: core-vanilla-motion-value description: motionValue() for creating MotionValues without React --- # motionValue (Vanilla) `motionValue` creates a `MotionValue` without React.

Malicious tool definition detected

Tool: references/core-variants.md Description: --- name: core-variants description: Declarative animation variants for reusable animation states --- # Variants Variants are named animation states that can be reused across components.

Malicious tool definition detected

Tool: references/features-optimized-appear.md Description: --- name: features-optimized-appear description: Optimized appear animations for SSR and first paint --- # Optimized Appear Motion supports “optimized appear” animations: animations that are defined in HTML/CSS (e.g.

Malicious tool definition detected

Tool: references/features-react-client.md Description: --- name: features-react-client description: motion/client for Next.js App Router and "use client" --- # motion/client For Next.js App Router and other React 18+ setups using `"use client"`, import from `motion/client` to get individual components.

Malicious tool definition detected

### Focus Handlers ```jsx <motion.input onFocus={(event) => { console.log("Focused") }} onBlur={(event) => { console.log("Blurred") }} /> ``` ### Combined States ```jsx <motion.button whileHover={{ scale: 1.05 }} whileFocus={{ scale: 1.05, boxShadow: "0 0 0 2px blue" }} whileTap={{ scale: 0.95 }} /> ``` ## Key Points - `whileHover` animates on hover - `whileFocus` animates on focus - Use for interactive element feedback - Handlers provide event objects - Works with all interactive elements - Com

Malicious tool definition detected

Tool: references/layout-animate-presence.md Description: --- name: layout-animate-presence description: Animate components entering and exiting --- # AnimatePresence `AnimatePresence` enables exit animations for components that are removed from the React tree.

Malicious tool definition detected

Tool: references/layout-animations.md Description: --- name: layout-animations description: Automatic layout animations with layoutId --- # Layout Animations Layout animations automatically animate components when their layout changes.

Malicious tool definition detected

Tool: references/layout-group.md Description: --- name: layout-group description: Coordinate layout animations across components --- # LayoutGroup `LayoutGroup` coordinates layout animations across multiple components.

Malicious tool definition detected

<!-- Source references: - packages/framer-motion/src/projection/use-instant-layout-transition.ts - motion-dom rootProjectionNode -->

Malicious tool definition detected

```jsx <Reorder.Item value={item} layout initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} > {item.name} </Reorder.Item> ``` ### Drag Constraints ```jsx <Reorder.Item value={item} dragConstraints={{ top: 0, bottom: 0 }} > {item.name} </Reorder.Item> ``` ## Key Points - `Reorder.Group` wraps reorderable items - `Reorder.Item` represents each item - `axis` controls drag direction - `values` and `onReorder` manage state - Automatic layout animations - Works with AnimatePresenc

Malicious tool definition detected

Tool: references/layout-use-presence.md Description: --- name: layout-use-presence description: usePresence and useIsPresent for AnimatePresence children --- # usePresence & useIsPresent When a component is a child of `AnimatePresence`, use `usePresence` or `useIsPresent` to access presence state.

Malicious tool definition detected

Tool: references/utils-cycle.md Description: --- name: utils-cycle description: useCycle to cycle through a list of states --- # useCycle `useCycle` returns the current item from a list and a function to advance to the next (or jump to an index).

Malicious tool definition detected

Sync MotionValue to React state or external systems: ```jsx const scrollProgress = useScroll().scrollYProgress const [label, setLabel] = useState("") useMotionValueEvent(scrollProgress, "change", (latest) => { setLabel(latest > 0.5 ?

Malicious tool definition detected

Tool: references/utils-path-geometry.md Description: --- name: utils-path-geometry description: calcLength, createBox, distance for projection and geometry --- # calcLength, createBox & distance Geometry utilities for layout projection and distance calculations.

Malicious tool definition detected

Tool: references/values-motion-value.md Description: --- name: values-motion-value description: Create and use motion values for reactive animations --- # useMotionValue `useMotionValue` creates a `MotionValue` that tracks the state and velocity of a value.

Malicious tool definition detected

```jsx function MouseFollower() { const mouseX = useMotionValue(0) const mouseY = useMotionValue(0) const springX = useSpring(mouseX) const springY = useSpring(mouseY) return ( <motion.div style={{ x: springX, y: springY }} onMouseMove={(e) => { mouseX.set(e.clientX) mouseY.set(e.clientY) }} /> ) } ``` ### Smooth Value Transitions ```jsx function Component() { const target = useMotionValue(0) const smooth = useSpring(target, { stiffness: 200, damping: 20 }) const toggle = () => { target.set(targ

Malicious tool definition detected

x, [0, 100], [0, 1], { clamp: true } ) ``` ## Common Patterns ### Scroll-Linked Opacity ```jsx function Component() { const { scrollYProgress } = useScroll() const opacity = useTransform(scrollYProgress, [0, 0.5], [1, 0]) return <motion.div style={{ opacity }} /> } ``` ### Color Interpolation ```jsx const color = useTransform( progress, [0, 1], ["#000", "#fff"] ) ``` ### Rotation from Position ```jsx const rotate = useTransform( x, [0, window.innerWidth], [0, 360] ) ``` ## Key Points - Transform

Malicious tool definition detected

Tool: references/values-velocity.md Description: --- name: values-velocity description: Access velocity of motion values --- # useVelocity `useVelocity` creates a MotionValue that tracks the velocity of another MotionValue.

Tool passed security scan