ScrollTrigger progress intermittently incorrect on page refresh

[iDVB]

Expected:
We have two animations we want to happen. 

1) [Blue Square] One that is scrubbable with scroll

2) [Red Square] One that is not scrubbable and instead plays or reverses when a certain position in that same scroll is hit. (0.5)

 

Issue: 

When you scroll and then hit page refresh, sometimes the "progress" is correct and sometimes its incorrect and showing either "0" or "1". However, the [Blue Square] is correctly at the proper position. So even though it reporting to us incorrectly (causing the  [Red Square] to jump to the wrong position) it seems to be able to place the [Blue Square]  at the proper progress location.

 

Reproduction steps:

1. Open chrome to https://0w8lzh.csb.app/ (do not have DevTools open or page refresh seems to jump to top?)
2. Scroll the [Blue Square] i too approx 20% of the animation
3. Then hit the browser refresh a few times.
4. You should see that sometimes it works and sometimes it reads as "0" even though the [Blue Square] stays put at that 20%.

 

Perhaps there is a way to get what we're trying to do to work another way? We simply want that [Red Square] animation to jump to 0 or 1 ONLY on page refresh depending on the scroll progress at that time of the refresh.

Full code here: https://codesandbox.io/s/quiet-microservice-0w8lzh?file=/src/App.js

 

[Rodrigo]

Hi,

 

I've followed the instructions but can't replicate the issue you mention and illustrated in the gif you included, maybe I'm missing something or perhaps since you created the thread you added this part of the code:

onStart: () => {
  const box2 = document.getElementsByClassName("box2")[0];
  box2.innerHTML = tl.progress();

  if (tl.progress() > 0.5) {
    gsap.set(".box2", { x: "80vw" });
  } else {
    gsap.set(".box2", { x: "0vw" });
  }
},

Have you tried this without styled components? One thing I can think of  is that in React child components are rendered before the parent. It shouldn't matter IMHO because the code runs on the parent component, but just in case.

 

Another thing is passing the ref to the layout effect. Are you seeing some issues by passing just an empty array? As far as I can tell it shouldn't matter, but again check just in case.

 

Finally what you could try is checking the latest beta files:

https://assets.codepen.io/16327/gsap-latest-beta.min.js

https://assets.codepen.io/16327/ScrollTrigger.min.js

 

Hopefully this helps.

Happy Tweening!