Memu

I tried to create a codepen but unfortunately the problem is not showing there.. Anyway, the section that contains this animated text has display: flex; justify-content: center; flex-wrap: wrap; after I removed those values from the section it seems to work fine and no autoscroll in mobile. Is there any rules with using display: flex; and gsap that I should know? Thank you for your support!! :]

Hi. I'm trying to activate scrollTrigger after animation completed and I have a very strange problem on mobile only. Every time I refresh the page, the page scrolls down automatically right after scrollTriger has been activated and I can't understand why.. my code: window.onload = function(){ gsap.registerPlugin(ScrollTrigger); let elementRevealA = document.querySelector(".hero h2"); let elementRevealB = document.querySelector(".hero span"); function afterCompleteA(){ setTimeout(function(){ gsap.to(elementRevealA,{ scrollTrigger: { trigger: 'body', scrub: 1, start: "top top", end: "+=40%", }, opacity: 0, y: -400, skewX: 30, rotate: 10, }); }, 500); } gsap.from(elementRevealA,{ duration: 0.9, y: 100, skewX: -30, rotate: -10, opacity: 0, ease: "ease-in", onComplete: afterCompleteA, }); function afterCompleteB(){ setTimeout(function(){ gsap.to(elementRevealB,{ scrollTrigger: { trigger: 'body', scrub: 1, start: "top top", end: "+=30%", }, opacity: 0, y: -400, skewX: 30, rotate: 10, }); }, 500); } gsap.from(elementRevealB,{ duration: 0.9, y: 100, skewX: -30, rotate: -10, opacity: 0, ease: "in-out", onComplete: afterCompleteB, }); } I coludn't show this problem on codepen so I added a video that shows the problem clearly.. Please tell me if you have any idea why this happening. Thank you :] scrollTrigger bug on mobile (1).mp4