Artleks

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

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); }

Thanks a lot! That's exactly that I was loooking for!

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!

Concerning smoothScroll function I only removed a couple of lines that were setting css and set it directly. Returned ScrollTrigger.create, but without change.

I have been trying to recreate native ScrollTrigger demo from ScrollTrigger.scrollerProxy() topic, but with some changes to elements generation (the elements need to be generated dynamically). It seems as if changing scroll smoothness does not give any disered effect. Could you please take a look and hint me with the right direction, please? https://stackblitz.com/edit/angular-ivy-rvs5ln?file=src%2Fapp%2Fapp.component.css

Hi @OSUblake. Thanks for the hint! Implementing it like the following works good! parent.add(child.tweenTo(child.duration()), 0); parent.add(child.tweenFromTo(child.duration(), 0), '>');

The codepen sample is supplied above. The option for a function creating separate timelines for forward and reverse does not work. Feel free to edit.

Let's say I have a parent timeline from where I control some children timelines. During the animation proccess I want to reverse one of the children. The thing is that the options I came up with, does not really work as expected. How do one reverse a child correctly during the main timeline and then restart the parent successfully? Here is the sample 'parent - child':