Jump to content
GreenSock

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

One Tween - Multiple #IDs

Recommended Posts

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?

Link to comment
Share on other sites

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

 

Great!

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