Scrolltrigger pins in wrong position on intitial load (React app)

[emily.conklin]

Hey guys, I am a n00b and I think I have determined the problem however I don't know how to fix it (I was not able to reproduce this problem in my sandbox environment) - maybe someone here can help! So on the initial page load the triggers for the second screen are in the wrong position, which I am assuming is because the second screen is loading before the banner component. It is fine when I resize the page / they move to the top and bottom of the second screen where they're supposed to be (I am assuming because both the banner component and image have already been cached). How do I fix this? This is my code snippet

 

  useEffect(() => {



    // MOVE THE COMPUTER SCREEN OVER

    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: animComputer.current,
        start: 'top top',
        // end: 'bottom bottom',
        endTrigger: '#chart-wrapper',
        scrub: true,
        markers: true,
        id: "move-across",  }
    });
    tl.to("#chart-wrapper", {xPercent: 50})
 

  });

 

 

[tailbreezy]

Have you tried to delay the gsap code on "DOMContentLoaded" and then "load" and optionally a raf ?

This will delay the code execution until the content is actually loaded.

 

Looks like overkill, but we wanna make sure our content is loaded right?  

 

document.addEventListener("DOMContentLoaded", function() {
	window.onload = function(){

		window.requestAnimationFrame(function() {
		// your gsap code
		})
	}
})

 

Other than this. It is hard to debug without a demo. Consider creating one that is stripped down version of what you are trying to achieve.

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

One problem I can spot is that your useEffect() hook is missing the array of dependencies, so that is basically being executed everytime the component re-renders.

 

Finally, do your best to create a live reduced sample using Codesandbox in order to have something live and editable that illustrates the issue. Makes debugging super easy and fast.

 

Happy Tweenng!!!

[emily.conklin]

Hey thanks for the reply, unfortunately it didn't work. I tried it inside a useEffect hook and outside of one it totally kills the animation in both instances (no start/end scrollers, triggers or movement).

[ZachSaucier]

20 minutes ago, tailbreezy said:

document.addEventListener("DOMContentLoaded", function() { window.onload = function(){

There's no reason to have a window load event nested within a document load event. Just use a window load event.

 

@emily.conklin My guess is that an image or some other content is being loaded after the ScrollTrigger is first set up. Not refreshing when that happens is one of the most common ScrollTrigger mistakes. 

 

As the others have said, please try to recreate the issue using CodeSandbox because doing so makes helping you much easier  

[emily.conklin]

Hey guys, I have recreated the issue in a sandbox and it works as expected / I initially built a dummy layout in a fairly bare bones repo and it works as this sandbox does; the problem is when I tried to recreate the same effect in my company website. The banner component is loading after the second screen image and the triggers are stuck where the second image initially loads... I have no idea to try and recreate the problem.

 

https://codesandbox.io/s/great-resonance-5sncv?file=/src/components/hero.js (my apologies the logic is in index.js)

 

 

[ZachSaucier]

Looking at your code, you should definitely pass in an empty array to the useEffect so that it doesn't run that code every time that the component re-renders:

useEffect(() => {
  // ...
}, [])

Additionally your ScrollTrigger.refresh() should be removed from where it currently is.

 

Instead you want to call refresh when the image has been loaded. Without a framework that'd be something like:

myImage.addEventListener("load", () => ScrollTrigger.refresh());

But there's probably a more React way of adding that listener.