ScrollTrigger scrolls the page down automatically

[Memu]

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 :]

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). 

 

If you can't recreate the issue on CodePen or CodeSandbox, that means there's probably some other issue unrelated to GSAP on your site. I'd recommend starting as bare-bones as you can and then just build it up to get closer and closer to your "real" site until it breaks and then you'll know the issue. 

 

It kinda looks like you either have a scrollTo tween somewhere that's getting fired or you've got a ScrollTrigger with a snap value that's applying the snap. I'm completely guessing. 

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[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!! :]

[Cassie]

GSAP just tweens values, there's not really any rules about flexbox - If you make a demo showing the issue we can help a bit more!