Antonio Giroz

Hi Cassie, My question is not related to Typescript itself, but why GSAP type declarations does not have the targets function when the onStart function is inside staggers, but it works when it is inside .from or .to? Although in both cases it works and the target is found.

Hi, This works for me: const indicator = document.querySelector('.timeline__indicator'); const tl = gsap.timeline({ scrollTrigger: { trigger: '.timeline', }, }); const stagger = 0.75; tl.from('.timeline__item', { scale: 1, opacity: 0, stagger: { each: stagger, onStart() { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore const element = this.targets()[0]; gsap.to(indicator, { top: element.offsetTop, height: element.offsetHeight, duration: 0.3, }); }, }, }).to( '.timeline__item', { scale: 1, stagger, }, stagger ); The problem is I have to add the // @ts-ignore comment because targets function is not exists in this context, but it exists in the onStart function inside a tween. For instance: tl.from('.timeline__item', { scale: 1, opacity: 0, stagger: { each: stagger, onStart() { // Property 'targets' does not exist on type 'Number | FunctionBasedValue<number> | StaggerVars'. this.targets()[0]; }, }, }).to( '.timeline__item', { scale: 1, stagger, onStart() { // Here it works this.targets()[0]; }, }, stagger ); Why this happens? Any solution?