Jump to content


One Tween - Multiple #IDs

Go to solution Solved by PointC,

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 question - i often use for multiple CSS IDs the same tween / setting / animation


e.g. for setting @2x background images for retina

tl.insert(  TweenMax.set("#txt1", {backgroundSize: "300px 250px"}) );
tl.insert(  TweenMax.set("#txt2", {backgroundSize: "300px 250px"}) );
tl.insert(  TweenMax.set("#txt3", {backgroundSize: "300px 250px"}) );

Is there a more elegant way to combine multiple IDs in one tween, when the setting repeats? 


Or put the IDs in one array?

Link to comment
Share on other sites

  • Solution

Hi Technics1210 :)


You can set them all like this:

TweenMax.set("#txt1, #txt2, #txt3", {backgroundSize: "300px 250px"})

Happy tweening.


  • Like 2
Link to comment
Share on other sites

Thank you,


oh boy - it is really that simple...



  • Like 1
Link to comment
Share on other sites

In case you use one class across all those elements you could just target the class:

TweenMax.set(".className", {backgroundSize: "300px 250px"})

It will apply to all elements with that className

  • Like 3
Link to comment
Share on other sites

My two cents if you please ;)


I prefer Dipscom way of just using a classname for multiple elements.


Also If you really need to use multiple id's as your selector you can use what PointC advised above as one string.


O you can pass an array of your selectors which GSAP will also accept as its target.

TweenMax.set(["#txt1", "#txt2", "#txt3"], {backgroundSize: "300px 250px"})
  • target : Object
    Target object (or array of objects) whose properties should be affected. When animating DOM elements, the target can be: a single element, an array of elements, a jQuery object (or similar), or a CSS selector string like “#feature” or “h2.author”. GSAP will pass selector strings to a selector engine like jQuery or Sizzle (if one is detected or defined through TweenLite.selector), falling back to document.querySelectorAll().

An id will always be faster than a targeting a classname!


But if your not worried about speed, then using the classname is more convenient and easier on preventing carpel tunnel.. less to write!



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