TypeScript types of gsap.utils.toArray elements with scrollTrigger

[Yah-Yah]

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.

[OSUblake]

Welcome to the forums @Yah-Yah

 

You can tell TypeScript what the array contains like this.

 

gsap.utils.toArray<HTMLElement>('.slide-up')

 

[Yah-Yah]

...

oh

...

right

...

facepalm, yeah of course, I'm just tired.

Thanks OSUblake -> I'll delete this thread to safe my pride.