Gsap Animation not working when refresh page on mobile if not on top of the page

[mhraby]

Hi! 

this issue is so specific, I can't recreate it on codepen... But here's the problem:

when I'm on mobile, if the page is not on top of the page I have this error:
 

ScrollTrigger.js:1203 Uncaught TypeError: Cannot read properties of undefined (reading 'end')
    at self.refresh (ScrollTrigger.js:1203:1)
    at ScrollTrigger.init (ScrollTrigger.js:1672:1)
    at new ScrollTrigger (ScrollTrigger.js:821:1)
    at __webpack_modules__../node_modules/gsap/ScrollTrigger.js.ScrollTrigger.create (ScrollTrigger.js:1930:1)
    at _scrollTrigger (gsap-core.js:422:1)
    at new Tween (gsap-core.js:3264:1)
    at Object.to (gsap-core.js:3548:1)
    at animations.js:747:5
    at Array.forEach (<anonymous>)
    at ./src/js/animations.js (animations.js:725:16)

If I add this line to my js it works but another animations are broke (the ones that are before in the page)
 

ScrollTrigger.config({
  limitCallbacks: true,
});

Any idea what's wrong?

Here's is one of the animation that break on mobile:
 

//get all parallax section
const parallaxImgs = gsap.utils.toArray('.img-parallax');
if (parallaxImgs.length) {
  parallaxImgs.forEach((parallaxImg) => {
    const xMoveImg = parallaxImg.dataset.xmove ? parallaxImg.dataset.xmove : 0;
    const yMoveImg = parallaxImg.dataset.ymove ? parallaxImg.dataset.ymove : 0;
    const rotateImg = parallaxImg.dataset.rotate
      ? parallaxImg.dataset.rotate
      : 0;

    const heroCenter = document.querySelector('.hero-center');
    let triggerParallax;
    let startParallax;
    let stopParallax;

    if (parallaxImg.classList.contains('hero-center__img')) {
      triggerParallax = heroCenter;
      startParallax = 'top top+=120';
      stopParallax = 'bottom top';
    } else {
      triggerParallax = parallaxImg;
      startParallax = 'top-=100 bottom';
      stopParallax = 'bottom top-=300';
    }

    gsap.to(parallaxImg, {
      xPercent: xMoveImg,
      yPercent: yMoveImg,
      rotate: rotateImg,
      ease: 'none',
      scrollTrigger: {
        trigger: triggerParallax,
        start: startParallax,
        end: stopParallax,
        //markers: true,
        scrub: 0.5,
      },
    });
  });
} //end images Parallax

I wonder why we have to be on top of the page to refresh the animations...

[GreenSock]

You definitely shouldn't need to be at the top of the page for it to work without errors. Nobody else has reported anything like this (that I can recall), so it sounds very odd. I really wish I could tell you what the problem is, but it's virtually impossible for us to do without a minimal demo or some way to reproduce the problem on our end. 

 

If I were you, I'd try to isolate it as much as possible by starting with a VERY stripped-down version of your page (as few elements/triggers as possible) and see if it works. Then start building it up until it breaks. 

 

You're using the latest version of ScrollTrigger, right? (3.10.4 as of right now)

[mhraby]

Finally I found that a parameter in another tween was causing the problem, I removed once: true and it's working.

That tween was on top of page that's why it was working on top but not in the middle of the page.

 

I'm not sure why "once" was causing the issue, but at least my problem is solved. Maybe it can help someone else, even if I don't have explanation...

[GreenSock]

It's tough to say without seeing a minimal demo, but I believe this was an edge case that was already fixed. Are you on 3.10.4?

 

Also keep in mind that the once: true killed at ScrollTrigger after it ran once, so if it was a pinned ScrollTrigger,  it would of course eliminate the pin, thus altering the document flow/layout. For example, if it was pinned for 300px it would add 300px of padding to the element (pinSpacing: true by default) and then when it was killed, that padding would go away and shift things below that back up. See what I mean? 

[mhraby]

Hi! That make sense! Thank's a lot for this explanation!