Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
brendynz

Images shake during minor scale and movement

Recommended Posts

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!

Link to post
Share on other sites

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. 

Link to post
Share on other sites

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. 

  • Like 3
Link to post
Share on other sites

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?

Link to post
Share on other sites

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

Link to post
Share on other sites

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:

 

Link to post
Share on other sites
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.

  • Like 2
Link to post
Share on other sites

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

Link to post
Share on other sites

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

Link to post
Share on other sites

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.

  • Like 1
Link to post
Share on other sites

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 )

 

Link to post
Share on other sites

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:

 

 

  • Like 1
Link to post
Share on other sites

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

 

👍👍👍👍👍👍

  • Like 1
Link to post
Share on other sites

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

Thanks.

  • Like 1
Link to post
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.

×