Thanks for the tips! Unfortunately it's kind of difficult for me to isolate it in a code sample. I'll still try to do it, but in the meantime, I can provide some more context.
The code is working fine in the browser, no console error whatsoever. The TypeScript linting error is only in the code editor and I cannot deploy my code without resolving it.
I'm using ReactJS server side rendering + TypeScript. gsap is being loaded async in a client component.
From what I understand, this lottie.loadAnimation returns an AnimationItem.
animation = lottie.loadAnimation({
...
});
Then it's creating a frameTween here
animation.addEventListener("DOMLoaded", function() {
let createTween = function() {
animation.frameTween = gsap.to(playhead, {
...
});
...
};
...
});
But when looking at the type AnimationItem definition in index.d.ts, there's no frameTween
export type AnimationItem = {
name: string;
isLoaded: boolean;
currentFrame: number;
currentRawFrame: number;
firstFrame: number;
totalFrames: number;
frameRate: number;
frameMult: number;
playSpeed: number;
playDirection: number;
playCount: number;
isPaused: boolean;
autoplay: boolean;
loop: boolean | number;
renderer: any;
animationID: string;
assetsPath: string;
timeCompleted: number;
segmentPos: number;
isSubframeEnabled: boolean;
segments: AnimationSegment | AnimationSegment[];
play(name?: string): void;
stop(name?: string): void;
togglePause(name?: string): void;
destroy(name?: string): void;
pause(name?: string): void;
goToAndStop(value: number | string, isFrame?: boolean, name?: string): void;
goToAndPlay(value: number | string, isFrame?: boolean, name?: string): void;
includeLayers(data: any): void;
setSegment(init: number, end: number): void;
resetSegments(forceFlag: boolean): void;
hide(): void;
show(): void;
resize(): void;
setSpeed(speed: number): void;
setDirection(direction: AnimationDirection): void;
setLoop(isLooping: boolean): void;
playSegments(segments: AnimationSegment | AnimationSegment[], forceFlag?: boolean): void;
setSubframe(useSubFrames: boolean): void;
getDuration(inFrames?: boolean): number;
triggerEvent<T = any>(name: AnimationEventName, args: T): void;
addEventListener<T = any>(name: AnimationEventName, callback: AnimationEventCallback<T>): () => void;
removeEventListener<T = any>(name: AnimationEventName, callback?: AnimationEventCallback<T>): void;
}
I think this is causing the error but I don't know how to fix it...
