One Tween - Multiple #IDs

[Technics1210]

Hi,

 

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?

[PointC]

Hi Technics1210 

 

You can set them all like this:

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

Happy tweening.

[Technics1210]

Thank you,

 

oh boy - it is really that simple...

 

Great!

[Dipscom]

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

[Jonathan]

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!