Strange behaviour when using scrollTrigger and React JS

[JoeH]

Hi all,

 

I'm not able to provide a CodePen for this I don't think (because I'm using React).

 

I'm using Routes and CSSTransition, the problem arises when going between 2 pages which transition, these pages use the same components.

 

On the page is a component which is a gallery and uses scrollTrigger to animate in each image in the gallery, my code for this is below.

 

What happens is that when the transition is over and the second page has loaded, the scrollTrigger is not triggered (even if I scroll).

 

The unusual part is that if I resize the browser width it triggers.

 

I understand I'm not exactly giving much to go by here so let me know how I can demonstrate the problem better, I can set this up somewhere it this helps.

 

 

const GalleryType1 = ({assets}) => {

  const GalleryRef = useRef(null);

  useEffect(() => {
    gsap.utils.toArray(GalleryRef.current.children).forEach(section => {
      gsap.timeline({
        scrollTrigger: {
          trigger:section,
          start: "center bottom",
          end: "center top",
        }
      })
      .to(section.children[0].children[0].children[0], 1, {transform: "scaleX(0)", transformOrigin: "right", ease: "power2.inOut"})
      .fromTo(section.children[0].children[0].children[1], {scale: 1.4}, {scale:1, ease: "power2.inOut", duration: 0.9}, '-=0.8')
      .add(function() {
        section.children[0].children[0].classList.add('loaded');
      })
    });
  }, []);

  return (
    <>
      <div id="gallery-type-1">
        <div className="container-fluid">
          <div ref={GalleryRef} className="row">


              {assets.map(({ title, subtitle, image }) => (
                <div className="col-6 col">
                  <div className="gallery-item">

                    <div className="gallery-image-item-wrapper">
                      <div className="gallery-item-cover"/>
                      <div className="gallery-item-image" style={{ backgroundImage:"url("+image+")" }}>
                      </div>
                    </div>
                    <div className="text">
                      <div className="heading">{title}</div>
                      <div className="sub-heading">{subtitle}</div>
                    </div>

                  </div>
                </div>
              ))}


          </div>
        </div>
      </div>
    </>
  )
};

export default GalleryType1;

 

[ZachSaucier]

Hey Joe.

 

16 hours ago, JoeH said:

I'm not able to provide a CodePen for this I don't think (because I'm using React).

Sites like CodeSandbox are easier to use with React. Lots of people make React demos with GSAP  Learn more about doing that here. 

 

16 hours ago, JoeH said:

The unusual part is that if I resize the browser width it triggers.

It sounds like ScrollTrigger just needs a .refresh() when the new page is loaded then.

[JoeH]

Thanks Zach!

 

What worked was putting the

ScrollTrigger.refresh();

After my first line

const GalleryType1 = ({assets}) => {