React Example

Value transform & path drawing

An example of linking SVG path length to a drag gesture using Motion for React's easy useTransform hook.

Matt Perry

Related docs

Motion component

Animate elements with a declarative API. Supports variants, gestures, and layout animations.

Motion values overview

Composable animatable values that can updated styles without re-renders.

useTransform

Transform the output of one motion value into a new motion value.

Gesture animation

An overview of all the gestures available in Motion for React.

Motion component

Animate elements with a declarative API. Supports variants, gestures, and layout animations.

Motion values overview

Composable animatable values that can updated styles without re-renders.

useTransform

Transform the output of one motion value into a new motion value.

Gesture animation

An overview of all the gestures available in Motion for React.

Motion Studio

Enhance your AI code editor with this example

Use Motion Studio to create new components or infuse static designs with animations based on "Value transform & path drawing" and 300+ other examples.

Discover Motion Studio

Value transform & path drawing

Related docs

Motion component

Motion values overview

useTransform

Gesture animation

Motion component

Motion values overview

useTransform

Gesture animation

Enhance your AI code editor with this example

Stay in the loop

Stay in the loop