Filtering Item Animation in React with Framer Motion

So basically, it’s not good to access directly real DOM when using virtual DOM such as React that implements virtual DOM, so I have been searching how to animate a React component when the component is unmounting immediately like the component is rendered using map function in javascript, so check out how its works.

Framer Motion

https://framer.com/docs

Here we will use framer motion, Framer Motion is an official library by Framer that is focused to make animating your HTML based on components and hooks, this is pure javascript, and didn’t use any CSS. Motion is a production-ready motion library for React from Framer. It brings declarative animations, effortless layout transitions, and gestures while maintaining HTML and SVG semantics.

Basic Setup React Filtering

The first step is to provide the data that will show on your app, below is a sample image with some categories like food, technology, etc.

Add CSS for layout styling

Create FilterButtons component

And then write code your App.js

And the result will look like this, there is no animation when the image is filtered cause React re-render the item and immediately the element is removed, it’s okay 😄 we will add it below.

Animate Image with Framer Motion

Install framer motion

npm i framer-motion

We will using <AnimatePresence /> and <motion /> from motion-framer

so let's edit your App.js, and import dependencies

import { AnimatePresence, motion } from "framer-motion"

Find and edit the code below like this

<div className="grid grid-col-3 gap-2">
  <AnimatePresence>
    {displayData.map(({ img, category }, i) => (
      <motion.div
        key={i}
        layout
        initial={{ transform: "scale(0)" }}
        animate={{ transform: "scale(1)" }}
        exit={{ transform: "scale(0)" }}
      >
        <img
          src={img}
          className="rounded"
          width="100%"
        />
      </motion.div>
    ))}
  </AnimatePresence>
</div>

We wrap the mapping image components with <AnimatePresence /> AnimatePresence allows components to animate out when they're removed from the React tree.

On the <motion.div /> we put props like Layout to be true, Initial of animation will scale at 0, animate will scale at 1 its mean size is normal, and on exit, it will scale at 0.

On <motion.div /> we should add a key or it will show an error.

It’s done, and the result will be like this.

You can customize your animation effect by editing the initial, animate, and exit props as your creative 😃.

You can see the demo below

https://0vgu9f.csb.app/

React Filtering Animation with Framer Motion

Conclusion

To add animation on a component in React is challenging rather than vanilla javascript or jquery cause they can access real DOM to animate it, but in react we should define all first to animate them, usually in react we have to iterate components, but this is the problem, react immediately re-render a DOM since the virtual dom is changed, so no way to make them animated. but here is a magic solution. Framer comes with an easy to use, just wrap it on <PresenceAnimate /> and set up the <motion.div />, when the element is removed they will run the animation before is gone.

Thanks

Reference: https://www.framer.com/docs