Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

overlapping 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


let me explain what i would like to achieve :

i have a table whose "cell" values are updated every seconds. Moreover each value change is highlighted by a fade animation (using jquery) which could last for let's say 3 seconds. I used a setInterval javascript function. But the result is that the effect occuring on a cell only last for one second instead of tree seconds. Javascript is single threaded i know be how is it possible to have the event queue rearrange in a way that allow : cell one modification + fade animation happen correctly in the same time of others cells modifications + other animations ? I noticed too that if the div containing the table has a scrollbar, and that i use this scrollbar during the animations then just stop until i release the use of the scrollbar because the event of animation has no time to execute anymore.

Is it possible with greensock to resolve this kind of problem ?

Link to comment
Share on other sites



With GSAP you can animate any number of properties on any number of objects and have the timing set however you like. The animations can happen in sequence or overlap. There are no limitations.


I'm not quite sure what your scrollbar issue is. Perhaps to increase scrolling speed the browser is preventing the content to be re-rendered while scroll is happening.

Link to comment
Share on other sites

Here is a little fiddle illustrating multiple animations happening on various table cells that overlap.




I didn't attempt to build exactly what you described as I didn't really understand it all.


Also note, the table is in a div that can be scrolled while animating (tested Chrome, Safari, FF on Mac)



Please read:

Jump Start: http://www.greensock.com/jump-start-js/

getting started guide: http://www.greensock.com/get-started-js/

docs: http://api.greensock.com/js/


Experiment a bit with what you are trying to achieve and let us know if you have any questions.

Link to comment
Share on other sites

Thank you very much for the answer. Actually the updates of my cells were made by a thrid party librairy causing the all cells display to be refreshed in the middle of the fade animations.

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.