Jump to content
Search Community

ScrollTrigger delay in mobile

rfldesigner test
Moderator Tag

Recommended Posts

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.

Link to comment
Share on other sites

@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! 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...