When changing a filter on an object array, the UI will never return to a higher quantity of objects after displaying a lower quantity. The array/filter functions correctly. I’ve deduced this to the motion.div around the ProjectCard function in the Services file. My example project is below.
https://codesandbox.io/p/github/rtnlsltn/test/test/test
If I remove the motion.div, the items display properly. The items are also not re-animating on update, as I would expect from framer (even when not displaying the correct quantity).
To replicate, click on “Full Stack” in the top boxes, then any other, then back to “Full Stack”. You will see the displayed Projects reduced to one. I’ve posted in the Framer discord without any luck.
const ProjectCard = ({
index,
name,
description,
tags
}) => {
return (
<motion.div variants={fadeIn("up", "spring", index * 0.5, 0.75)}>
test
</motion.div>
);
};
const Services = () => {
const [search, setSearch] = useState("all");
const [rerender, setRerender] = useState(false);
const ref = useRef()
const filterProjects = projects.filter((project) => {
if (search == "all") {
return project.categories
}
return project.categories == search
})
const filteredProjects = [...filterProjects];
return (
<>
<div className='mt-20 flex flex-wrap justify-around gap-10'>
{servicesList.map((service, index) => (
<ServicesCard key={servicesList.title} index={index} {...service} onSelect={setSearch} />
))}
</div>
<div className='mt-20 flex flex-wrap gap-7'>
{filteredProjects.map((project, index) => (
<ProjectCard key={project.index} index={project} {...project} />
))}
</div>
</>
);
};
1
The solution is to add state tracking to the motion.div.
EX:
const [animation, setAnimation] = useState(false);
const [state, setState] = useState(1);
<motion.div variants={fadeIn("up", "spring", index * 0.5, 0.75)} key={state} animate={'show'}>
I have not yet got animation working on state change, but this at least shows the objects.