Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Freehand Sam

Best Practices for the smoothest experience

Go to solution Solved by GreenSock,

Recommended Posts

Just curious if anyone is aware of an article(s) or resource I can refer to for best practices to achieve the smoothest experience possible when combining multiple GSAP effects and ScrollSmoother. My first site has the GSAP kitchen sink :) and is surprisingly fairly smooth on Chrome considering how many effects are happening, but it's a bit jittery on Safari.  So just looking for any tips/tricks to make it as good as it can be for all users. Things like adding "will-change: transform" to elements that will be transformed.


I'm aware of this css-tricks article: https://css-tricks.com/tips-for-writing-animation-code-efficiently/
and think I've followed the principles pretty well. Anything else out there recommended reading on this subject?

 

Thanks!

Link to comment
Share on other sites

  • Solution

I don't have a specific article to refer you to, no. But here's some quick general advice: 

  1. Filters are TERRIBLE for performance, especially in Safari. Avoid them if you can. 
  2. In 95%+ of cases, performance issues are related to graphics rendering in the browser (unrelated to GSAP). So focus your energy on making it easier for the browser to render stuff quickly. 
  3. Keep the area of change on the screen as tight as possible. The more pixels that must change on each tick, the harder it is on the browser.
  4. SVGs can be expensive to animate, especially if they're big (pixel real estate, not kb). Rendering bitmaps/raster images is fast, but SVGs are typically fabricating pixels on-the-fly via math (expensive). 
  5. Set pointer-events: none wherever you can so that the browser doesn't have to worry about pointer event handling, bubbling, etc. But obviously you NEED pointer functionality on many things like buttons, links, etc. so you can't set pointer-events: none on everything. 
  6. Avoid animating properties that affect layout like width/height/top/left. Instead, animate transforms wherever you can because they don't affect layout. 
  7. When animating transforms, leverage GSAP's shortcuts wherever possible (like x, y, scaleX, scaleY, rotation) rather than generic string-based "transform" stuff. In other words, x: 50 is much better than transform: "translateX(50px)".
  8. Don't have animations running when they're totally outside of the viewport (invisible). It's a waste of resources
  9. If you are pushing the renderer hard in the browser, consider switching to something like PixiJS that can leverage <canvas> and WebGL. It's a headache to build, but it can be WAY faster at rendering. 
  10. Never have CSS transitions/animations applied to elements that are also being animated with GSAP. 
  11. Try using will-change: transform on elements that are tough on the renderer (big/heavy). 

Good luck!

  • Like 6
Link to comment
Share on other sites

I really appreciate you taking the time. I'll do some one by one testing and try to report back on which made the biggest difference for others' future reference.

  • Thanks 1
Link to comment
Share on other sites

FWIW, my issue turned out to be a big, complicated SVG US map graphic. It is pretty intense - all 50 of the US states with individual paths, plus state labels as paths plus I drop in about 350 location markers, all SVGs too.  So as Jack mentioned in #4, the SVG was too much math to animate smoothly. 


Since I couldn't lose or change the map (it has to be an SVG to do what it needs to do), I decided to display:none it when it's not in view. So, we're a bit choppy in the map section, but smooth everywhere above and below it on the page. If you're doing something like this, make sure you have a container that holds the space (using aspect ratio for example) so there's no jump when display:none kicks in.  I also ended up using 
 

ScrollTrigger.clearScrollMemory();
window.history.scrollRestoration = "manual";

because I realized my map wasn't initializing if I refreshed the page after I'd scrolled past it -- since its container didn't exist. 

 

Thanks again for the super helpful community here.

  • Like 2
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.
×