Jump to content
Search Community

Animation not fluid

m0utz 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

Hello !

 

I'm new in GSAP and i like to create a full-page animation with image transition.

 

I'm having a little problem with animating left position. I found that the animation is really slow and had some lag.

 

As you can see in the CodePen :

The animation of the divs is not fluid, it look likes the divs jumps a little during the animation.

Can you see it ?

 

I make a lot of search around the forum and the documentation. Trying to use :

- other ease like "Power2.easeIn"

- TweenMax.lagSmoothing(0);
- TweenMax.ticker.fps(30);

- display:none when offscreen (http://greensock.com/forums/topic/10596-optimising-off-screen-animations/)

- force3D:true

- lazy:true

...and some other test but the problem is still there, the div looks like jumping during the animation, which render a not fluid animation.

 

Is this a bug ? Or natural lag ? Or maybe i make something wrong with my html/css or js ?

 

Thanks for your help !

Moutz

See the Pen LpcvE by m0utz (@m0utz) on CodePen

Link to comment
Share on other sites

Hi Diaco, and thank you for your answer :)

 

I update the codepen using x property instead of Left.

 

But this doesn't make the animation smoother...and I don't really understand the X property, where is the referer (x:0, y:0) ?

 

 

And, before posting I found this topic : http://greensock.com/forums/topic/6963-tweenmax-tweening-css-x-vs-left/

They explain that moving the css property left is not a bad practice.

 

Maybe I'm having a "normal" comportement and transition like I try to do can not be smoother ?

 

Thanks,

Moutz

Link to comment
Share on other sites

Hi again :)

 

With the translate() ( "x" and "y" are the same as "translateX()" and "translateY()" ) method, the element moves from its current position, depending on the parameters given for the left (X-axis) and the top (Y-axis) , so ;  (x:0, y:0) = element position without any movement , as an independent .

 

anyway i don't see any lag at all :

See the Pen vArCc by anon (@anon) on CodePen

  • Like 2
Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

Frankly, I didn't notice any lack of smoothness in any of the demos. However I would agree would Diaco that using x / y is better in this case simply because they allow sub-pixel rendering which often lends to more apparent smoothness.

 

When you use left and top values, the browser can only render elements on whole pixel values, which can sometimes cause a jittery / pixel-snapping effect if the object is moving slowly... most typically seen at the end of an easeOut ease. 

  • Like 1
Link to comment
Share on other sites

Hi all, and thank you all for your responses.

 

Sorry for not responding quickly. I have done a lot of test using TweenMax...

I think you are right, the example I give is ok, there is no "lag" in it, but, sometimes, randomly, there is a little break... It is really more visible using fullpage background.

 

And you are right, there is better result using X and Y position instead of top/left...

 

To don't have the problem with some little breaks in the animation, I'm creating an animation controlling by scroll, this don't solve the problem but I think it's a better experience for the user ;) Did you have any advice for this kind of navigation ?

 

I have one week to finish my project, I will post the result here (is it ok with the forum rules ?)

 

Thanks for working on this great library and for the support.

 

Moutz

(and please excuse my english ;) )

Link to comment
Share on other sites

  • 3 weeks later...

Hey !!

 

Thank you again for your answers and your work on this library. My project is almost finish and i'm happy to share it with you.

This is for a french museum and an exhibition on morrocan artists.

You can see the website here : http://imaroc-contemporain.org/

And the part using TweenMax here : http://imaroc-contemporain.org/webdoc

(you have to scroll to play the animation)

 

The animation works great on desktop and is pretty good on smartphone but this don't work properly on tablet (ipad or galaxy tab), did you have any advice about this ?

(I found this post : http://greensock.com/forums/topic/9181-animation-not-smooth-in-safari/- I have to try to add force3d and some x, y position instead of top,left)

 

Hope you'll enjoy the experience ;)

 

Moutz

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