Smooth React Animations with Framer Motion

Animations add a variety of drama to web pages, from moving objects to elements that grow, decrease in size, and bounce from one location to another, creating a fun and interactive experience for users.

Developers can also use animations to make interactions intuitive; this could be a way to guide users through various actions on a web application.

In this article, we’ll explore an animation library called Framer Motion and how developers can add smooth animations to their applications.

Framer Motion

Framer Motion is an open-source production-grade library for creating smooth animations and effects. Framer and Framer Motion are sometimes confused as the same. However, Framer is a tool for designing websites and prototypes, while Framer Motion is an animation library. 

The Framer team created Framer Motion but later separated from Framer to become an independent open-source project.

Framer Motion, recently rebranded as Motion, is accessible to developers and different frameworks, not limited to React, including Vue and JavaScript. It is useful for building smooth animations to not only beautify the UI but also make it interactive.

What is the purpose of animations on a website?

Animation is a technique that involves creating movement or an illusion of movement and a visual effect by displaying still images or changing elements rapidly. This causes the brain to interpret these fast movements as continuous motion.

There are different purposes of having animations on your website, and the principles of effective animation include; 

Purpose-driven animations: Before working with animations, you need to understand their purpose. Apart from making a site or application visually pleasing and expressing creativity, animations should have a functional purpose; for example, they can be used to guide users to take certain actions, provide feedback, etc. 

Accessibility: Considering accessibility, even down to the animations on a web application, is important, as some users may be sensitive to motion and should have the option to turn off or turn on animations. This promotes inclusivity.

Timing and Ease: Timing of an animation is important; it shouldn't be too fast or too slow. Some animations start low and move fast. This is why easing functions are important, and you may have seen easing functions like ease-in, ease-in-out, etc.

Consistency: Consistency is an important aspect of web design; if elements on a web page do not look like they belong there, it can impact how the site is received. Animation style should be consistent across the site to make everything feel like it belongs together, giving the site a more natural and organized look and feel.

Here’s an article about different types of animation libraries for websites, and what to consider when selecting them. 

Components of Framer Motion (Motion)

There are various features of the framer motion, including;

Motion: Motion component <motion /> is the core component API that allows us to animate HTML and SVG elements. 

AnimatePresence:  AnimatePresence is a component that enables exit animations. What this means is it animates elements when they mount(appear) and when they unmount(disappear).

LayoutGroup: LayoutGroup: This groups multiple components whose animation affects each other, even if they may animate at different times. 

For example, if you create a card with an image that slides out slightly when the card is hovered over, both components can be grouped so their visual effect is coordinated.

Different types of animations can be achieved using Motion, including;

• Loading Animation: The loading animation shows that something within the application is in a loading state or being processed.

• Hover Animation: Hover visual effect is when a user moves their mouse over an element, like a link or a button, and the element becomes active and inactive when they move away from the element.

• Scroll Effect: Scroll animations are when an element enters or leaves a screen (which is where the content is displayed) or viewport.

• Page transition: Page transition animation allows users to navigate from one view or page to another smoothly.

Animation Examples with Motion

Let’s walk through how to add different types of animations using Framer Motion in this tutorial. 

Prerequisite: You should already be familiar with setting up a React project. 

Step 1: Set up the project

For this example, we've already created a React project and added a component folder. Inside the folder, we have a file called AnimationPage.jsx, where we’ll write the code for different animation styles. 

Step 2: Install Motion

We’ll use npm to install Motion by running the command npm install motion in the terminal. 

npm install motion

Step 3: We’ll also import motion to the top of AnimationPage.jsx like so; 

import {motion} from "motion/react"

Step 4: Let’s try out some animations!

Hover Animation

In the image below, we have a div styled with a width, height, margin, and a background color.

Instead of using <div>, we are using <motion.div>, which allows us to add animation to the element using props. In our code, we're using the whileHover prop to make the div scale twice (2x) its original size.  When the hover ends, the div will return to its initial size.  

In the image above, we see that the size of the div has been scaled to twice the original size of the one in the first image.

Transition Animation 

Let's see how to add a simple transition animation.

The transition code determines how scaling behaves. We already have the whileHover prop that scales the box twice(2x) its size, and the transition controls the timing and flow of the hover animation. After applying this transition, you'll notice that the scaling starts slowly and then increases in speed. 

Exit Animation 

This works like a toggle effect, where you can show and hide elements. Let's create an element that hides and shows the div when a button is clicked. For the exit animation, we’ll use the AnimatePresence component.

Let’s go through the code below; 

• The AnimatePresence wrapper detects changes. In the example, the initial state is set to true. When the showDiv state becomes false, it triggers the exit animation. 

• {showDiv? (<motion.div ... />): null} is the condition we set to show the blue box if showDiv is true and hide the box if showDiv is false. 

• Inside the <motion.div > component we have the whileHover, and transition props, including the style prop, which was explained earlier.

• We applied motion to the button <motion.button>, just like we did with <motion.div>. The <motion.button> component lets you animate the button when there's an interaction.

• We also added style to the button, which gave it a pink background color, padding, border radius, and set the cursor to pointer.

• The onclick event onClick={() => setShowDiv(!showDiv) } toggles the state of showDiv. If showDiv was true, when you click on the button, it becomes false, and if showDiv was false, it becomes true.

• whileTap prop, whileTap={{y:1}} adds an animation to the button so that it shows that the button was tapped or pressed.

• {showDiv ?"Hide" : "show"} dynamically add a label to the button, if showDiv is true or the box is visible, and the button label shows Hide, but if showDiv is false or the box is hidden, the button label says "show"

Scroll Animation

Scroll-triggered animations occur when an element enters or leaves the viewport. 

In the image below, we created an array of objects that define different boxes, each with a title, color, width, and height.

• {boxes.map(item, i)=>(<motion.div> … </motion.div>))}: Loops through the boxes array created at the top of the file, and renders each element with <motion.div>,ensuring each item has its own styling and animation effect. 

• key={i} keeps track of each box.

• The style prop inside < motion.div> is where we set each box's width, height, background color, positioning, text color, and border radius. 

• The animation includes initial, whileInView, Transition, and ViewPort props.
  
  Initial ={{opacity:0.5,y:80} sets each box at half opacity and shifts the box 80px of its original height.
  
  whileInView={{opacity:1,y:0}} sets each box at full opacity, and it sits at its original position.
  
  transition={{duration:0.6}} determines how long the animation lasts.
  
  viewport={{once: false}} The animation plays anytime the element scrolls into view.

Summary

Framer Motion, or Motion as it is now called, makes it possible for developers to incorporate different types of animation effects with ease within their projects.

With animation, developers can shine creatively and bring their imaginations to life, and in turn deliver a UI that's both captivating and intuitive.

Animations also give a website a more modern and professional feel, and improve usability, which can boost user engagement and interaction.

Frequently Asked Questions