Jump to content
Search Community

One Tween - Multiple #IDs

Technics1210 test
Moderator Tag

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

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.
  • Create New...