Jump to content
Search Community

tweening elements in a jQuery selector... with changing elements

erikb 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

If I am tweening css attributes on the elements of a jQuery selector over ten seconds, and in that time, remove and add elements to that selector, will tweenLite know to update the values on the newly added elements and cease to update on the removed elements?


Am about to tool up a test, but thought to ask here too.  Thanks!

Link to comment
Share on other sites



My best guess is no. Mainly because once you've created a tween instance it records the properties' starting values of the targets and I'm going to presume that it does the same with the targets, it seems to me that it'll be opposite to the engine's logic (how it works) to check continuously whether the target array has changed. Anyway Carl or Jack could clarify this point.


What you could do is pause your tween, record it progress, then clear or kill (you'll have to see which method fits better in your app) the tween, populate or create it again, set the progress according to the value that was determinated before and finally resume the new tween. In that scenario I'll recommend you to use a function to create the tween and pass as parameters the array and progress, thus to make it as fast as possible in order to get a seamless transition between tweens.


Hope this helps,



  • Like 1
Link to comment
Share on other sites

If you are removing elements from a collection, you can follow this tip to destroy any related tweens:


Kill all tweens of a particular object anytime with TweenLite.killTweensOf(myObject);. You can also use selector text like TweenLite.killTweensOf("#myID");


If you are adding to the collection, you will need to instantiate new tweens for the new elements yourself.

  • Like 1
Link to comment
Share on other sites

I am thinking to do this by tweening a proxy vanilla javascript object, and onUpdate to tween the values of the jQuery object.  Any ideas if this is a better approach than stopping and restarting tweens on 'new' jQuery objects?

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