Learn the benefits of using Tailwind CSS on your next project and how it differs from other CSS solutions like Styled Components. 

Why Use Tailwind CSS for Your Next Project

Smooth and cool page transitions are something we all love to see while browsing on [Dribbble](https://dribbble.com/search/page%20transitions). I have always been fascinated and asked myself how I could do it for my sites. 

Once, I was able to do achieve it in a site built with [Next.js](https://nextjs.org/) by using a library called [next-page-transitions](https://www.npmjs.com/package/next-page-transitions). It allowed me to create the transitions I wanted with CSS. However, I hit a problem. 

It was very limiting and inflexible since it was made through CSS classes. I couldn't create a custom experience on every page without having a lot of classes and having to deal with re-renders. Thankfully, Framer Motion's Animate Presence API makes it possible to create sleek and custom page transitions in any React framework easily without having to worry about these problems.  

## Animate Presence

In my previous [post](https://dev.to/joserfelix/getting-started-with-react-animations-308a), I introduced the `<AnimatePresence/>` component. It triggers the `exit` prop animations from all its children when they're removed from React's render tree. Basically, it detects when a component unmounts and animated this process. 

Recently, Framer Motion introduced a prop called `exitBeforeEnter`. If it is set to **true**, it will only render one component at a time. It will wait for the existing component to finish its animation before the new component is rendered.  This is perfect for handling page transitions since we can guarantee that only a component or page is rendered at a time.

## A Small Example

Let's test what we learned about `<AnimatePresence/>`. First, we'll test it without the `exitBeforeEnter` prop by doing a simple transition to see how it behaves. 

This website will be a mimic of an E-commerce. It will have two pages: Store and Contact Us. They will have a very simple layout. Like this: 

![Initial layout.](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1603011677/page-transitions-in-react/Screenshot_2020-09-18_041434_illgyx.png)

![Page%20Transitions%20In%20React%20e82675384cc446ee818b5f99688f90dd/Screenshot_2020-09-18_041647.png](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1603011697/page-transitions-in-react/Screenshot_2020-09-18_041647_l4wxim.png)

Our first step is to wrap our pages inside a `<AnimatePresence/>`. Where we wrap it will depend on where our router is rendering the pages. Keep in mind that each of the children needs to have a unique `key` prop so it can track their presence in the tree. 

In Next.js we would head to the `_app.js` file, and wrap the `<Component>` with `<AnimatePresence/>`.

```jsx
// pages/_app.js

import { AnimatePresence } from "framer-motion";
import "../styles/index.css";

function MyApp({ Component, pageProps, router }) {
  return (
    <AnimatePresence>
      <Component key={router.route} {...pageProps} />
    </AnimatePresence>
  );
}

export default MyApp;
```

For Create React App, we would use it wherever our router is rendering the pages. 

```jsx
import React from "react";
import { Switch, Route, useLocation, useHistory } from "react-router-dom";
import { AnimatePresence } from "framer-motion";

const App = () => {
  const location = useLocation();

  return (
    <AnimatePresence>
      <Switch location={location} key={location.pathname}>
        <Route path="/contact" component={IndexPage} />
        <Route path="/contact" component={ContactPage} />
      </Switch>
    </AnimatePresence>
  );
};
```

> 💡 Check out the website's code for each framework in this [GitHub repository](https://github.com/JoseRFelix/page-transition-tutorial).

Now that we have all our pages wrapped in an `<AnimationPresence>`, if we try to change routes, you'll notice that the current component never unmounts. 

![Component not unmounting on route change.](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1603011747/page-transitions-in-react/ezgif.com-gif-maker_djgpn9.gif)

This happens because Framer Motion is looking for an exit animation for each page, and it is not found because we haven't defined any `motion` component yet. 

Let's add some simple fade-out animation to each page. Like this: 

```jsx
import { motion } from "framer-motion"

<motion.div exit={{ opacity: 0 }}>
	... content
</motion.div> 
```

And now the components can unmount!

![Components doing unmounting animation.](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1603011999/page-transitions-in-react/ezgif.com-gif-maker__1_wqysn8.gif)

If you pay close attention, before our contact form disappears, the index page appears at the bottom, creating distraction and ruining the fluidity of our animation. This would be really bad if we were to have a mount animation on the Index page. 

This is where the `exitBeforeEnter` prop comes in handy. It guarantees that our component will have unmounted before allowing the new component to load in. If we add the prop In the `<AnimatePresence/>`, you will notice it is no longer a problem, and our transition is smooth and working as desired. 

```jsx
<AnimatePresence exitBeforeEnter/>
```

![Components smooth transition.](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1603012054/page-transitions-in-react/ezgif.com-gif-maker__2_u4dmn6.gif)

This is all that is needed to create transitions with Framer Motion. The sky is the limit when it comes to what we can do now!

## A Beautiful Transition From Dribbble

Have you ever wanted to create amazing transitions like those seen in Dribbble? I always have. Thankfully, Framer Motion allows us to re-create these with ease. Take a look at this design by [Franchesco Zagami](https://dribbble.com/shots/9068030-Iskos-Loading-Carousel): 

![Dribbble transition.](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1603012088/page-transitions-in-react/ezgif.com-gif-maker__4_irfei0.gif)

Let's try to re-create this awesome transition. 

When translating transition prototypes, it would be best to have the original file so the easings and details of the animation can be known. However, since we are taking a Dribble design, we'll re-create it by estimating its values. 

## Initial Transition

One of the elements that we first see is a black background that moves toward the end of the screen. This is really easy to re-create because of Framer's abstractions. 

First, we'll create a component that will house all our initial transition logic so it can be easier to maintain and develop.

```jsx
const InitialTransition = () => {};
```

Second, add the black square which will have the size of the screen. 

```jsx
const blackBox = {
  initial: {
    height: "100vh",    
  },
};

const InitialTransition = () => {
  return (
    <div className="absolute inset-0 flex items-center justify-center">
      <motion.div
        className="relative z-50 w-full bg-black"
        initial="initial"
        animate="animate"
	      variants={blackBox}
      />      
    </div>
  );
};
```

Instead of using `motion` props, we'll use variants since further down we'll have to handle more elements. 

> 💡 If you want to learn how to use Framer Motion variants, you can check out my [beginner's tutorial](https://jfelix.info/blog/getting-started-with-react-animations)!

So far, we will have a black square in the middle of our screen. We'll use the `bottom` and `height` property to create a downward movement. The `bottom` property will make it collapse towards the bottom. 

```jsx
const blackBox = {
  initial: {
    height: "100vh",
    bottom: 0,
  },
  animate: {
    height: 0,    
  },
};

const InitialTransition = () => {
  return (
    <div className="absolute inset-0 flex items-center justify-center">
      <motion.div
        className="relative z-50 w-full bg-black"
        initial="initial"
        animate="animate"
	      variants={blackBox}
      />      
    </div>
  );
};
```

This is what we have now: 

![Black square going from top to bottom.](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1603012148/page-transitions-in-react/4_ltuuw8.gif)

If you compare this to our reference, you'll notice the animation happens very quickly and not fluid enough. We can fix this with the `transition` property. We'll modify the `duration` to make our animation slower and `ease` to make it smoother. 

```jsx
const blackBox = {
  initial: {
    height: "100vh",
    bottom: 0,
  },
  animate: {
    height: 0,
    transition: {
      duration: 1.5,
      ease: [0.87, 0, 0.13, 1],
    },
  },
};
```

it will look much more similar:

![Smooth black box transition.](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1603012253/page-transitions-in-react/7_g8tnvr.gif)

Now, we have to re-create the text. Albeit, we'll do something different. Since our text is not located in the middle of our navbar, we'll just fade it out.  

The text is a little harder than the black square because if we take a close look it has an animated layer similar to a mask. A way we could achieve this effect is through SVG elements, specifically the `<text/>` and `<pattern/>`.  It will look like this: 

```jsx
<motion.div
  className="absolute z-50 flex items-center justify-center w-full bg-black"
  initial="initial"
  animate="animate"
  variants={blackBox}
>
	<motion.svg className="absolute z-50 flex">
	  <pattern
	    id="pattern"
	    patternUnits="userSpaceOnUse"
	    width={750}
	    height={800}
	    className="text-white"
	  >
	    <rect className="w-full h-full fill-current" />
	    <motion.rect className="w-full h-full text-gray-600 fill-current" />
	  </pattern>
	  <text
	    className="text-4xl font-bold"
	    text-anchor="middle"
	    x="50%"
	    y="50%"
	    style={{ fill: "url(#pattern)" }}
	  >
	    tailstore
	  </text>
	</svg>
</motion.svg>
```

This works by setting a custom text fill with `<pattern/>`. It will have two `<rect/>`. One for the color of the text and the other for the animation which will be a `motion` element. Basically, the latter will hide and will leave a white color.   

Let's proceed to animate this. 

First, let's introduce a new `transition` property called `when`. It defines 'when' should an element carry out its animation. We want our black box to disappear when all children are done rendering hence `afterChildren`: 

```jsx
const blackBox = {
  initial: {
    height: "100vh",
    bottom: 0,
  },
  animate: {
    height: 0,
    transition: {
      when: "afterChildren",
      duration: 1.5,
      ease: [0.87, 0, 0.13, 1],
    },
  },
};
```

Now, when our text finishes rendering, our black box will do its animation. 

Second, we'll animate the `<svg/>` . Here is its variant: 

```jsx
const textContainer = {
  initial: {
    opacity: 1,
  },
  animate: {
    opacity: 0,
    transition: {
      duration: 0.25,
      when: "afterChildren",
    },
  },
};

<motion.svg variants={textContainer} className="absolute z-50 flex"></motion.svg>
```

Finally, the `<rect/>`:

```jsx
const text = {
  initial: {
    y: 40,
  },
  animate: {
    y: 80,
    transition: {
      duration: 1.5,
      ease: [0.87, 0, 0.13, 1],
    },
  },
};

<motion.rect
  variants={text}
  className="w-full h-full text-gray-600 fill-current"
/>
```

> 💡 You may be asking yourself where do I get most of these animation values. All of them except the `ease` were fine tweaked through estimation. For easing, I used this [cheat sheet](https://easings.net/), specifically the `easeInOutExpo` values.

With all these hooked up, you should see this: 

![Text animation.](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1603012336/page-transitions-in-react/9_ozlsio.gif)

Awesome! It's looking very close to our design. 

You may have noticed that we can still scroll even though our screen is supposed to be busy showing our transition. Luckily this is really easy to fix. We just need to apply `overflow: hidden` to our `body` when it is animating and remove it when it's done. 

Thankfully, `motion` components have event listeners for this exact situation: `onAnimationStart`, and `onAnimationComplete`. The former is triggered when the animation defined in `animate` starts and the latter when it ends.

On our `InitialTransition` add the following: 

```jsx
<motion.div
  className="absolute z-50 flex items-center justify-center w-full bg-black"
  initial="initial"
  animate="animate"
  variants={blackBox}
  onAnimationStart={() => document.body.classList.add("overflow-hidden")}
  onAnimationComplete={() =>
    document.body.classList.remove("overflow-hidden")
  }
> 
</motion.div>
```

## Animating the Content

All that is left is creating sleek animation for our content. We won't copy the same animation as the design since it wouldn't match our site very well. What we'll do is a staggering fade in down effect on the children. Let's create our variants:

```jsx
const content = {
  animate: {
    transition: { staggerChildren: 0.1, delayChildren: 2.8 },
  },
};

const title = {
  initial: { y: -20, opacity: 0 },
  animate: {
    y: 0,
    opacity: 1,
    transition: {
      duration: 0.7,
      ease: [0.6, -0.05, 0.01, 0.99],
    },
  },
};

const products = {
  initial: { y: -20, opacity: 0 },
  animate: {
    y: 0,
    opacity: 1,
    transition: {
      duration: 0.7,
      ease: [0.6, -0.05, 0.01, 0.99],
    },
  },
};

export default function IndexPage() {
  return (
    <motion.section exit={{ opacity: 0 }}>
      <InitialTransition />

      <motion.div
        initial="initial"
        animate="animate"
        variants={content}
        className="space-y-12"
      >
        <motion.h1 variants={title} className="text-6xl font-black text-center">
          Welcome to tailstore!
        </motion.h1>

        <motion.section variants={products} className="text-gray-700 body-font">
        </motion.section>
      </motion.div>
    </motion.section>
  );
}
```

You'll be familiar with most of the properties except `delayChildren`. It applies a delay to all the children of a propagated animation. In other words, it will display the children after a certain amount of time. 

Aside from this, we are just making the element fade down, add a duration of 0.7 seconds, and smooth it with an easing. Here is the result: 

![Content fading down.](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1603012404/page-transitions-in-react/ezgif.com-gif-maker__5_khwt4b.gif)

Let's do the same for our contact page:

```jsx
const content = {
  animate: {
    transition: { staggerChildren: 0.1 },
  },
};

const title = {
  initial: { y: -20, opacity: 0 },
  animate: {
    y: 0,
    opacity: 1,
    transition: {
      duration: 0.7,
      ease: [0.6, -0.05, 0.01, 0.99],
    },
  },
};

const inputs = {
  initial: { y: -20, opacity: 0 },
  animate: {
    y: 0,
    opacity: 1,
    transition: {
      duration: 0.7,
      ease: [0.6, -0.05, 0.01, 0.99],
    },
  },
};

<motion.section
  exit={{ opacity: 0 }}
  class="text-gray-700 body-font relative"
>
  <motion.div variants={content} animate="animate" initial="initial" class="container px-5 py-24 mx-auto">
    <motion.div variants={title} class="flex flex-col text-center w-full mb-12">     
    </motion.div>
    <motion.div variants={inputs} class="lg:w-1/2 md:w-2/3 mx-auto">        
    </motion.div>
  </motion.div>
</motion.section>
```

![Transition between pages.](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1603012450/page-transitions-in-react/12_gltydr.gif)

## UX Improvements

Transitioning between Contact and Store will take a long while since it will play the initial transition again. Doing this every time will annoy the user. 

We can fix this problem by only playing the animation if it is the first page the user loads. To achieve this, we'll listen for a route change globally, and determine if it is the first render. If it is, we'll show the initial transition; otherwise, skip it and remove the delay on the children.

In Next.js we would detect a route change through `routeChangeStart` event on `_app.js`.

> 💡 Solutions will vary between frameworks. For the sake of keeping this blog post as simple as possible, I will elaborate on Next.js implementation. However, the [repository](https://github.com/JoseRFelix/page-transition-tutorial) will have solutions in their respective framework.

On `_app.js`:

```jsx
function MyApp({ Component, pageProps, router }) {
  const [isFirstMount, setIsFirstMount] = React.useState(true);

  React.useEffect(() => {
    const handleRouteChange = () => {
      isFirstMount && setIsFirstMount(false);
    };

    router.events.on("routeChangeStart", handleRouteChange);

    // If the component is unmounted, unsubscribe
    // from the event with the `off` method:
    return () => {
      router.events.off("routeChangeStart", handleRouteChange);
    };
  }, []);

  return (
    <Layout>
      <AnimatePresence exitBeforeEnter>
        <Component
          isFirstMount={isFirstMount}
          key={router.route}
          {...pageProps}
        />
      </AnimatePresence>
    </Layout>
  );
}
```

We are keeping the state on the first mount which is updated only when a user does the first route change. And, we pass this variable as a prop to the currently rendered page. 

On our `index.js` :

```jsx
const content = (isFirstMount) => ({
  animate: {
    transition: { staggerChildren: 0.1, delayChildren: isFirstMount ? 2.8 : 0 },
  },
});

// ...

export default function IndexPage({ isFirstMount }) {
  return (
    <motion.section exit={{ opacity: 0 }}>
      {isFirstMount && <InitialTransition />}

      <motion.div
        initial="initial"
        animate="animate"
        variants={content(isFirstMount)}
        className="space-y-12"
      >
        <motion.h1 variants={title} className="text-6xl font-black text-center">
        </motion.h1>

        <motion.section variants={products} className="text-gray-700 body-font">        
        </motion.section>
      </motion.div>
    </motion.section>
  );
}
```

That's it! Our page has amazing transitions and the user will not feel annoyed by replaying the same animation over and over. 

## Conclusion

Sleek page transitions are very important to achieve awesome web experiences. Using CSS can be hard to maintain since one will deal with many classes and lack of independence. Thankfully, Framer Motion solves this problem with Animate Presence. Coupled with `exitBeforeEnter`, it allows developers to create amazing page transitions. It is so flexible and powerful that through few lines of code, we could mimic a complex animation found on Dribbble. 

I hope this post inspires you to create awesome page transitions so you can impress your future employer or clients. 

For more up-to-date web development content, follow me on [Twitter](https://twitter.com/Jose_R_Felix), and [Dev.to](https://dev.to/jfelx)! Thanks for reading! 😎

Learn how to create beautiful animated page transitions with Framer Motion. 

Page Transitions In React

Interaction plays a key role in shaping the experience a user has on an application. Animations help define these interactions since the user's eyes tend to pay attention to moving objects. These catchy and moving elements tell a story that helps the application differentiate from competitors and bring a better user experience. 

Creating animations can be daunting, especially programming and handling orchestrations (how these coordinate between each other). Thankfully, amazing people have created abstractions in libraries that allow the developer to create seamless, hardware-accelerated animations efficiently.

In this post, I will give an introduction to Framer Motion and create simple animations with it. We'll be learning about motion components, orchestration, dragging, and automatic animations.

## React Animation Libraries

In React, we have two main animation libraries: [React Spring](https://www.react-spring.io/) and [Framer motion](https://www.framer.com/motion/). I like both of them, but I believe each one has a use case. 

React Spring is a spring-physics based animation library. These animations emulate real spring physics for smooth animations. It is really powerful and flexible. Almost all properties of HTML tags can be fully animated with React Spring. This is especially important for complex and SVG animations, however, Its main disadvantage is its high learning curve.    

Framer Motion is a motion library.  It is easy to learn and powerful with orchestrations. Contrary to React Spring, it has more types of animations: spring, tween, and inertia. Tween represent duration based animations like CSS, and inertia decelerates a value based on its initial velocity, usually used to implement inertial scrolling.

Framer Motion is perfect for handling animations on 99% of sites. Its main disadvantage is its lack of documentation and some properties won't work for SVG animations. 

Choosing between these libraries depends greatly on what you are building and how much you are willing to devote to learning animations. React Spring can do all that Framer Motion does with more flexibility, but it is harder to read and understand. I recommend it for custom, complex animations especially for SVG and 3D ([Three.js](https://threejs.org/)). 

For most websites, Framer Motion is better since it can handle most common cases and its learning curve is really low compared to React Spring. Also, its way of handling animations is more intuitive and declarative. This is why we'll focus on this library and learn about animations with it. The fundamentals of Framer Motion will be transferable to React Spring, however its syntax will be more abstract.   

## How It Works: Motion components

Framer motion core API is the `motion` component. There's a `motion` component for every HTML and SVG element. They work exactly the same as their HTML counterparts but have extra props that declaratively allow adding animations and gestures.

Think of `motion` component as a big JavaScript object that can be used to access all HTML elements. Here are some ways one would call a `motion` component: 

```jsx
<motion.div />
<motion.span />
<motion.h1 />
<motion.svg />
...
```

As said before, they allow for extra props. Some of the most used are: 

* `initial` defines the initial state of an element.
* `style` defines style properties just like normal React elements, but any change in the values through motion values (values that track the state and the velocity of the component) will be animated.
* `animate` defines the animation on the component mount. If its values are different from `style` or `initial`, it will automatically animate these values. To disable mount animations `initial` has to be set to `false`.
* `exit` defines the animation when the component unmounts. This works only when the component is a child of the `<AnimatePresence />` component.
* `transition` allows us to change animation properties. Here one can modify the duration, easing, type of animation (spring, tween, and inertia), duration, and many other properties.
* `variants` allows orchestrating animations between components.

Now that we know the basic props that `motion` can contain and how to declare them, we can proceed to create a simple animation. 

## Mount Animations

Let's say we want to create an element that on mount will fade in down. We would use the `initial` and `animate` prop.

Inside the `initial` property, we'll be declaring where the component should be located before it mounts. We'll be adding an `opacity: 0` and `y: -50`. This means the component initially will be hidden and will be 50 pixels up from its location. 

In the `animate` prop, we have to declare how the component should look when it is mounted or shown to the user. We want it to be visible and located on its initial position, so we'll add an `opacity: 1` and `y: 0`. 

Framer Motion will automatically detect that the `initial` prop has a different value from the `animate`, and animate any difference in properties. 

Our snippet will look like this:

```jsx
import { motion } from "framer-motion"

<motion.div
  initial={{ opacity: 0, y: -50 }}
  animate={{ opacity: 1, y: 0 }}  
>
  Hello World!
</motion.div>
```

This will create the following animation: 

![Card fading down](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1599544841/getting-started-with-react-animations/4_chpipj.gif)

Congratulations on creating your first animation with Framer Motion!

> 💡 You may have noticed that styles are missing from the snippets above. Some of the snippets will lack the styles in order to focus on Framer Motion's functionality.
>
> 📕 All animations in this post will have their own Storybook. [Here is the link](https://framer-animations.netlify.app/?path=/story/simple-fade-in-down-card--main) of the latter.

## Unmount Animations

Unmounting or exit animations are crucial when creating dynamic UIs, especially when deleting an item or handling page transitions. 

To handle exit animations in Framer Motions, the first step is to wrap the element or elements in an `<AnimatePresence/>`. This has to be done because:

* There is no lifecycle method that communicates when a component is going to be unmounted
* There is no way to defer unmounting until an animation is complete.

Animate presence handles all this automatically for us. 

Once the elements are wrapped, they must be given an `exit` prop specifying their new state. Just like `animate` detects a difference in values in `initial`, `exit` will detect the changes in `animate` and animate them accordingly.

Let's put this into practice! If we take the previous component and were to add an exit animation. We want it to exit with the same properties as it did in initial

```jsx
import { motion } from "framer-motion"

<motion.div
	exit={{ opacity: 0, y: -50 }}
  initial={{ opacity: 0, y: -50 }}
  animate={{ opacity: 1, y: 0 }}  	
>
  Hello World!
</motion.div>
```

Now, let's add a `<AnimatePresence/>` so it can detect when our component unmounts: 

```jsx
import { motion } from "framer-motion"

<AnimatePresence>
	<motion.div
		exit={{ opacity: 0, y: -50 }}
	  initial={{ opacity: 0, y: -50 }}
	  animate={{ opacity: 1, y: 0 }}  	
	>
	  Hello World!
	</motion.div>
</AnimatePresence>
```

Let's see what happens when the component unmounts:

![Card fading up](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1599544924/getting-started-with-react-animations/ezgif.com-gif-maker_y4hp1t.gif)

> 📕 [Storybook Link](https://framer-animations.netlify.app/?path=/story/simple-fade-out-up--main)

## Orchestration

One of Framer Motion's strong suits is its ability to orchestrate different elements through variants. Variants are target objects for simple, single-component animations. These can propagate animations through the DOM, and through this allow orchestration of elements.

Variants are passed into `motion` components through the `variants` prop. They normally will look like this: 

```jsx
const variants = {
  visible: { opacity: 0, y: -50 },
  hidden: { opacity: 1, y: 0 },
}

<motion.div initial="hidden" animate="visible" variants={variants} />
```

These will create the same animation as we did above. You may notice we passed to `initial` and `animate` a string. This is strictly used for variants. It tells what keys Framer Motion should look for inside the variants object. For the `initial`, it will look for 'hidden' and for `animate` 'visible'.

The benefit of using this syntax is that when the motion component has children, **changes in the variant will flow down through the component hierarchy**. It will continue to flow down until a child component has its own `animate` property.

Let's put this into practice! This time we will create a staggering list. Like this: 

![Card entering one after another.](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1599545055/getting-started-with-react-animations/ezgif.com-gif-maker_1_t2fae2.gif)

In the image, each item has an increasing delay between each other's entrance. The first one will enter in 0 seconds, the second in 0.1 seconds, the third in 0.2, and it will keep increasing by 0.1.

To achieve this through variants, first, let's create a variants object where we'll store all possible states and transition options:

```jsx
const variants = {
  container: {  
  },
  card: { 
  }
};
```

`variants.container` and `variants.card` represent each `motion` component we'll have. 

Let's create the animations for the cards. We see that the cards go from left to right while fading in. This means we have to update its `x` position and `opacity`.

As aforementioned, variants can have different keys for their animation states, however, we will leave it as `initial` and `animate` to indicate before mount and after mount, respectively. 

On `initial`, our component will be 50 pixels to the left and its opacity will be 0. 

On `animate`, our component will be 0 pixels to the left and its opacity will be 1. 

Like this:

```jsx
const variants = {
  container: {
  },
  card: {
    initial: {
      opacity: 0,
      x: -50
    },
    
    animate: {
      opacity: 1,
      x: 0
    }
  }
};
```

Next, we have to add the stagger effect to each of these cards. To achieve this we have to add the `container.transition` property which allows us to update the behavior of our animation. Inside the property, we'll add a `staggerChildren` property that defines an incremental delay between the animation of the children. 

```jsx
const variants = {
  container: {
		animate: {
      transition: {
        staggerChildren: 0.1
      }
    }
  },
  card: {
    initial: {
      opacity: 0,
      x: -50
    },
    
    animate: {
      opacity: 1,
      x: 0
    }
  }
};
```

Now, if we hook this variant to the `motion` components:

```jsx
import { motion } from "framer-motion";

const variants = {
  container: {
    animate: {
      transition: {
        staggerChildren: 0.1
      }
    }
  },
  card: {
    initial: {
      opacity: 0,
      x: -50
    },
    
    animate: {
      opacity: 1,
      x: 0
    }
  }
};

const StaggeredList = () => {
  return (
    <motion.div
      initial="initial"
      animate="animate"
      variants={variants.container}     
    >
      {new Array(5).fill("").map(() => {
        return <Card />;
      })}
    </motion.div>
  );
};

const Card = () => (
  <motion.div
    variants={variants.card}   
  >
    Hello World!
  </motion.div>
);
```

With this, our animation is complete and sleek staggered list ready!

![Card entering one after another.](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1599545055/getting-started-with-react-animations/ezgif.com-gif-maker_1_t2fae2.gif)

> 📕 [Storybook Link](https://framer-animations.netlify.app/?path=/story/orchestration-staggered-list--main)

## Dragging

Dragging is a feature that can be daunting to implement in an app. Thankfully, Framer Motion makes it a lot easier to implement its logic because of its declarative nature. In this post, I will give a simple, general introduction to it. However, in a future tutorial, I may explain with more details about how to create something more complex like a slide to delete.

Making an element draggable is extremely simple: add a `drag` prop to a `motion` component. Take for example the following:

```jsx
import { motion } from "framer-motion";

<motion.div drag>
  Hello World!
</motion.div>
```

Adding the `drag` prop will make it draggable in the x-axis and y-axis. It should be noted that you can restrict the movement to a single axis by providing the desired axis to `drag`.

There is a problem with just setting the `drag` property. It is not bound to any area or container so it can move outside the screen like this: 

![Card being dragged outside screen](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1599545000/getting-started-with-react-animations/7_vpjsem.gif)

To set constraints we give the `dragContraints` an object with our desired constraints for every direction: `top`, `left`, `right`,  and `bottom`. Take for example: 

```jsx
import { motion } from "framer-motion";

<motion.div
  drag
  dragConstraints={{
    top: -50,
    left: -50,
    right: 50,
    bottom: 50
  }}
>
  Hello World!
</motion.div>
```

These constraints allow the element to move 50 pixels maximum in any direction. If we try to drag it, for example, 51 pixels to the top, it will be stopped and bounced. Like this: 

![Card being dragged and colliding with constraints](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1599545092/getting-started-with-react-animations/ezgif.com-gif-maker_2_rurkh5.gif)

It is as there is an invisible wall with the form of a square that won't allow the component to move further.

> 📕 [Storybook Link](https://framer-animations.netlify.app/?path=/story/drag-block--main)

## Layout Property

The `layout` prop is a powerful feature in Framer Motion. It allows for components to animate automatically between layouts. It will detect changes to the style of an element and animate it. This has a myriad of use cases: reordering of lists, creating switches, and many more. 

Let's use this immediately! We'll build a switch. First, let's create our initial markup

```jsx
import { motion } from "framer-motion";

const Switch = () => {
  return (
    <div
      className={`flex w-24 p-1 bg-gray-400 bg-opacity-50 rounded-full cursor-pointer`}
      onClick={toggleSwitch}
    >
			{/* Switch knob */}
      <motion.div
        className="w-6 h-6 p-6 bg-white rounded-full shadow-md"
        layout       
      ></motion.div>
    </div>
  );
};
```

Now, let's add our logic:

```jsx
import { motion } from "framer-motion";

const Switch = () => {
	const [isOn, setIsOn] = React.useState(false);

  const toggleSwitch = () => setIsOn(!isOn);

  return (
    <div onClick={toggleSwitch}>
			{/* Switch knob */}
      <motion.div       
        layout       
      ></motion.div>
    </div>
  );
};
```

You may have noticed that only our knob has the `layout` prop. This prop is required on only the elements that we wish to be animated. 

We want the knob to move from one side to the other. We could achieve this by changing the container flex justification. When the switch is on then the layout will have `justify-content: flex-end`. Framer Motion will notice the knob's change of position and will animate its position accordingly.

Let's add this to our code: 

```jsx
import { motion } from "framer-motion";

const Switch = () => {
  const [isOn, setIsOn] = React.useState(false);

  const toggleSwitch = () => setIsOn(!isOn);

 return (
    <div
      style={{
	     background: isOn ? "#48bb78" : "rgba(203, 213, 224, 0.5)",
        justifyContent: isOn && "flex-end",
        width: "6rem",
        padding: "0.25rem",
        display: "flex",
        borderRadius: 9999,
        cursor: "pointer",   
      }}
      onClick={toggleSwitch}
    >
			{/* Switch knob */}
      <motion.div
        style={{
          width: "3rem",
          height: "3rem",
          background: "white",
          borderRadius: "100%",
          boxShadow:
            "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
        }}
        layout       
      ></motion.div>
    </div>
  );
};
```

I added some other styles so it can resemble the look of a switch. Anyway, here is the result: 

![Switch being toggled](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1599545162/getting-started-with-react-animations/11_eug7jn.gif)

Great! It is amazing how Framer Motion can do this automatically without having to deal with extra controls. Anyhow, it looks a little bland compared to what we are used to seeing on apps like Settings. We can fix this pretty quickly by adding a `transition` prop. 

```jsx
import { motion } from "framer-motion";

const Switch = () => {
 const [isOn, setIsOn] = React.useState(false);

 const toggleSwitch = () => setIsOn(!isOn);

 return (
    <div
      style={{
	     background: isOn ? "#48bb78" : "rgba(203, 213, 224, 0.5)",
        justifyContent: isOn && "flex-end",
        width: "6rem",
        padding: "0.25rem",
        display: "flex",
        borderRadius: 9999,
        cursor: "pointer",   
      }}
      onClick={toggleSwitch}
    >
			{/* Switch knob */}
      <motion.div
        style={{
          width: "3rem",
          height: "3rem",
          background: "white",
          borderRadius: "100%",
          boxShadow:
            "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
        }}
        layout    
				transition={{
          type: "spring",
          stiffness: 500,
          damping: 30,
        }}   
      ></motion.div>
    </div>
  );
};
```

We define a spring-type animation because we want a bouncy feel. 

The `stiffness` defines how sudden the movement of the knob will look. 

And, `damping` defines the strength of the opposing force similar to friction. This means how fast it will stop moving. 

These together create the following effect: 

![Switch being toggled with spring effect.](https://res.cloudinary.com/dmq9pzw0o/image/upload/v1599545143/getting-started-with-react-animations/10_fus9tx.gif)

Now our switch looks more alive! 

> 📕 [Storybook Link](https://framer-animations.netlify.app/?path=/story/layout-switch--main)

## Conclusion

Creating animations can be daunting, especially when many libraries have complex jargon. Thankfully, Framer Motion allows developers to create seamless animations with its declarative an intuitive API. 

This post was meant as an introduction to the fundamentals of Framer Motion. In future posts, I will create complex animations like swipe to expand and delete, drawers, shared layout, and many more. Please let me know in the comments if you have any suggestions as to what you want to see animated!

For more up-to-date web development content, follow me on [Twitter](https://twitter.com/Jose_R_Felix), and [Dev.to](https://dev.to/jfelx)! Thanks for reading! 😎


Learn the basics of animation in React using Framer Motion. We'll focus on learning about motion components, mount and unmount animations, orchestration, dragging, and automatic animations.

Getting Started with React Animations


"Designed and developed an e-commerce while focusing on search engine optimization, low maintenance cost, and scalability.

The project is built on Gatbsy.js, Typescript, and Snipcart. Snipcart allows for a secure e-commerce experience, and management of products, cart, payment, and shipping.

The most interesting part of this project was using Tailwind. It brings a maintainable and efficient solution to styling by reducing bundle size and making the site faster with reusable classes.",


A freshly made e-commerce

Mixcart

Designed and developed the front-end and back-end for a student dashboard to make the student's life easier.

The hardest challenge was designing an efficient React and Redux architecture. However, by using an elm inspired structure the project is now easy to develop with readable and modular Typescript.

The most interesting part was integrating Firebase Cloud Messaging.

Organize your homework, evaluations, and to-dos with your friends

My Study Planner

Designed and developed a concept website to showcase the development of a potential start-up website.

The project is a front-end and back-end monolith based on Typescript.

The user interface is powered by React, Redux, and Styled Components.

The back-end is mainly Express with Bulletproof Architecture which increases the project's maintainability and flexibility of development.

Jose Felix

Front-End Engineer

Blog.

Why Use Tailwind CSS for Your Next Project

Page Transitions In React

Getting Started with React Animations

Read all posts

Projects.

Mixcart

My Study Planner

JetNet

Front-End novelty in your inbox

Contact me