I am trying to implement an animation on my grid items where they shrink and expand as the user scrolls, similar to the effect seen on this website . So far, I have made no progress on this. Can anyone provide me with a hint, suggest a package that can help achieve this, or guide me on how to approach implementing this animation?
This is how my list appears:
{projects?.map((projectData) => {
const project = tData(projectData)
const slug = toKebabCase(
`${projectData.en?.client}-${projectData.en?.project}`
)
return (
<div
key={projectData.id}
className="projects-grid-item"
style={{
backgroundImage: `url(${project?.mainImage})`,
}}
>
<div className="project-content-wrapper">
<div className="nox-h-4">
<Link href={`${PROJECTS_ROUTE}/${slug}`}>
<a>
{project?.client} - {project?.project}
</a>
</Link>
</div>
<div className="additional-info-wrapper nox-body-1">
<div className="services">
{project?.services}
</div>
<div>{project?.year}</div>
</div>
</div>
</div>
)}