The animation that I tried to replicate
timestamp for the code: 34:15-34:45
timestamp for the animation demonstration: 34:47-34:54
It is easier to visualize through the link, but bascially the filtered items move to the destination instead of simply filtering
css properties used in the video
.popularMovie{
display: grid;
grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
grid-column-gap: 1rem;
grid-row-gap: 2rem;
}
The animation in the video basically just used only 2 motion.div with 2 layout attribute, the css used is also copied but the effect is not reproducable below is a code sandbox example that I made,
The answer is:
key property of the inner component:<motion.div key={item.id} layout className="box">
key property is unique (e.g. DO NOT use something like filtered.map((item, i) => <h2 key={i}/>))