Jump to content


ScrollTrigger progress intermittently incorrect on page refresh

Moderator Tag

Recommended Posts

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)



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



Link to comment
Share on other sites



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:




Hopefully this helps.

Happy Tweening!

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.