Multiple Pins within React: Breaking animations

[Avenues]

Hi! 

 

I am currently having an issue within my React project where if I have multiple components on the same page that utilize Greensock's ScrollTrigger Pin functionality, then the animation of the second component breaks and occurs at the same time as the first component. I did a good bit of debugging to narrow down that it's definitely the pin functionality that is creating this issue. If all other pieces remain constant, but I comment out the pin: true on either component the page works as it should. Also if I don't have both component on the page with each other, each component also functions as it should. I've created a CodePen that demonstrates how the components should work. 

 

The first component is an image slider that slides apart and then text cycles through the center. The second component is a horizontal slider. While it works great within the CodePen, it doesn't work the same within my actual project. I've attached a video so you can see how the animation of the horizontal slider is actually occurring within the image slider component. I've also put my actual code for my project below so you can see the difference between the CodePen code and the React code. I searched the forums before posting and did find several others who had this issue, but the solutions I saw were to utilize the gsap.context, which I am already doing. 

 

GSAP code for the Image Slider: 

useLayoutEffect(() => {
    const splitWrapper = document.querySelector('.' + getSplitWrapper)
    const leftSide = document.querySelector('.' + getLeftSide)
    const rightSide = document.querySelector('.' + getRightSide)

    let ctx = gsap.context(() => {
      if (points) {
        const splitImagetimeline = gsap.timeline({
          scrollTrigger: {
            trigger: splitWrapper,
            start: 'top top',
            end: '+=4500px',
            pin: true,
            scrub: true,
          },
        })

        splitImagetimeline
          .to(leftSide, {
            x: -(window.innerWidth / 6),
            duration: 1,
          })
          .to(
            rightSide,
            {
              x: window.innerWidth / 6,
              duration: 1,
            },
            '<',
          )

        points.forEach((point, index) => {
          splitImagetimeline.fromTo(
            `.text-column-${index}`,
            {
              autoAlpha: 0,
              top: '110%',
            },
            {
              autoAlpha: 1,
              top: '50%',
              duration: 3,
            },
          )

          if (index !== points.length - 1) {
            splitImagetimeline.to(`.text-column-${index}`, {
              autoAlpha: 0,
              top: 0,
              duration: 3,
              delay: 2,
            })
          }
        })
      }
    }, splitImage)

    return () => ctx.revert()
  }, [points])

GSAP Code for the Horiziontal Slider: 

useLayoutEffect(() => {
    let ctx = gsap.context(() => {
      const sliderWrapper = document.querySelector('.' + getSliderWrapper)
      const sliderContainer = document.querySelector('.' + getSliderContainer)

      let scrollTween = gsap.to(sliderContainer, {
        ease: 'none',
        x: () => -(sliderContainer.scrollWidth - window.innerWidth),
        scrollTrigger: {
          trigger: sliderWrapper,
          start: 'center center',
          end: () => '+=' + (sliderContainer.scrollWidth - window.innerWidth),
          scrub: true,
          pin: true,
          invalidateOnRefresh: true,
        },
      })

      setScrollTimeline(scrollTween)
    })

    return () => ctx.revert();
  }, [])

 

Any help would be greatly appreciated! 

 

Thanks so much!

Nicole 

 

See the Pen YzRjPor by nicolekbaird (@nicolekbaird) on CodePen

[Rodrigo]

Hi,

 

Sorry to hear about the issues, but since the codepen example you're sharing seems to work as expected so there is not a lot we can do to help you  with a working example.

 

If possible re-create your issue in a minimal demo forking this Stackblitz starter template:

https://stackblitz.com/edit/react-cxv92j

 

Happy Tweening!