I set up simple animation on scroll up, it's an Array of elements that share classname '.slide-up' and the animation is triggered when each of the elements enters the viewport.
gsap.utils.toArray('.slide-up').forEach((elem: any) => {
gsap.fromTo(
elem,
// elem! as gsap.DOMTarget,
{
y: 100,
opacity: 0,
},
{
scrollTrigger: {
trigger: elem,
start: '-80px bottom',
},
duration: 2,
ease: 'expo.out',
y: 0,
opacity: 1,
}
);
});
All is fine except for the types I had to assign, namely I can only run this when the 'elem' has type 'any'. I tried assigning other, more fitting types such as 'HTMLDivElement', but then TS complains that
Argument of type '(elem: HTMLDivElement) => void' is not assignable to parameter of type '(value: unknown, index: number, array: unknown[]) => void'.
Types of parameters 'elem' and 'value' are incompatible.
Type 'unknown' is not assignable to type 'HTMLDivElement'.ts(2345)
If I try casting it as unknown, then the scrollTrigger throws a fuss about it:
Type 'unknown' is not assignable to type 'DOMTarget | undefined'.
Type 'unknown' is not assignable to type 'ArrayLike<string | Element | null>'.ts(2322)
I'm really confused here and my code won't get past code review with type ':any' so I have to find solution.
