Resize grid items on scroll react

Question

I need to do animation where my grid items will shrink and expand on scroll like this https://k72.ca/en/work , I have no progress for now can anyone give me a hint or help me to find package for it or tell me how should it be done?

my list looks like this:

 {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>
            )}

Answer 1

Well, a good first step would be looking into the Intersection Observer API. It provides a way to track elements captured in the current viewport. A second step might be to use an observer instance to change classes of elements in order to trigger the transitions that you're looking to implement.

I haven't worked that much with Grid to be able to confidently predict the behavior, but you can play around a bit and see what you'll get. Hope that helps.