Want to build websites in no-time? Announcing the new Framer Beta.Learn more
Framer
Documentation3D
MotionCanvas
  • Overview
  • Motion
  • Handshake
  • Guides
  • API Documentation
Want to build websites in no-time? Announcing the new Framer Beta.Learn more
Framer
  • Teams
  • Showcase
  • Developers
  • Resources
    • Tutorials
    • Examples
    • Components
    • Templates
    • Sessions
    • Support
    • Updates
  • Blog
  • Pricing
  • ···
    • Blog
    • Pricing
Documentation3D
MotionCanvas
  • Overview
  • Motion
  • Handshake
  • Guides
  • API Documentation
Getting started
  • Introduction
  • Examples
API
  • Animation
  • Transition
  • Gestures
  • MotionValue
  • Utilities
Components
  • motion
  • AnimatePresence
  • LayoutGroup
  • LazyMotion
  • MotionConfig
  • Reorder
3D
  • Introduction
  • LayoutCamera
  • LayoutOrthographicCamera
  • MotionCanvas
Motion resources
  • Accessibility
  • Reduce bundle size
  • Upgrade guides
Code in Framer
  • Utilities
  • RenderTarget
  • Property Controls
Community
  • GitHub
  • Discord

MotionCanvas

A Canvas component for linking Framer Motion with Framer Motion 3D.

React Three Fiber (R3F) uses the Canvas component to establish a 3D scene. Using this component will break context with parent components.

To link Framer Motion 3D context with Framer Motion, for instance to share a default transition or link the LayoutCamera with layout animations, the MotionCanvas component can be used instead.

import { MotionConfig, motion } from "framer-motion"
import { MotionCanvas, motion as motion3d } from "framer-motion-3d"
export function App() {
return (
<MotionConfig transition={{ type: "spring" }}>
<motion.div animate={{ scale: 2 }}>
<MotionCanvas>
<motion3d.boxGeometry animate={{ x: 1 }} />
</MotionCanvas>
</motion.div>
</MotionConfig>
)
}

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.

PreviousLayoutOrthographicCameraNextAccessibility

Framer

  • Teams
  • Pricing
  • Showcasenew
  • Blog
  • Developers
  • Updates

Platforms

  • Web
  • macOS
  • Windows
  • iOS
  • Android

Learn

  • Tutorials
  • Examples
  • Templates
  • Sessions

Resources

  • Components
  • Input Kit
  • State of Prototyping
  • Desktop Prototyping
  • Prototyping Tool
  • Mockup Tool
  • Wireframing Tool
  • UI/UX Design Tool
  • Graphic Design Tool
  • User Testing

About

  • Loupe
  • Community
  • Company
  • Careers
  • Legal

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2022 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement