-
-
Notifications
You must be signed in to change notification settings - Fork 908
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
3D #1377
3D #1377
Conversation
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:
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
render( | ||
<Canvas> | ||
<motion.mesh animate={{ scale: 2 }} scale={[1, 1, 1]} /> | ||
<motion.meshStandardMaterial color="#000" variants={{}} /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This should be inside the mesh yeah?
onAnimationComplete={() => resolve(output)} | ||
transition={{ | ||
duration: 0.1, | ||
ease: (t) => (t < 0.5 ? t : 0), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
what does this do / why?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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)
import { AnimationType } from "../../utils/types" | ||
import { ThreeMotionProps } from "../types" | ||
|
||
export function useHover( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
These are mostly copied over for now yeah?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah they're quite similar although return props for r3f rather than binding events directly
const setVector = | ||
(name: string, defaultValue: number) => | ||
(i: number) => | ||
(instance: Object3DNode<any, any>, value: number) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
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 andwhileHover
/whileTap
.Install
Use
Framer Motion 3D supports all the same components as r3f, but as special
motion
versions.Variants can be passed from the DOM through to 3D by replacing
Canvas
withMotionCanvas
:TODO: