Jump to content
GreenSock

graywithanA

Jumpy / Choppy CSS Transform Animations

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

I've created a simply pen that depending on which button is pressed either animates the transform x value using TimelineLite & TweenLite, the transform x value using only TweenLite, the scale using TimelineLite & TweenLite, or scale using only TweenLite.

 

Despite trying all of the suggestions I've found on the forums I cannot seem to get these simply animations to be smooth.  They always seem to jump at least once throughout the animation.  It does seem like the animations that don't use Timeline are slightly smoother but they still aren't as smooth as I expected.  The scale animations seem smoother that the x animations

 

If it is of any relevance I'm on a 2.4 GHz Core i7 Macbook Pro with 16GB RAM running Mavericks 10.9.5.  Firefox seems a bit smoother than Chrome and Safari appears the be the worst of them all.

 

Having read through several threads about the same or similar problems I've tried the following things:

 

-Animate x instead of left to allow for sub-pixel animation

-Added z:0.01 or rotateZ:0.01

-Similarly tried using force3d:true

-Made sure that the element being animated is position:absolute and that it's parent is position:relative

 

Is there no hope of getting these animations to be smooth?  Is this just an issue with my computer / browser combo?  Am I missing something here?

 

I've seen a handful jQuery library's out there that seem to perform pan / zoom smoothly so I'm assuming that I must be doing something wrong since GSAP is far superior to jQuery in the animation realm.

 

I'm thrilled with this library so far and the forum community as well.  Thank you to everyone in advance.

 

Please help.

See the Pen MYywoy by graywithanA (@graywithanA) on CodePen

Link to comment
Share on other sites

I don't know how pronounced this jumping is, but they seem pretty smooth to me on Windows? Have you tried using an image at it's natural size rather than scaling down? Webkit is known to be pretty slow at image scaling, so perhaps that's a factor?

  • Like 1
Link to comment
Share on other sites

Hello graywithanA, and Welcome to the GreenSock Forum

 

I tested this on Windows 7 like Jamie and it also was smooth! I do second Jamie on Webkit being slow with image scaling.

 

What i usually do is add a slight rotation.. rotation: 0.001

 

Test working example in Chrome and Safari on Apple device:

 

See the Pen JoXJYB by jonathan (@jonathan) on CodePen

:

// add a slight rotation to help with the shakes
var tlX = new TimelineLite({paused:true});
tlX.add(TweenLite.to(".mama", 3, {rotation:0.001, x:500,  ease:Linear.easeNone}));

:

In my own tests, and projects i have used it to help with shaky scale and translate transforms. That above rotation hack, also works in Firefox when it behaves badly with scale or translate.

 

I tested the above on a iPad Air Mini and it was smooth after using rotation:0.001

 

I hope this helps! :)

  • Like 4
Link to comment
Share on other sites

I looked at the pen, and like others didn't see anything I'd classify as jumpy.

 

However, you noted you tried force3d... please make sure you use force3D. 

 

Also, we are having a little issue with cdnjs and although your CodePen should be grabbing the /latest/ version... it is not. It is using 1.14.2 which does not enable force3D by default.

 

Try using this url to 1.15.0

https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js

(in your CodePen demo, click on the gear in the top of JS tab to modify external script source urls).

 

We just realized this problem recently and have the issue filed with cdnjs.

 

Let us know if 1.15.0 works better for you.

Link to comment
Share on other sites

I noticed that too Carl on codpen.. how it was grabbing 1.4.2 for latest .. thanks for clearing that issue up :)

  • Like 1
Link to comment
Share on other sites

Thanks for all the responses.  After restarting my computer the animation is much smother.  I've also cleared my cache so that 1.15 is now loading.

 

@Jonathan: is the rotation trick necessary now that 1.15 sets force3D to 'auto'?  My understanding was that the point of that trick is to force 3D transforms which is now done automatically.  Is there another reason to add the slight rotation to my transforms?

Link to comment
Share on other sites

Hello gravywithanA..

I use that rotation hack only if some elements dont scale or translate smooth. But that shakiness are browser bugs and not GSAP. It does kick in hardware acceleration, but also allows the element to move on a slight angle offset for browsers that trigger that weird shake rattle and roll.

I only use it if chrome, safari, or firefox if they animate shaky when doing a pan set zoom. Just use it as needed to workaround that shaky browser bug, and you should be fine.

:)

  • Like 1
Link to comment
Share on other sites

Deal.  Thanks again to everyone for the promt and informative repsonses.

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

Hi everyone,
im working on this site:
http://project.at.w01203b5.kasserver.com
username: greensock

password: greensock

 

in the middle there are 3 pictures  with this animation:

new ScrollMagic.Scene({triggerElement: "#parallax_trigger_1", duration: 800})
	.setTween("#parallax_1 > div.parallax_image", {y: "200%", ease: Linear.easeNone})
	//.addIndicators()
	.addTo(controller);

the problem is that the pictures / animation gets very shaky and flickering in safari only (all other browser are ok)

you can see it at the picture with the 2 people (woman and man) above headline "Strategisch. Innovativ. Umsetzbar. Erfolgreich. Überprüfbar." - you have to scroll

 

so it seems to be a safari bug

 

i tried all the css webkit workarounds like

-webkit-transform:translate3d(0,0,0);

-webkit-transform-style: preserve-3d;

-webkit-backface-visibility: hidden;

 

but it doesn't work - by the way chrome is fine - so its not about webkit I guess

 

any ideas how ti fix that?

thanks for your help,

steri

 

Link to comment
Share on other sites

Hello steri and welcome to the GreenSock Forum!

 

You can try adding rotation: 0.01 to your tween and see if that helps.

 

But, it would be better if you actually created a new Topic for this, since this above topic already looks resolved.

 

It looks like your issue is a webkit browser and ScrollMagic issue. Even though ScrollMagic is created with GSAP. It is not made by GSAP, since ScrollMagic was created by Jan Paepke

 

You can try the ScrollMagic issues on git hub:

 

https://github.com/janpaepke/ScrollMagic/issues

 

But can you please create a new forum topic so other users don't get confused by seeing a new topic within this already resolved topic.

 

Thanks!

 

:)

Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
×