Jump to content
Search Community

How can I restirct gsap view to some scope?

Artleks test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

I've got an angular project where I heavily use gsap animations. Recently I encountered a problem related to the use of gsap in Angular. The thing is that angular components are black bloxes to other compoents. That means that html is specifically resticted to its component, in short. The problem is that when I have one component created twice, but currently viewing and using one for some specific reasons, changes that are made with gsap to html elements and corresponding css properties affect both! Of course I can use Angular specific feature @ViewChild() and get a reference to the element I need, but that is not convenient when I have a lot of different selectors to change. The question is, can I somehow restirct gsap view to some scope? Like not viewing the the whole document but some part of it? Thanks in advance for any hints!

Link to comment
Share on other sites

  • Artleks changed the title to How can I restirct gsap view to some scope?
  • Solution

I bet you're using selector text in your animations for the targets, right? GSAP uses document.querySelectorAll() for that, so of course if you've got a bunch of components that all use similar class names, they'd all get selected. That's not a bug - it's just how it works. But you can use the new gsap.utils.selector() to scope things to a particular element (like the root of your component): https://greensock.com/docs/v3/GSAP/UtilityMethods/selector()

  • Thanks 1
Link to comment
Share on other sites

But, is it possible to write some kind of extension in order not to call every time  gsap.utils.SelectorFunc; gsap.to(this.q(selector), {...})?

Something like the following:

declare global {
   interface gsap {
      hosto(
         tl: gsap.core.Timeline,
         targets: gsap.TweenTarget,
         vars: gsap.TweenVars,
         position?: gsap.Position | undefined):gsap.core.Timeline;
   }
}
 
gsap.prototype.hosto = function(
   tl: gsap.core.Timeline,
   targets: gsap.TweenTarget,
   vars: gsap.TweenVars,
   position?: gsap.Position | undefined😞gsap.core.Timeline {
 // where this.host is gsap.utils.SelectorFunc;
   return tl.to(this.host(targets), vars, position);
}
Link to comment
Share on other sites

2 hours ago, Artleks said:

But, is it possible to write some kind of extension in order not to call every time gsap.to(this.q(selector), {...})?

 

That was considered earlier, but we went with a standalone utility method as it's more versatile and can be used outside of animations, like inside loops. It would also require a lot more typing, especially if you are doing a bunch of individual tweens as you would have to include the selector context for every animation. 🤮

 

gsap.to(".foo", {
  x: 100,
  context: rootElement
});

gsap.to(".bar", {
  scale: 1,
  context: rootElement
});

gsap.to(".baz", {
  y: 100,
  context: rootElement
});

 

 

  • Like 1
Link to comment
Share on other sites

I see. Well, I guess there could be an option like gsap.timeline({ context: this.host }) at least for timelines. And gsap.to(this.host(selector), {...}) for separate tweens. But anyway thanks for clarification!

Because in my case I have to reference this gsap.utils.SelectorFunc every time I create a timeline and it has to be scoped only to the current component.

 

gsap.timeline()
      .to(this.host('#id1'), { ... }, 0)
      .to(this.host('#id2'), { ... }, 0)
      .to(this.host('.class1'), { ... }, 0)
// and so on
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...