Jump to content
Search Community

Setting scope for targets (not for callbacks)

Spymastermatt test
Moderator Tag

Recommended Posts

Hi,

Apologies if this has already been answered but I couldn't find it anywhere.

Is it possible to set the scope for targets in gsap?

For example, imagine I have the following document:

<div id="static-stuff">
  <p class="info-text">Blah blah blah etc</p>
</div>
<div id="animated-stuff">
  <p class="info-text">Blah blah blah etc</p>
  <p class="info-text">Blah blah blah etc</p>
  <ol>
    <li class="generic-small-text-class">Item 1</li>
    <li class="generic-small-text-class">Item 2</li>
    <li class="generic-small-text-class">Item 3</li>
    <li class="generic-small-text-class">Item 4</li>
  </ol>
</div>

and I want to create a complex timeline that animates lots of stuff in #animated-stuff.

I can either make every selector "#animated-stuff desired-selector", or I can give each element an ID

 

But assuming that the actual document is much more complicated, can I set (for example) gsap.timeline({targetScope: "#animated-stuff"}) and have all selectors in the timeline start at #animated-stuff?

 

Thanks for your help,

Matt

Link to comment
Share on other sites

3 minutes ago, Spymastermatt said:

I can either make every selector "#animated-stuff desired-selector", or I can give each element an ID

 

If you want to use a selector string, that's your best option.

 

Or you can do it manually.

var animatedStuff = document.querySelector("#animated-stuff");
var infoText = animatedStuff.querySelectorAll(".info-text");

gsap.to(infoText, { ... });

 

  • Like 3
Link to comment
Share on other sites

Wow fast response!

 

Ah ok. Yeah I thought that might be the case, I just wasn't sure if there was a way to do it automatically so GSAP would auto prepend "#animated-stuff" onto each selector to save it being typed hundreds of times.

 

Also makes it easier if I ever decide to change the name of the enclosing div, but I could just use template strings for that

 

Thanks guys

Link to comment
Share on other sites

8 minutes ago, Spymastermatt said:

I just wasn't sure if there was a way to do it automatically so GSAP would auto prepend "#animated-stuff" onto each selector to save it being typed hundreds of times

Generally speaking it'd make the most sense to save the target to a variable in that case.

 

Otherwise you could write a function for it yourself:

var animatedStuff = document.querySelector("#animated-stuff");
function s(selString) {
  return animatedStuff.querySelectorAll(selString);
}

// alernatively
// function s(selString) {
//   return "#animated-stuff" + selString;
// }

gsap.to(s(".infoText"), { ... });

 

8 minutes ago, Spymastermatt said:

Also makes it easier if I ever decide to change the name of the enclosing div

Text editors have good find and replace functionalities as well :) 

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