Jump to content
Search Community

Any tips for smooth scroll animations on mobile?

sashaikevich test
Moderator Tag

Recommended Posts

I've made a complex animation that works perfectly on desktop. Spent about 5 months learning gsap+sm and working on it, and with the help of this community finally got there. But, now that it's live, I discovered that it's absolutely horrible on mobile!

 

For example, 

- some fixed elements that have fromTo animations, entering from outside the window erroneously appear when scrolled fast on mobile (but behave correctly when user's scroll speed slows)

- or the animations that base their calculations on the 100vh miscalculate, because the mobile browser shows, but then hides the url bar and other menus (chrome on iphone) 

Any good answers / best practice resources that you guys can direct me to? Thanks!
(Don't have a codepen example. It's live on my site, but don't know if pasting it here is frowned upon)

Link to comment
Share on other sites

Cool. It's here: https://littleguylogos.com/lp-scroll/

 

One thing I know I can do, is watch for a screen resize, and recalculate when the height changes (which happens when the tabs and url bars show/hide).

However, when I kill and rebuild my timelines and scrollmagic scenes on resize, the page position jumps to a completely different section. While that's acceptable on desktop (since it's manually triggered), triggering a resize each time the user changes the scroll direction on mobile (ie an automatic window resize) would make for a frustrating user experience on mobile. 

 

And calculating the outer window height in javascript didn't help 😕

 

Link to comment
Share on other sites

1 hour ago, sashaikevich said:

I've made a complex animation that works perfectly on desktop.

I'm on a new Macbook air and it's quite choppy for me on desktop :) It seems there are more serious issues happening. 

 

Taking a recording on the performance tab of my dev tools shows while scrolling through the entire page shows this:

image.png

You can see some sections where the processing is fluid (where the lines are very close together). But for most of the scrolling through the page is not smooth. There are some sections (where you see "Task") that froze completely for a significant amount of time.

 

I don't have time to go through how to fix all of the issues, but the majority is due to compositing which means the properties that you're animating are not really friendly for animation. They could be gradients, filters, clip paths, masks, partially opaque elements, or simply a lot of elements being animated at the same time. Also try not to change, especially animate, properties that cause reflow/layout.

 

You should take some time to learn how to use your dev tool's profiler functionality and go through the problematic sections. 

 

None of the performance issue has to do with GSAP's functionality. It all seems to be related to the properties that you're animating.

 

Side note: the site is over 15mb :( That's a huge website, especially for something without much content. I recommend minimizing that however you can.

  • Like 1
Link to comment
Share on other sites

14 minutes ago, ZachSaucier said:

You should take some time to learn how to use your dev tool's profiler functionality and go through the problematic sections. 

None of the performance issue has to do with GSAP's functionality. It all seems to be related to the properties that you're animating.

Side note: the site is over 15mb :( That's a huge website, especially for something without much content. I recommend minimizing that however you can.

I thought it was a somewhat light page :( 

All the graphics are svg, and for a graphics rich page, it's only 3.8mb. Why is it 15mb when I do a capture, I don't know...

It seems to be less choppy when I run it, but I don't know what the problems are that make it choppy for others. 

perfopt.jpg

 

Here's a codepen that doesn't work, but has my JS at least. Maybe it's of some help?

See the Pen qBEQJzJ by sashaikevich (@sashaikevich) on CodePen

 

Link to comment
Share on other sites

On 1/20/2020 at 11:48 PM, ZachSaucier said:

You should take some time to learn how to use your dev tool's profiler functionality and go through the problematic sections. 

None of the performance issue has to do with GSAP's functionality. It all seems to be related to the properties that you're animating.

Thanks again for taking the time. I got to know dev tools a bit over the last 2 days, but the more I look at it, the harder it is to identify the problem areas. I've compared my LP to others in the gsap showcase, and there are a lot of similarities in thread count, js heap sizes, etc.

 

So, I did what I could to just optimize it. 

@OSUblake pointed out that sawtooth is an indication of a memory leaks (

). And Jack @GreenSock shared https://css-tricks.com/writing-smarter-animation-code/,  and with the above advice I rewrote the code, getting rid of all my global variables, some fonts, moved my many complex svg out of my document to cut down on nodes, calling them as sprites from a single file instead.

 

Now I have 2 optimized versions of my LP:

https://littleguylogos.com/lp-scroll-opt-1/ which has the above,

and https://littleguylogos.com/lp-scroll-opt-2/ which is partially complete, whereI use functions to create and add scenes to a master timeline.

 

@ZachSaucier can you please have a look , and give me your expert opinion; is there any real benefit to rewriting the entire timeline as I have started to do in opt-2 ? 

 

Link to comment
Share on other sites

22 hours ago, sashaikevich said:

is there any real benefit to rewriting the entire timeline as I have started to do in opt-2 ? 

The main reason is just increasing the usability and ease of editing your code. Having functions makes it much more modular and in doing so makes it easier to change, update, and understand. 

Link to comment
Share on other sites

On 1/22/2020 at 10:20 AM, sashaikevich said:

@OSUblake pointed out that sawtooth is an indication of a memory leaks

 

For the record, here's more information about that.

https://github.com/GoogleChrome/devtools-docs/blob/39512173473f4fd1cdaf0060a49dc3e85ffd4d75/docs/javascript-memory-profiling.md#proving-a-problem-exists

 

Search for sawtooth on that page. There are like 3 occurrences. A sharp sawtooth curve might indicate a memory leak. One with a slight slope is expected, especially when using requestAnimationFrame, which is what gsap uses.

 

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