Artleks Posted November 18, 2021 Share Posted November 18, 2021 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 More sharing options...
Solution GreenSock Posted November 18, 2021 Solution Share Posted November 18, 2021 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() 1 Link to comment Share on other sites More sharing options...
Artleks Posted November 19, 2021 Author Share Posted November 19, 2021 Thanks a lot! That's exactly that I was loooking for! Link to comment Share on other sites More sharing options...
Artleks Posted November 19, 2021 Author Share Posted November 19, 2021 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 More sharing options...
OSUblake Posted November 19, 2021 Share Posted November 19, 2021 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 }); 1 Link to comment Share on other sites More sharing options...
Artleks Posted November 19, 2021 Author Share Posted November 19, 2021 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now