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?
