Jump to content


Slow moving imagery using TweenMAx

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

I have a basic Tween:


TweenMax.to(earth, 10, {top:"100px", left: "0px", ease:Sine.easeInOut, delay: d});


Note duration of the animation is set to 10seconds.


Also the starting point for the "earth" object is only 20px below and and 30px to the left.


In short what i have is an animation that is moving a short distance between two points and taking a long time to do it.  The object is actually an image set into a DIV as a background.


The resultant animation is far from acceptable, very jerky, not at all smooth.


Is there any special TweenMax settings that i can utilize a higher level of precision to shift elements around in this circumstance?  Had this similar animation in Flash development.....i was hoping that GSAP and HTML5 development would have had a better render.





Link to comment
Share on other sites

Hi fatSkeeter :),


Have you tried using x and y instead of top and left so you'd be getting sub-pixel rendering?

  • Like 5
Link to comment
Share on other sites

I would try something more along the lines of


TweenMax.to(earth, 10, {y:100, x:0, ease:Sine.easeInOut, delay: d});



EDIT: Sorry PointC, didn't see yours until after I submitted. Yes, what PointC said!

  • Like 3
Link to comment
Share on other sites

Yeah, what Shaun said that PointC said! :D

  • Like 4
Link to comment
Share on other sites

Hello fatSkeeter, and Welcome to the GreenSock Forum!


In order to animate small increments and still have it play smooth. You need to add a slight rotation: 0.01 and also z:0.01 to your tween. And also animating x and y instead of top and left like PointC advised is the first thing you should do. Sometimes autoRound:false helps.


There could be other factors but without a code example it will be hard to know. Sometimes you might have to use a linear none ease if the element is moving in relative values in an infinite loop repeat


But a codepen example would be helpful to see your code in a live editable environment.


Here is a video tut on how to create a codepen demo example for use to help you better





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