Lottie-web: can I use with typescript

[shawmraz]

Tell us about your environment

• Browser and Browser Version:
• After Effects Version:

What did you do? Please explain the steps you took before you encountered the problem.

What did you expect to happen?

What actually happened? Please include as much _relevant_ detail as possible.

Please provide a download link to the After Effects file that demonstrates the problem.

[agentschmitt]

Hello, i have searched for typescript definitions too. But didn't found any on the web.
So i wrote them on my own with description from documentation.
In only use a small set of the functions so the most are untested ;)
Maybe this can help you..

declare namespace Lottie {
    export interface AnimationItem {
        play();

        stop();

        pause();

         // one param speed (1 is normal speed)   
        setSpeed(speed: number);

        // one param direction (1 is normal direction)  
        setDirection(direction: number);

        // If false, it will respect the original AE fps. If true, it will update as much as possible. (true by default)
        setSubframe(flag: boolean);

        // first param is a numeric value. second param is a boolean that defines time or frames for first param        
        goToAndPlay(value: number, isFrame: boolean);

        // first param is a numeric value. second param is a boolean that defines time or frames for first param
        goToAndStop(value: number, isFrame: boolean);

        // first param is a single array or multiple arrays of two values each(fromFrame,toFrame), second param is a boolean for forcing the new segment right away
        playSegments(segments: number[] | number[][], forceFlag: boolean);

        // To destroy and release resources.
        destroy();
    }

    export interface AnimationConfig {
        // an Object with the exported animation data.
        animationData?: any;

        // the relative path to the animation object. (animationData and path are mutually exclusive)
        path?: string;

        // true / false / number
        loop?: boolean | number;

        // true / false it will start playing as soon as it is ready
        autoplay?: boolean; 

        // animation name for future reference
        name?: string;

        // 'svg' / 'canvas' / 'html' to set the renderer
        renderer?: string;

        // the dom element on which to render the animation
        container?: any;
    }
}

declare class LottyPlayer {
    // optional parameter name to target a specific animation
    play(name?: string);

    // optional parameter name to target a specific animation
    stop(name?: string);

    // first param speed (1 is normal speed) with 1 optional parameter name to target a specific animation
    setSpeed(speed: number, name?: string); 

    // first param direction (1 is normal direction.) with 1 optional parameter name to target a specific animation
    setDirection(direction: number, name?: string);

    // default 'high', set 'high','medium','low', or a number > 1 to improve player performance. In some animations as low as 2 won't show any difference.
    setQuality(quality: string | number);

    // param usually pass as location.href. Its useful when you experience mask issue in safari where your url does not have # symbol.
    setLocationHref(href: string);

    // returns an animation instance to control individually.
    loadAnimation(params: Lottie.AnimationConfig): Lottie.AnimationItem; 

    // you can register an element directly with registerAnimation. It must have the "data-animation-path" attribute pointing at the data.json url
    registerAnimation(element: any, animationData?: any);

     // looks for elements with class "lottie"
    searchAnimations(animationData: any?, standalone: boolean?, renderer?: string);

    // To destroy and release resources. The DOM element will be emptied.
    destroy(name?: string);
}

declare const Lottie: LottyPlayer;

declare module "lottie-web" {
    export = Lottie;
    export as namespace Lottie;
}

[casizzi]

@agentschmitt I am pretty new to creating my own typings, where would I load the above typings and what would the filename need to be called in the node_modules/lottie-web folder?

[agentschmitt]

@casizzi you should not modify your local node_modules/lottie-web this would be overwritten on each update of the library.

The filename doesnt matter but should have the extension .d.ts

In Visual Studio Code i have just addeded an lottie-web.d.ts file to my source folder and it is automatically discovered. Not sure if this works the same in other IDEs.

[casizzi]

Thanks @agentschmitt I am using VSCode also within the angular cli. I am getting the error Global module exports may only appear at top level. when trying to export as namespace Lottie any ideas?

[rewrapxyz]

Any updates on this one?
I am trying to use Lottie with Angular.

[jadbox]

I too would love to get these bindings added. @agentschmitt could you add your bindings as a PR?

[inomdzhon]

Thank you @agentschmitt! I create branch where add your types declare with some fix https://github.com/inomdzhon/lottie-web/tree/feature/typescript-support

Before I create a PR, who can help complete the types?

[asirko]

For a project, I had to declare few additionnal properties. I used @agentschmitt version and directly added them into it.

If it can help!

lottie-web.txt

[mischkl]

Would be awesome if we could get some official typings either directly packaged here or added to the https://github.com/DefinitelyTyped/DefinitelyTyped repo.

[D34THWINGS]

I think it would be more productive to add them here instead of in DefinitlyTyped because they have a very long approval process. Also having typings in an outside repository could lead to typings not updated when API has breaking changes.

Also I have a few suggestions for the typings @agentschmitt , we should also declare modules for lottie_light, lottie-web, lottie-canvas, etc. because not everyone uses the base player. And also some options are too loosely typed, some any could be replaced more precise one, like AnimationConfig.container could be an HTMLElement.