Jump to content

Guest kirkjg

How to reduce Jank when tweening image over image

Go to solution Solved by OSUblake,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



When the cover image (SVG clip path) is tweened to reveal the next cover image, sometimes there will be jank. This is especially true on high-res devices. On normal-res devices the jank is far less noticable, but still poses a problem. What can I do to reduce jank when tweening image over image?


My assumption is there is not much more that can be done, as I'm already making the top layer render as its own layer in the GPU via 3D CSS acceleration, and the items that are tweening over one another are made up of complex image data. Most sites I see that make it to awwwards have solid colors tween over their content before tweening in another image or content section. 


Can what I'm doing be done with consistent 60fps? If so, what am I not doing? Thank you in advance for any insight. 



Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,


It's really up to the browser to handle how it is going to to display (paint and reflow) the updated values that GreenSock animates.

Definitely worth reading the discussion here: http://greensock.com/forums/topic/14213-convert-css3-animation-to-gsap-for-performance-gain/


I wasn't able to visit your link. Perhaps try reposting it, but I'm doubtful there is a silver-bullet solution to reach 60fps in all situations, all the time especially with SVG (which isn't typically hardware accelerated). Again the rendering part is out of GSAP's control.

  • Like 2
Link to comment
Share on other sites

Just to add my two bits... I haven't had time to go over your whole animation and site.


It's best when a tween or animation is not running on an element. To set the transform-style to flat. This way the browser can know not to keep that element in that 3d state when the element is not visible.


You can also take advantage of using the CSS property will-change to let the browser know ahead of time that element will be using the GPU. This property was created so front-end web developers didn't have to worry about using the old CSS  translateZ() or translate3d() hacks.


will-change makes sure the browser makes appropriate optimized changes to an element to get it ready for a 3D transform. Placing it on a new rendering layer before it runs, so you don't get a delay on the start of a transform animation. Which could also help prevent any split-second flicker on start you might notice.


Make sure you do not overuse will-change!  I would only add will-change via JS, so this way you can remove it when it is not needed. In that case, you can use the GSAP set() method to add it before a tween runs. Otherwise when it is in the style-sheet the browser will think you want that element optimized all the time.


But again this is not GSAP specific and just the way browsers work when animating CSS.



CSS will-change: https://developer.mozilla.org/en-US/docs/Web/CSS/will-change



  • Like 2
Link to comment
Share on other sites

Thank you all for your responses, I learned something from each and will be making changes accordingly. Blake, I read your in-depth comments on the thread you linked and I will be changing the way I've been doing some things per your recommendations and getting back to y'all by early next week. 

Link to comment
Share on other sites

Blake's answer had the best information for these needs. There was a fundamental misunderstanding on our part regarding when and how to invoke a new layer in the GPU, and more importantly, what not to do to layers in the GPU. Also we just assumed that tweening an SVG path would be best because css clip-path isn't well supported and we wanted that clip-reveal effect. But Blake's xPercent trick saved the day.

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.