Animation using Framer

What's Framer Motion

When seeing inspiration for making your next website on Dribbble and Behance we get to see some cool animations we think about how can these be implemented. There are many libraries out there that can help us to do so. Framer is one of those libraries which help us to do it.

Getting Started

npm install framer-motion

Once installed we can import this by using motion in your components via the framer-motion package.

import {motion} from framer-motion

We have to replace our normal components by adding motion. in front of them like motion.div which gives us access to many properties we can use to animate.

Let's Animate

Now everything is done now let's animate

We will go through a few props:

animate

The animate prop can accept object of values. When one of them changes, the motion component will automatically animate to the new state.

reload the URL in case things do not work

keyframes

Set a value as an array and motion will animate through each of the values in turn. By default, each keyframe will be spaced evenly but we can set values using the transition property.

reload the URL in case things do not work

variants

From my point, I think variants are the most powerful thing which is there in Framer, with variants we can make pre-defined states that a component can be in. Variants can be dynamic functions that return different props based on data passed to each component's custom props.

reload the URL in case things do not work.

There are many other props and animations which are there for e.g. scroll-triggered animation, exit animation, 3D animation, etc.

---

To learn more:

https://www.framer.com/motion/

Thanks for reading