Jump to content
GreenSock

JoeH

Strange behaviour when using scrollTrigger and React JS

Recommended Posts

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;

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Thanks Zach!

 

What worked was putting the

ScrollTrigger.refresh();

After my first line

const GalleryType1 = ({assets}) => {

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×