[ScrollTrigger scrolls the page down automatically]

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

[ScrollTrigger scrolls the page down automatically]

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