TABLE OF CONTENTS

What Is Framer Motion – Bring Your Website To Life!

Joanna Dyszkiewicz
By Joanna Dyszkiewicz

Why bother with Framer Motion?

If you think “why should I bother making my website more alive with (for example) Framer Motion”, think of a fact that you are exposed to around 5000 online messages begging you to read them each day.

But can you remember at least ONE from yesterday?

We literally ignore almost everything we see on the screen. Mostly because what we see on our screen is not appealing, interesting, nor is inviting us to any interaction.

Who wouldn’t like to be at least a bit more outstanding those days?

More visible? More inviting and interesting?

Businesses are fighting one with another to gain online attention, by using appealing copywriting techniques, as well as tricky or funny animation.

Why wouldn’t you do it yourself and learn to make really cool stuff?

You could build the elements that you want to stand out and be more visible, as well as others that you can interact with to be more engaging.

As you probably know, basics can be easily done with CSS, but if you want to make something really cool, you should think of using JavaScript as well.

It enables you to use crazy interesting animation libraries that can help you achieve a truly outstanding effect.

Let me introduce then…

Framer Motion library!

It is a successor to the Pose animation library, so if you used it before it will be way much easier for you to learn the new one.

Not sure what Pose is?

“Pose is a declarative motion system that combines the simplicity of CSS transitions with the power and flexibility of JavaScript.”

And so is Framer Motion.

Want to start using it immediately? Read my step-by-step Framer Motion explainer:

Advantages of Framer Motion

What I like in Framer Motion the most is that:

  • It’s extremely intuitive, super easy to use, and can be used with React.
  • you can create natural animations based on the properties being animated.
  • It offers more advanced listeners, as well as extends the basic set of event listeners provided by React.
  • It currently has support for hover, tap, pan, and drag gesture detection which is pretty much to get a great animation.
  • You can also use the Framer X tool to make even more advance animations (use free 14-day trial to check how it works).

Framer Motion Examples

Key frames

Variants

((click on the burger icon to check))

Drag

(drag to check)

Viewport scroll

(scroll to check)

MotionValues

Features of Framer Motion

Using Framer Motion is pretty intuitive.

You have a few “base” properties that you can use. They will help you create very simple or advanced animations that will work smoothly on the browser.

Creating Motion component

(slide left or right to check)

To create Motion component you just have to use motion from ‘framer-motion’ package.

You have to add needed tag (like “<motion.div />” ) and voilà – your component is ready. You can also use it with Styled Components.

Now you just have to add some code to make it alive.

The keyword here is animate.

You can pass CSS attributes here directly, or you can use something called variants. It will help you with setting animation states and needed styles in each of them.

Extra properties and events

It also provides some extra properties and events.

For example, you can set the initial animation state (your animation will start from it). It’s optional, so it’s up to you if you want to use it or not.

If you ever had some problems with animations on the element that is unmounted/mounted dynamically, this library is definitely for you. There is a component that help in this kind of situations. It’s called AnimatePresence. It can save you tons of time.

Transition functions

There are also many transition functions that can help us bring our animations to life and make their behavior seems more natural.

If you ever needed to add some effects while you hover over something, or drag it, then you can use one of many events available. You can use it on start, end of the event, or while it’s active.

For more advanced developers I recommend using MotionValue. It tracks the state and velocity of animating values.

“All motion components internally use MotionValues to track the state and velocity of an animating value.
Usually, these are created automatically. But for advanced use-cases, it is possible to create them manually and inject them into motion components.”

Other cool features

  • SVG animation – You can also animate SVGs! Motion provides some additional properties for those animations.
  • CSS variables – If you like to use CSS variables, then go ahead. It will work just fine.
  • Server-side rendering – “The animated state of a component will be rendered server-side to prevent flashes of re-styled content after your JavaScript loads.”
  • Framer X integration – to make some truly outstanding stuff.

Downsides of Framer Motion

Not supporting IE11

Unfortunately, if you have a project that has to work on IE11, then there may be a little problem, as Framer Motion doesn’t support it.

So, what now?

As you can see, Framer Motion has many interesting features that give you many possibilities when creating an animation.

It can help you create something simple as well as something complex by providing many events and gestures.

If this isn’t great then I don’t know what is.

Want to learn and start using it right away? Let me teach you step-by-step!

Want To Build a Website That Will Convert Your Users To Clients?

Leave a Reply