Jump to content


"Floating" 5 elements smoothly up and down turns sluggish

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

Im trying to achieve a smooth repetitive up and down "floating" effect on x amount of elements - each element with it's own id.

After a little while of "floating" the up and down tweening seems to get sluggish. (my real test uses 5 x 100kb images that has been preloaded before tweening)


Im using one function to define the up tweening and another to define the down tweening and then throw each element back and forth these two functions.


Any suggestion on how I can achieve the same effect more efficient and perhaps even in some smarter way without the two functions are very welcome! My bet is there some "bottleneck" there and that I can perhaps do some simple re-usable timeline instead?


Follow the Codepen to see the concept of it

See the Pen vcyhf by mrsgs (@mrsgs) on CodePen

Link to comment
Share on other sites

Hello mrsam, and Welcome to the GreenSock Forum!


Are you trying to make your elements animate back and forth in a loop?  If so, you can try the special properties in TweenMaxyoyo and repeat.


Your example with yoyo and repeat:

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


More info about TweenMax: http://greensock.com/docs/#/HTML5/Animation/TweenMax/


yoyo : Boolean - If true, every other repeat cycle will run in the opposite direction so that the tween appears to go back and forth (forward then backward). This has no affect on the "reversed" property though. So if repeat is 2 and yoyo isfalse, it will look like: start - 1 - 2 - 3 - 1 - 2 - 3 - 1 - 2 - 3 - end. But if yoyo is true, it will look like: start - 1 - 2 - 3 - 3 - 2 - 1 - 1 - 2 - 3 - end.


repeat : Number - Number of times that the animation should repeat after its first iteration. For example, if repeat is 1, the animation will play a total of twice (the initial play plus 1 repeat). To repeat indefinitely, use -1. repeat should always be an integer.


Does this help? :)

Link to comment
Share on other sites

Hey Jonathan - thanks a lot for contributing! Truly appreciated!


There we're some wrong function call in your codepen, so I took you yoyo example, and removed un-necessary functions, which can be seen here:

See the Pen hlBoc by mrsgs (@mrsgs) on CodePen


Also added easeInOut for smoother up/down movement.


Taking one function out and re-using the same tween of the element to move up and down would surely seem to improve performance! I'll test it out in my application and see if things improves with the yoyo and repeat -1. I guess the up & down tweening can't even get shorter than that!

Link to comment
Share on other sites

I am sorry about that mrsam, i corrected

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



If your boxes are still sluggish .. you could also add force3D:true to your tween, to help animate using hardware acceleration.





when you set force3D:true, it forces GSAP to apply a 3D value to the element's transform, meaning matrix3d() instead of matrix(), or translate3d()instead of translate() which typically results in the browser putting that element onto its own compositor layer, making animation updates more efficient. In other words, setting force3D:true usually boosts performance, making movement more smooth. However, if you exceed the GPU's memory limit, performance will degrade, so it's not wise to force3D:true everything all the time. See http://css-tricks.com/myth-busting-css-animations-vs-javascript/ for more details. In our experience, though, it helps performance more often than not. The default value is false.


I hope this helps! :)

Link to comment
Share on other sites

Jonathan > Force3D to the rescue!


I see significant approved animation now on the up & down animation - for some reason I especially noticed the sluggish animation in chrome if I took and re-sized my browser back and forward in width, then the up & down animation would "struggle". However doing that after force3D - it's still just smooth.


So far i've only forced force3D to the elements that I have more animation on - but out of curiosty - is there a way to force force3D: true pr. default so it enables on all tweens?

Link to comment
Share on other sites

If you look at this post .. the Mighty Carl says that:


You only need to set force3D once on an element and it will be set for all future tweens.


 I hope that answers your question, mrsam! :)

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.