Jump to content
Search Community

Images shake during minor scale and movement

brendynz test
Moderator Tag

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

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 comment
Share on other sites

  • 3 weeks later...

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 comment
Share on other sites

  • 4 years later...
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 comment
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 comment
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 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...