The below live example showcases the whole thing in action. Perspecitve will create a 3D-space for all its child elements, you can read more about it in this great article. These values alone are not enough to create a 3D effect, for this to work properly we must add the perspective CSS property to a parent DOM node. We then use our rotateX and rotateY values within the style property of the card, motion will convert the MotionValues to CSS values. Since our code still produces coordinates outside our domain we must use clamp: true option for useTransform. In our case it will transform our percentage coordinates into angles ranging from -angle to +angle. UseTransform transforms values of one domain into a different one. useMotionValue reuses the same MotionValue instance between renders for a given component instance in a comparable way to the useState hook. The MotionValue object will track the state of our animation as well as additional data like velocity. useMotionValue is a hook that creates a MotionValue instance. For this we will use Framer Motions useMotionValue and useTransform. We will use our x, y values to rotate the card along the respective axis resulting in a pretty convincing 3D push away effect. With the transformed coordinates we are ready to performan the animation.
FRAMER LOGO INSTALL
Creating a Perspective Cardįirst of all make sure to install framer motion using yarn or npm in your project if you want to follow along this guide. I personally find this size to be reasonable for the sheer amount of features and the ease of use framer-motion offers. Here you can see the build JS bundle sizes of this webpage and the very prominent purple framer motion block.Ĭurrently the inclusion of framer-motion adds about ~16kb when using compressed with gzip.
While I did see one or two hitches especially in more complicated cross transition animations my biggest gripe is the library size. Interoperability with Styled Components: every framer motion element can easily be styled with CSS-in-JS libraries like Styled-ComponentsĪs all good things come with a cost so does Framer Motion.Intuitive Syntax: I found the syntax to be really intuitive and really match nicely with react.
FRAMER LOGO FULL
Hover me! I am so 3D Framer Motion featuresīelow are some features I really like about framer-motion, you can see a full list on framers own marketing webpage Framer Motion
0 kommentar(er)
