Images shake during minor scale and movement

[brendynz]

Can anyone give me any tips to reduce jittery animation when scaling or tweening short distances with Tweenlite? I've tried force3d:true, and z:00000.1 to try to force hardware acceleration, but didnt seem to work.

Thanks!

[GreenSock]

Do you have a reduced test case we can see? And what browser are you looking at? It'd be super useful to see a codepen demo so that we can see what you're seeing and poke around a bit. Something sounds a bit fishy but it's tough to say without seeing it. 

[brendynz]

Not codepen, but test link here. 

http://brendyn.com/test1/

Notice the red box shakes when scaling up.

In Chrome on Mac.

[GreenSock]

Oh, that's because you're animating top/left which browsers only allow on whole pixel values. The pixel snapping is what's causing the jerky animation. That's not a GSAP issue. It would be much smoother if you animated x/y instead of top/left because x/y are transforms which use sub-pixel rendering. 

[brendynz]

Looks like that did the trick! Thanks very much!

[brian.hewitt]

I have a similar issue of jittery images Firefox only (Chrome and IE seem to be fine), when scaling images: http://holiday.cmog.org

 

I've added hardware acceleration to the body with translate3d. I saw the comment about adding 0.01 deg rotation --I can't add that in a tween, as it overwrites other transforms I'm using to center the images (translate X and Y), but I've added it the style of the images. But those don't seem to be doing the trick.

 

Any suggestions?

[Carl]

Hi and welcome to the GreenSock forums,

 

if you use xPercent:-50 and yPercent:-50 to center your images you should have no problem adding a slight rotation.

http://greensock.com/gsap-1-13-1

 

If you need more help please provide a reduced test case on CodePen so that we can see and edit what you are doing.

[Flor Lapetina]

Hey, I'm having the same problem, I try to change x: and y: to xPercent: and y: Percent but it's the same, when you hover the image in scaling effect it behavior jittery.  No codepen but you can see the problem on live website. https://moka.tv/about.html

[ZachSaucier]

Hey @Flor Lapetina and welcome to the GreenSock forums. If you'd like our help debugging, please create a minimal demo of the issue and create a new thread about it. You can learn more about how to do so here:

 

[Dipscom]

21 hours ago, Flor Lapetina said:

Hey, I'm having the same problem, I try to change x: and y: to xPercent: and y: Percent but it's the same, when you hover the image in scaling effect it behavior jittery.  No codepen but you can see the problem on live website. https://moka.tv/about.html

 

Hello Flor,

 

Welcome to the forums!

 

Feel free to create a brand new post for your questions. Specially now that GSAP is on V3 with a different syntax. The old conversations might confuse less experienced people and probably won't be relevant.

 

As for your issue. I only looked at it for a couple of minutes, debugging an animation in a full production site is not ideal for us as we have very little context.

 

Anyway, in your <figure> tag with the class "member-card-img" you have a transform  rule. Remove that and your issue goes away. The compounding of this transform and the one being applied by the scaling is what is causing the jitter.

[Flor Lapetina]

Hey, thank you very much, now I see that this is the problem, but what happens is that the transform rule comes from a js that uses gsap (I didn't even do it because it uses old js methods). Here in codepen you can see the js, I tried to load the cdn but for some reason they are wrong and I cannot reproduce the animation.

Thank you anyway.

 

See the Pen YzqqKzW by florencia-lapetina (@florencia-lapetina) on CodePen.

[Flor Lapetina]

I just found it, the parallax effect with gsap is what brings the problem. I will try to fix it. Thank you!

[Dipscom]

You can always place the image where you want it to end, use a "from" Tween for the parallax and clear that transformation at the end of the Tween. It will clear the inline transform applied to that element which should solve your issue.

[Flor Lapetina]

Here I found the real problem, is the % in the duration of the scroll. I don't know now how to replace it but later I will see. If you have any idea it will be great. Thanks. 

 

  // Cards Parallax
    var tl_parallax = new TimelineLite()
    .from( card.querySelector('.member-card-img'),  1, {x: (oddFlag%2? "5%":"-5%"), ease: Linear.easeOut}, 0);
    // Cards Parallax Scene
    var sceneCardsParallax = new ScrollMagic.Scene({
        triggerElement: card,
        duration: "70%",
        tweenChanges: true
    })

    
    .setTween( tl_parallax )

 

[ZachSaucier]

We don't recommend using ScrollMagic. We highly recommend using ScrollTrigger which is the official GSAP scroll plugin. It has a sleeker API, a bunch of additional features, a smaller file size, and is actively maintained  

 

Additionally we recommend upgrading to GSAP 3 which is similarly way better:

 

 

[Dipscom]

Zack and the Official GSAP v3/ScrollTrigger Plug™️ to the rescue!

 

??????

[Flor Lapetina]

Hi, just to be settled, I solved the problem by applying the will-change: transform property to the image.

Thanks.