Problem with ScrollTrigger on Mobile

[Heitor]

Hello! I am a beginner in GSAP animations, I created a code with several animations that work perfectly on desktop, but on the mobile there is a bug.

It seems that the end of the ScrollTrigger is not getting fixed in the footer, causing the start markers to expire above where they should be, loading the initialization of the animations of the elements earlier and hampering the navigation.

 

I've tried several solutions that I could imagine to be the cause of the problem, but I can't seem to resolve it.

Can someone help me? I would be immensely grateful.

 

Here's the site I'm referring to (I'll leave the markers active)

https://flymode.com.br/heitor-ferreira/

 

And the code

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>

<script>

gsap.registerPlugin(ScrollTrigger);

let tl1 = gsap.timeline({
scrollTrigger:{
trigger: ".container",
start: "top top",
end: 1 * window.innerHeight + "px",
scrub: 1,
pin: true,
markers: true,
}
});

tl1.to(".container",{
scale: 2.5,
duration: 2.5,
ease: "none",
});

tl1.to(".mockup", {
opacity: 0,
filter: "blur(20px)",
duration: 1,
ease: "none",
});

tl1.to(".container",{
filter: "blur(20px)",
opacity: 0.1,
ease: "none",
});

let tl2 = gsap.timeline({
    scrollTrigger:{
        trigger: ".conteudo",
        start: "top top",
        end: 1.5 * window.innerHeight + "px",
        scrub: 1,
        pin: true,
    }
})

tl2.fromTo(".conteudo-preto", {
    clipPath: "polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)"
},{
    clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)"
})

tl2.to(".conteudo",{
    opacity: 0,
    filter: "blur(10px)",
    duration: 1,
    
})

const modulos = document.querySelector(".modulos");

let tl3 = gsap.timeline({
    scrollTrigger:{
        trigger: modulos,
        start: "left left",
        end: () => 5 * modulos.offsetWidth + "px",
        scrub: 1,
        pin: true,
    }
});

tl3.to(modulos, {
    xPercent: -100,
    ease: "none"
});

</script>

 

 

 

 

 

 

[Rodrigo]

Hi @Heitor and welcome to the GreenSock forums!

 

I tested your page on my desktop in small screen, an android phone and an iPad and I can't seem to find anything odd in it. Maybe a bit slow in the android phone because of some blur filters you might be using.

 

What specific animation is not triggering correctly? Could you isolate that specific part of your project in a Codepen example so we can see a minimal demo? In order to get a better idea of what could be the problem. It's almost impossible for us to debug a live site, since we don't have access to the JS code of the part that is causing the problems. So I'll insist on a minimal demo and remember to include just the relevant part, you can create dummy sections that take some height in order to emulate the rest of the site.

 

Happy Tweening!