Jump to content
GreenSock

Thomas H

Overlapping layers on scroll reduce performance mobile

Recommended Posts

Hi all,

 

I am currently facing an issue with a section on my website with overlapping layers. My goal is to show all three subjects in layers on the bottom of the screen, and when further scrolling showing the complete layers iteratively.

 

The application can be found in the Codepen: . 

 

The problem I am facing is that the performance on mobile phones seems to decay significantly causing laggy or bad fps while scrolling. The performance on laptops seems to be perfectly acceptable I have tested this on both android and iOS, and all types of browsers.

 

I hope you guys can shed some light on the situation!

 

Looking forward to hearing from you.

 

Kind regards,

Thomas

 

 

 

See the Pen qBoPYQJ by thomashelling (@thomashelling) on CodePen

Link to comment
Share on other sites

Hi Thomas!

 

Welcome to the forums!

 

Tell me, are you experiencing such laggy behaviour with the example pen you have provided or is it a different application with very large images layered on top of each other and/or many looping animated elements on the DOM?

  • Like 1
Link to comment
Share on other sites

Hi Dipscom,

 

Thanks a lot! 

 

The laggy behaviour is already present in the current codepen. When opening the codepen link directly in iOS one immediately notices a lag when arriving at the three overlapping layers.

 

Hope you can reproduce it and to hear from you soon!

Link to comment
Share on other sites

Hey Thomas,

 

I've forked your pen and had a look here on my phone as well as my desktop (I know you said it works smoothly on desktop). I've added <meta name="viewport" content="width=device-width, initial-scale=1"> to the header and loaded on my Android but saw no laggy behaviour.

 

I understand you said you saw it on iOS. I don't have an iPhone or iPad to hand now but I'll have one tomorrow. I shall check and report back but, I'll be very, very, very surprised to see any laggy behaviour on that Pen.

Link to comment
Share on other sites

No lag here on iPhone 12pro and iPad pro 2020.

Link to comment
Share on other sites

Hi Dipscom and iDad!

 

I have checked this on multiple devices and multiple screens, both android and iOS and its a subtile difference.


Please also note the fluent scroll from the upper section against the below section. It stutters a bit, and I feel this is the reason that with more content my animation is stuttering. 

 

You can also find the link to my website, but the animations there are a bit more complex.

 

 

Link to comment
Share on other sites

Yeah, it seemed fine on my iPhone 12 and iPad. 

 

iOS Safari seems to struggle in certain scenarios rendering-wise (not directly related to GSAP). Filters are horrible. And perhaps because you've got 2 position: fixed elements layered on top of each other with a linear gradient and transforms constantly changing...the way Safari does compositing/layerizing may just make it challenging. 🤷‍♂️

Link to comment
Share on other sites

Hi Greensock, thanks for your reply! 

I do experience similar laggy behavior on chrome on my phone (iPhone 13 pro)

 

 

  • Like 1
Link to comment
Share on other sites

It's sneaky but chrome on iPhone is actually safari underneath. Apple only allows their own browser (I know. Boo)

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

Thanks a lot for your replies!

 

In the end I have resolved the issue by removing GSAP for that specific element and simply used position sticky!

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.
×