jorniks

I am trying to achieve the animation on the team page of goodway.fr website. I have been able to pin the main container (pageRef) for each team member to scroll through then the page is released to continue the normal flow of the document. I am very interested in achieving the same animation. I am new to gsap and would appreciate guidance on achieving this. Please point me in the right direction of how to achieve the team image scroll as it is on the site. What I have tried 1. I have tried looping through the `imageContainer` ref and applying a timeline to each one but that didn't work. 2. I have added `onEnter` and `onUpdate` to gsap.to right after the end property. 3. I have tried removing the pageRef element and looping through the `teamMemberContainter` element to apply a gsap.timeline to each but that didn't work either. Attached is the JSX code that has brought me closest to achieving the animation from the goodway.fr website. From the 3 approaches above, kindly point me to what I did not do right or what I should have done. const OurTeam = () => { const pageRef = useRef(null), imageContainer = useRef([]), imageRef = useRef(null) useEffect(() => { const teamMemberContainterArray = gsap.utils.toArray(".teamMemberContainter") const gsapContext = gsap.context(() => { gsap.to(teamMemberContainterArray, { yPercent: -100 * (teamMemberContainterArray.length - 1), ease: "none", scrollTrigger: { trigger: pageRef.current, scrub: 1, pin: true, end: `+=${pageRef.current.offsetHeight}` } }) }, [pageRef]) return () => gsapContext.revert() //clean up }, []) return ( <div ref={pageRef} className="h-screen relative overflow-hidden"> {teamMembers.map((teamMember, index) => ( <div className="parent-size teamMemberContainter space-y-32 h-screen flex items-center"> <section ref={el => imageContainer.current.push(el)} key={index} className="grid grid-cols-12 sm:gap-x-8 gap-y-8 w-full max-w-3xl mx-auto"> <aside className="col-span-12 sm:col-span-6 space-y-3 min-h-80 overflow-hidden"> <div className="bg-gradient-to-l from-[#003380] to-[#3fff00] h-96 w-60 mx-auto relative"> <img ref={imageRef} src={teamMember.image} alt={`${teamMember.firstName} ${teamMember.lastName}`} className="team-member-image h-96 w-auto mx-auto absolute bottom-0" /> </div> </aside> <aside className="col-span-12 sm:col-span-6 text-center space-y-10"> <div className="space-y-2 uppercase"> <h2 className="text-6xl font-bold">{teamMember.firstName}</h2> <h2 className="text-6xl">{teamMember.lastName}</h2> <h6 className="text-2xl font-semibold text-gray-800">{teamMember.position}</h6> </div> <h2 className="space-y-2 text-xl font-medium">{teamMember.email}</h2> </aside> </section> </div> ))} </div> ) } export default OurTeam What I have tried onUpdate const OurTeam = () => { const pageRef = useRef(null); const imageContainer = useRef([]); const imageRef = useRef(null); useEffect(() => { const teamMemberContainerArray = gsap.utils.toArray('.teamMemberContainer'); const gsapContext = gsap.context(() => { gsap.to(teamMemberContainerArray, { yPercent: -100 * (teamMemberContainerArray.length - 1), ease: 'none', scrollTrigger: { trigger: pageRef.current, scrub: 1, pin: true, end: `+=${pageRef.current.offsetHeight}`, onUpdate: (self) => { const { progress } = self; const maxY = imageContainer.current[0].offsetHeight - imageRef.current.offsetHeight; const y = progress * maxY; gsap.set(imageRef.current, { y }); }, }, }); }); return () => { gsapContext.revert(); }; }, []); return ( <div ref={pageRef} className="h-screen relative overflow-hidden"> {teamMembers.map((teamMember, index) => ( <div className="parent-size teamMemberContainer space-y-32 h-screen flex items-center" key={index}> <section className="grid grid-cols-12 sm:gap-x-8 gap-y-8 w-full max-w-3xl mx-auto"> <aside className="col-span-12 sm:col-span-6 space-y-3 min-h-80 overflow-hidden"> <div className="bg-gradient-to-l from-[#003380] to-[#3fff00] h-96 w-60 mx-auto relative"> <img ref={(el) => (imageContainer.current[index] = el)} id={`team-member-image-${index}`} src={teamMember.image} alt={`${teamMember.firstName} ${teamMember.lastName}`} className="team-member-image h-96 w-auto mx-auto absolute bottom-0" /> </div> </aside> <aside className="col-span-12 sm:col-span-6 text-center space-y-10"> <div className="space-y-2 uppercase"> <h2 className="text-6xl font-bold">{teamMember.firstName}</h2> <h2 className="text-6xl">{teamMember.lastName}</h2> <h6 className="text-2xl font-semibold text-gray-800">{teamMember.position}</h6> </div> <h2 className="space-y-2 text-xl font-medium">{teamMember.email}</h2> </aside> </section> </div> ))} </div> ); };