Jump to content
Search Community

GSAP + ScrollMagic - scroll is not smooth and jerky in mobile/touch devices

Ramesh Ramasamy test
Moderator Tag

Recommended Posts

Hi GSAP Team,

 

Thank you for creating this amazing library. I have been started using this library in many of my projects. Coming to the issue at my hand, I am using GSAP, ScrollMagic and jQuery to trigger animations based on scroll position which is working smoothly in Desktop but facing jerk issue on scrolling fast in mobile. 

 

if we scroll the site fast in mobile or touch devices, we are able to encounter sharp jump behavior in page. Please find below URL to replicate the issue only in mobile.

https://hopeful-lewin-d4a355.netlify.app/

 

The same code used in above link is also penned in codepen link but unfortunately I couldn't able to replicate the issue in codepen.

 

Has anyone had similar issue or any kind assistance on this will be highly appreciated. 

 

Thanks in advance.

 

 

 

See the Pen YzGyOZM by ramesharr (@ramesharr) on CodePen

Link to comment
Share on other sites

@ZachSaucier/ @elegantseagulls : Thank you for prompt reply. Unfortunately I can't go back and built entire functionality in ScrollTrigger as the whole site is constructed using GSAP + ScrollMagic. I am using jQuery for other functionalities in the site.

 

I know ScrollMagic is different library but if you can help me to find out the root cause of jumpy scroll in mobile that would be really helpful.

 

https://hopeful-lewin-d4a355.netlify.app/

 

Thanks.

Link to comment
Share on other sites

I was looking at your example, and it's really difficult to see what's going on, or what the intended effect is. The only thing I'm seeing is the background change colors on load (I use Firefox).

 

That said, looking at your code, I'm not seeing anything in your code that I'd expect to really bog down mobile browsers. However, tweening things like z-index may have strange results, and backgroundColor isn't hardware accelerated, so if you're tweening a lot of background colors at once, which seems like could be the case here, it may bog down some mobile browsers.

  • Like 1
Link to comment
Share on other sites

@elegantseagulls: I am not tweening backgroundColor here (updated codepen) in this example. Just trying to translate div elements from 100 to 0 and then 0 to -100 so that it will appear as scroll-able page. Each div is represented in one backgroundColor. The height of each div is 100vh.  The example above is intentionally created to describe the issue in  mobile.
Below is the link to screen record of issue in mobile.You can clearly see the sharp jump-up of red background at 1.5 second.
https://github.com/ramesharr/gsap/blob/main/jerk.mp4?raw=true

Link to comment
Share on other sites

I'm confused as to why you wouldn't just make this a scrollable page, however this doesn't seem like a GSAP issue to me, as it's jumping on scroll end it seems. One way you could test would be to disable scrollmagic and just watch the GSAP tween. You might consider upgrading to the latest versions of GSAP and ScrollMagic to see if that fixes the issue, or perhaps see if you can file an issue on ScrollMagic's Github?

  • Like 1
Link to comment
Share on other sites

Yeah, as much as we love solving problems around here, we just don't have the resources to support old non-GreenSock libraries with known issues that haven't been updated in years. That's especially true when we have our very own GSAP-integrated plugin that does everything ScrollMagic does plus a lot more. These forums are for GreenSock tools only. If you need ScrollMagic help, maybe try posting an issue on the Github page but I just saw that there are almost 500 open issues there so I'm not terribly confident you'll get an answer. Sorry. 

 

Or you could try hiring someone to help. Feel free to post in our Jobs & Freelance forum. 

 

Good luck with the project. 

  • Like 1
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...