Antonio Giroz
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Antonio Giroz
-
-
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 becausetargets
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?
Accessing Stagger Index in Callback
in GSAP
Posted
Hi Cassie,
My question is not related to Typescript itself, but why GSAP type declarations does not have the
targets
function when theonStart
function is insidestaggers
, but it works when it is inside.from
or.to
? Although in both cases it works and the target is found.