Motion for React Three Fiber
Motion for React Three Fiber is a simple yet powerful 3D animation library. It offers most of the same functionality as Motion for React, but for declarative 3D scenes.
This guide will help you create animations with Motion for React Three Fiber, but assumes you know the basics of both Motion for React and React Three Fiber.
Install
Motion for React Three Fiber is built upon the Three.js and React Three Fiber (R3F) libraries. Install all three from npm:
Warning: Motion for React Three Fiber is currently only compatible with React 18.
Usage
motion
components
For every R3F component, there's a motion
equivalent. Import motion
from "framer-motion-3d"
:
And use in place of your R3F components:
Animation
Motion for R3F supports all the same animation options as usual, including the initial
and animate
props, exit
and variants.
Currently, variants can't be automatically passed between the DOM and 3D worlds, but you can still share state to achieve similar results:
Supported values
3D motion
components support most of the the same transforms as their 2D equivalents:
x
,y
andz
scale
,scaleX
,scaleY
andscaleZ
rotateX
,rotateY
androtateZ
Additionally, color
and opacity
are supported on 3D primitives that support them, like meshStandardMaterial
, with support for more values coming in the near future.
Gestures
3D motion
components support the hover and tap gestures on R3F with a physical presence (like mesh
).
Motion values
Motion values are used to track the state and velocity of animating values, outside of React's render lifecycle.
With 3D motion
components, motion values are injected via their R3F attribute:
Layout animations
Images, and therefore 3D scenes, involved in layout animations can exhibit scale distortion. With the LayoutCamera
and LayoutOrthographicCamera
components this distortion can be corrected and the 3D scene can be incorporated into the layout animation naturally.
Examples
A Motion+ membership will give you early access to features & content, access to our private Discord, and more.
It's a one-time fee that grants lifetime access. No subscription necessary!