ScrollTrigger issues on chrome when scroll position not top on reload

[michael_feh]

Hey there,

i have build a website with lots of scroll trigger animation. unveils, split text, pinned sections etc.
i just started cross browser testing and noticed that on chrome(mac) when i scroll down a page and then reload, lots of stuff breaks:
- pinned sections are misplaced

- the scroll position of the page itself changes on reload

- other effects stop working completely

I can't really put together a codepen for this, because when you reload a codepen the result always starts with scrolposition top.
Has anybody ever experienced something like this?

Is this a common problem with chrome?
Am I doing something completely wrong?
Any help much appreciated.

 

Here is the footer part that contains all animation script:

<script src="<?php echo get_stylesheet_directory_uri(); ?>/src/gsap/gsap.min.js"></script>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/src/gsap/ScrollTrigger.min.js"></script>

<script>
    
    /* navpoint */     
    
    $('.navpoint2').addClass('activenavpoint');
    

    /* logo color */

    var headerLogo = document.querySelector('.headerlogo');
    var hueValue = Math.floor(Math.random() * 360);
    headerLogo.style.filter = 'hue-rotate(' + hueValue + 'deg)';

    /* register gsap */         
    
    gsap.registerPlugin(ScrollTrigger);    

    /* unveil classes */ 
    
    let unveilfade1 = gsap.utils.toArray(".unveilfade1");
    unveilfade1.forEach((uvf1, i) => {
        gsap.from(uvf1, {
            autoAlpha: 0,
            ease: "power1.out",
            duration: 2,
            scrollTrigger: {
                trigger: uvf1, 
                start: "top 90%", 
                end: "top 90%",
            }
        });
    });
    
    let unveilfade2 = gsap.utils.toArray(".unveilfade2");
    unveilfade2.forEach((uvf2, i) => {
        gsap.from(uvf2, {
            autoAlpha: 0,
            ease: "power1.out",
            duration: 2,
            delay: 0.3,
            scrollTrigger: {
                trigger: uvf2, 
                start: "top 90%", 
                end: "top 90%",
            }
        });
    });
    
    let unveilfade3 = gsap.utils.toArray(".unveilfade3");
    unveilfade3.forEach((uvf3, i) => {
        gsap.from(uvf3, {
            autoAlpha: 0,
            ease: "power1.out",
            duration: 2,
            delay: 0.6,
            scrollTrigger: {
                trigger: uvf3, 
                start: "top 90%", 
                end: "top 90%",
            }
        });
    });    
    

    /* pinned panel    */

    gsap.utils.toArray(".panel").forEach((panel, i) => {
        ScrollTrigger.create({
            trigger: panel,
            start: "top top",
            pin: true,
            pinSpacing: false,
            markers: true
        });
    });

</script>
 

 

[mvaneijgen]

A Codepen demo is always useful. Codepen has a debug view in which you can view the page as it was just a normal HTML page (without all the Codepen stuf), this means it would behave as your live site. 

 

It is really important in which order you create your ScrollTriggers, seen that you're using loops and thus the order in which the ScrollTriggers are created do not reflect the order on which they appear on the page, without a minimal demo it is just a guess, but you could look in to refreshPriority (https://gsap.com/docs/v3/Plugins/ScrollTrigger/) Hope it helps and happy tweening! 

 

Quote

refreshPriority

number - it's VERY unlikely that you'd need to define a refreshPriority as long as you create your ScrollTriggers in the order they'd happen on the page (top-to-bottom or left-to-right)...which we strongly recommend doing. Otherwise, use refreshPriority to influence the order in which ScrollTriggers get refreshed to ensure that the pinning distance gets added to the start/end values of subsequent ScrollTriggers further down the page (that's why order matters). See the sort() method for details. A ScrollTrigger with refreshPriority: 1 will get refreshed earlier than one with refreshPriority: 0 (the default). You're welcome to use negative numbers too, and you can assign the same number to multiple ScrollTriggers.

[michael_feh]

thanks for quick answer.

i will build a demo as soon as it seems like a have an individual problem.
at the moment it seems more like im missing some basic concepts of scrolltrigger.

lets take this demo as example:

See the Pen gOBRBaM by GreenSock (@GreenSock) on CodePen

 

1) is the "debug view" the "full page view"?

2) when i use chrome to open full page view of the demo, scroll down a bit and reload, the page reloads from top position. why ist that?

3) "creating ScrollTriggers in the order they'd happen on the page" and "seen that you're using loops and thus the order in which the ScrollTriggers are created do not reflect the order on which they appear on the page" is hard for me to understand. using loops directly means that the order in which the scrolltiggers are created dont reflect the order of the elements on the page?

4) the demo  uses a for each loops as well, right? i cant really test this now ( see 2) ) but why doesnt this loop  cause any issues?

5) how would you work without loops? lets say we have a simple unveil animation like i have in my script. and this is used for all kinds of elements on the page (20-30 elements). if i cannot use the for each loop to map this animation to every element that has the unveil class. how would i do it? write 30 gsap.from with scrolltrigger snippets? one for each element?

6) i understand that the order matters to calculate the position for lower elements in the dom. but as i said, in my case everything works fine and is positioned correctly. the problems only occur when i reload the page with a lower scroll position. why does this reload scroll postition have an impact on the calculations or break the animations completely?

any help much appreciated!

[Rodrigo]

Hi,

 

To illustrate the concept Mitchel was referring to with loops let's look at this snippet:

<div class="element-1"></div>
<div class="element-1"></div>
<div class="element-2"></div>
<div class="element-2"></div>
<div class="element-1"></div>
<div class="element-1"></div>
<div class="element-2"></div>
<div class="element-2"></div>

So you have interchanged elements with two classes, nothing out of the ordinary, right? But what happens if you write this JS?

const elOne = gsap.utils.toArray(".element-1");
const elTwo = gsap.utils.toArray(".element-2");

elOne.forEach((el, i) => {
  gsap.to(el, {
    x: 100,
    scrollTrigger: {
      trigger: el,
      start: "top center",
      end: "bottom center",
      pin: true,
    },
  });
});

elTwo.forEach((el, i) => {
  gsap.to(el, {
    x: -100,
    scrollTrigger: {
      trigger: el,
      start: "top center",
      end: "bottom center",
      pin: true,
    },
  });
});

That will pin all 4 elements with the element-1 class including the final two that are before or above the first two elements with the class element-2. So the calculations made by ScrollTrigger for the two final element-1 elements will be wrong because of the pin space created in the second loop, so in those cases after the final loop is a good idea to run the refresh method:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.refresh()

const elOne = gsap.utils.toArray(".element-1");
const elTwo = gsap.utils.toArray(".element-2");

elOne.forEach((el, i) => {
  ...
});

elTwo.forEach((el, i) => {
  ...
});

ScrollTrigger.refresh();

 

7 hours ago, michael_feh said:

2) when i use chrome to open full page view of the demo, scroll down a bit and reload, the page reloads from top position. why ist that?

In order to correctly run it's calculations, ScrollTrigger needs to take the document to the top (scroll to zero) that's why you see that jump. You can use the clearScrollMemory method in order to keep the document at the top and avoid that jump back to the previous scroll position when reloading:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.clearScrollMemory()

 

Finally I forked your demo and replaced the images with a placeholder (the url you were using is not working) and it seems to work as expected when I reload the page in the debug mode on the latest Chrome and Firefox on Ubuntu 20 & 22:

See the Pen PovzpJr by GreenSock (@GreenSock) on CodePen

 

Debug:

https://cdpn.io/pen/debug/PovzpJr

 

Maybe there is a way to reproduce this that I'm missing 🤷‍♂️

 

Happy Tweening!

[michael_feh]

Thank you very much for your help and your answers.
This fixed the problem:

    window.addEventListener('load', () => {
        ScrollTrigger.refresh();
    });

 

Things now get positioned correctly no matter the scroll position on reload.

Unfortunalely a similar problem (first pinned element misplaced & some scrolltrigger effects stop working completely) still occurs when i resize the window after page load. 

I have tried:

    window.addEventListener('resize', () => {
        ScrollTrigger.refresh();
    });

without success.

Does somebody have an idea on how to get this under control?
Thanks in advance!
 

[Rodrigo]

Hi,

 

Sorry about the issues, but unfortunately without a minimal demo that clearly illustrates the issue is really hard for us to see what could be the problem here.

 

What I can tell you is that this is not needed at all:

window.addEventListener('resize', () => {
  ScrollTrigger.refresh();
});

ScrollTrigger catches window resize events internally and runs the refresh method after some time, it uses debouncing to optimize resources usage.

 

Have you tried removing other parts of your code in order to see if that works? Maybe remove some styles in your CSS, or remove some sections in your HTML?

 

Sorry I can't be of more assistance.

Happy Tweening!

[michael_feh]

Hey,

it was actually this line of css:

html {
  scroll-behavior: smooth;
}

that caused the issue.
Thanks for leading me in the right direction!

Is there a list of of things not to use in combination with gsap?
Regards.
 

[Rodrigo]

2 hours ago, michael_feh said:

Is there a list of of things not to use in combination with gsap?

There are a few but not a lot. GSAP is just JS and 100% framework agnostic, there are countless hours put into that, so our users focus just on creating awesome content!

 

You just ran into one of those, avoid scroll-behavoir: smooth with Scrolltrigger and ScrollSmoother.

 

Glad that you were able to solve this.

Happy Tweening!

[michael_feh]

i meant is there a list in the documentation of all things to avoid when using gsap?

cheers

[Rodrigo]

In our Learning Center you can find some resources on the subject but is mostly about better practices rather than GSAP problems, incompatibilities or shortcomings per se. On the left column you'll find these:

Happy Tweening!

[michael_feh]

i see thx