Filtering Item Animation in React with Framer Motion

Framer Motion

https://framer.com/docs

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.

Animate Image with Framer Motion

Install framer motion

npm i framer-motion
import { AnimatePresence, motion } from "framer-motion"
<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>

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Dicka Ismaji

Dicka Ismaji

Software Engineer — Tech Enthusiast — Professional Google Searcher github.com/dicka88