MotionCanvas
React Three Fiber (R3F) uses the Canvas component to establish a 3D scene. Using this component will break context with parent components.
To link Motion 3D context with DOM Motion, for example to share a default transition or link the LayoutCamera with layout animations, the MotionCanvas
component can be used instead.
It shares all the same props as R3F's Canvas
component, with the omission of resize
, as MotionCanvas
implements its own resize options to sync with Framer Motion's layout animations.
It's also mandatory to enable 3D scenes within layout animations.
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!