Filtering Item Animation in React with Framer Motion

Framer Motion

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">
{{ img, category }, i) => (
initial={{ transform: "scale(0)" }}
animate={{ transform: "scale(1)" }}
exit={{ transform: "scale(0)" }}


You can see the demo below

React Filtering Animation with Framer Motion


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