How to pin parent while scrolling through children and pin each child for it's child to animate on scroll using gsap - React JS

[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>
      );
    };

 

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions.