Jump to content
Search Community

Distribute Function jumps and lags when combined with ScrollTrigger

arnespremberg test
Moderator Tag

Recommended Posts

Please see the codepen and scroll a few times up and down. In chrome, the timeline jumps, sometimes the distribution get's totally lost. In Safari, the dots appear pixelated during the animation. Why could this be? I suppose I'm pushing the tool's limits?

See the Pen ExewqNz?editors=1010 by arnespremberg-the-animator (@arnespremberg-the-animator) on CodePen

Link to comment
Share on other sites

Nah, it's not because you're pushing the tools too hard (GSAP can easily handle thousands of tweens simultaneously in the right conditions). You've got a logic problem in your code - you're trying to animate the ".scrollyDot" elements with TWO different tweens at the same time to different values. You put the second tween right on top of the first one. See what I mean? They're both fighting for control. The last one "wins" in the forward direction, but when you go in reverse, GSAP renders in the opposite order (which is the correct behavior), so the earlier one "wins". 


The moral of the story: don't create conflicting tweens that are fighting for the same properties of the same elements :)


Does that clear things up? 

  • Like 2
Link to comment
Share on other sites

7 hours ago, arnespremberg said:

In Safari, the dots appear pixelated during the animation. Why could this be?

I forgot to answer this part of your question - this is purely a graphics rendering thing in the browser (not directly related to GSAP). In order to maximize performance, GSAP applies transforms during the animation in a way that involves 3D, so for example: 

// non-3D (typically not pushed to the GPU by the browser)
transform: translate(100px, 0px);

// 3D (usually faster because it gets pushed to the GPU...layerized)
transform: translate3d(100px, 0px, 0px);

When the browser sees a 3D value, it usually says "oh, we should layerize this element" which basically is like taking a screen shot of what it looks like at its "native" size and then giving that to the GPU so that it can just shove those pixels around very cheaply. Every browser has different rendering strategies and Safari appears to be particularly aggressive in some ways. The 3D transform is the old-school way of doing will-change: transform (you'll notice Safari doing the same rendering behavior with that).


The cause of the pixelization in Safari is that the "screenshot" of your elements is done at their native size (scale: 1), but you are scaling them up to 6x their normal size. The GPU is just stretching those pixels (Safari is trying to "help" you by just using the pixels that were already pushed to the GPU and having the GPU do all the rendering work). But it looks pretty terrible when you stretch those pixels so much. 


There are two solutions to choose from: 

  1. Tell GSAP not to use 3D transforms: 
    gsap.config({force3D: false})
    That affects the default for all animations, but you can set that value on any individual animation if you prefer. The tradeoff here is that the browser won't automatically layerize the elements and shove them to the GPU, so it's more expensive performance-wise. You get sharper edges, but you pay a price.
  2. Change your CSS and animations so that the NATIVE size is the 6x size. That way, you're animating from 1/6th the normal size up to a scale of 1. If your dots are 10px currently, and you're scaling them up to scale: 6, then you should make your dots 60px instead and just apply a scale of 0.1667 initially and scale them to 1. You get precisely the same effect, but the "screen shot" that gets shoved to the GPU is higher resolution. 

I personally much prefer option #2. You get the performance benefits of the GPU and still sharp edges.

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