ScrollTrigger delay in mobile

[rfldesigner 0 Likes (Newbie)]

I couldn't simulate my problem in codepen and that's why I decided to make this post here on the forum.

I put a wordpress site in production, but when I view it on android (on several devices), there is a delay in the scrollTrigger animation.
 

gsap.utils.toArray('.scroll-trigger__title__center').forEach(triggerTitle => {
    gsap.from(triggerTitle, {
        yPercent: 100,
        ease: "power1",
        scrollTrigger: {
            trigger: triggerTitle,
            scrub: 1,
            start: "top 90%",
            end: "top 70%",
            markers: true
        }
    })
})

 

For example, in the above code, set the start and end to happen closer to the bottom of the page, but when I see it on mobile it only happens at the top of the page.

[mvaneijgen 1,709 Likes (Superhero)]

@rfldesigner welcome to the forum! 

 

Never animate your trigger element! ScrollTrigger uses the trigger element to do all its calculations! Right now you're moving this trigger yPercent: 100, so your trigger will never line up where you think it is! That could cause your issue.  

 

If that doesn't fix your issue I would go in to your sites files and disable some CSS and JS until you've found the culprit. If you can't reproduce the issue on codepen it is probably some other code that is interfering.  Hope it helps and happy tweening!