Converted to typescript and now seeing this error. Expected 2-3 arguments, but got 6.

[elrojo]

I have a working example using ES6 and all is working fine. However, when I move over to typescript I am now seeing the error. 

 

Error:

(alias) class TweenMax
import TweenMax

Expected 2-3 arguments, but got 6.ts(2554)

 

Es6 working example:

https://codesandbox.io/s/svg-poc-forked-op0rx

 

TScode:

import { TweenMax, Expo } from "gsap";
let logo = document.querySelector(".logo");
let lineTop = document.querySelector(".line-top");
let lineCenter = document.querySelector(".line-center");
let lineBottom = document.querySelector(".line-bottom");


const myArr: any[][] = [
	[lineBottom, "-22px", "0", 45, -22],
	[lineTop, "22px", "0", -45, 23]
];


TweenMax.set([logo], { opacity: 0 });

export function animate() {
	const tl = new TimelineMax();
	tl.add(TweenMax.to(logo, 1, { opacity: 1 }));
	myArr.map((_item, index) => {
		return tl.add(
			TweenMax.to(
			myArr[index][0],
			0.25,
			{
				y: myArr[index][1],
				transformOrigin: "50% 50%",
				ease: Expo.easeInOut,
				delay: myArr[index][2]
			},
			TweenMax.to(lineCenter, 0, { opacity: 0, delay: 1.5 }),
			TweenMax.to(myArr[index][0], 0.35, {rotation: myArr[index][3], y: myArr[index][4],
				ease: Expo.easeInOut,
				delay: 1.75
			}),
			TweenMax.to(myArr[index][0], 0.25, {scale: 1.5,delay: 2.5})
			)
		);
	});
}

 

[OSUblake]

.add doesn't accept tweens like that. They would have to be in an array.

.add( child:[Tween | Timeline | Label | Callback | Array], position:[Number | String | Label] ) : self

 

Also, TweenMax and TimelineMax are deprecated. It's better to switch to new syntax e.g. gsap.to and gsap.timeline.

 

 

 

[OSUblake]

12 minutes ago, elrojo said:

I have a working example using ES6 and all is working fine.

 

The reason that works is because your tweens aren't added to the timeline. Your tweens are running without being part of the timeline. TypeScript is correct. 

[elrojo]

Thanks @OSUblake - yep, just caught what I was doing wrong. Thanks for looking into it