3D

[mattgperry]

Framer Motion 3D

This PR adds 3D support to Framer Motion via react-three-fiber. It supports most of the same features as Framer Motion for the DOM, such as animations, variants, exit animations and whileHover/whileTap.

Install

npm install three @react-three/fiber framer-motion

Use

Framer Motion 3D supports all the same components as r3f, but as special motion versions.

import { motion } from "framer-motion/three"

function App() {
  return (
    <Canvas>
      <motion.mesh initial={{ scale: 0 }} animate={{ scale: 1 }} />
    </Canvas>
  )
}

Variants can be passed from the DOM through to 3D by replacing Canvas with MotionCanvas:

import { motion } from "framer-motion"
import { motion as motion3d, MotionCanvas } from "framer-motion/three"

function App() {
  return (
    <motion.div initial="hidden" animate="visible">
      <MotionCanvas>
        <motion3d.mesh variants={{ hidden: {scale: 0}, visible: {scale: 1} }} />
      </MotionCanvas>
    </motion.div>
  )
}

TODO:

• Set default spring settings to something more appropriate to the small values often used in 3D

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 5b5bd54:

Sandbox	Source
Framer Motion: Simple animation	Configuration
App Store UI using React and Framer Motion	Configuration
Framer Motion: Reorder animation	Configuration
Framer Motion: growing item positionTransition issue	Configuration
Framer Motion: Image lightbox	Configuration

[huntercaron]

Not a ton of feedback as I'm not an expect on the core motion apis, but the overally gist and my early testing is 💯 very close to a shippable first concept

[huntercaron]

This should be inside the mesh yeah?

[huntercaron]

what does this do / why?

[mattgperry]

I'll add a comment, but this basically ensures onUpdate fires (because we animate changes) but that the final frame is the exact value we read the motion values as (returning 0 from the easing function)

[huntercaron]

These are mostly copied over for now yeah?

[mattgperry]

Yeah they're quite similar although return props for r3f rather than binding events directly

[huntercaron]

I wonder how to expand this stuff into other nodes like material nodes and geometry nodes?

To animate color at least we'd want MaterialNode for motion.meshBasicMaterial and whatnot

another concept R3F has is "piercing" so you can do like <mesh material-color="pink" /> maybe we can do something there?

[mattgperry]

This will already animate color, its just typed this way, and supports piercing for transforms. But I think we'd have to do something extra for material-color