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