mhraby

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

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...

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...