Neurosis Prevention Mechanism

    @lottiefiles/jlottie

    1.2.1 • Public • Published

    jLottie

    jLottie is a Lottie player written in javascript with an aim to have the smallest possible file size. jLottie is suitable as a general purpose lottie player, though implements a subset of the features in the core player - this approach leads to a tiny footprint and great performance.

    At less than 15kb when gzipped, jLottie is perfect as a lightweight addition to any webapp where not all of the lottie featues are necessary - common use cases include animated icons and micro animations. A list of all of the playback features supported by jLottie is available here, and there's a test page available here.

    jLottie's performance is achieved by compiling the Lottie source into a scene graph, which is subsequently used to play the animation. This forgoes any need to perform real-time computations during playback. jLottie is suitable for use when there are many animations playing on a single page.

    • jLottie player is best used for animated icons and micro animations
    • jLottie player is vastly smaller in size (less than 15kb, gzipped) compared to other Lottie players
    • jLottie player is suitable for use if there are many animations playing on a single page
    • jLottie player is highly performant

    Performance

    Below are results of some performance tests comparing jLottie with lottie-player.

    Single animation

    In this test 11 Lottie animations were selected from the Lottiefiles public animations repository, and their runtime performance and memory utilization was recorded using Chrome's analysis tools. The performance figures were prorated to 1 second durations, which allows for direct comparison, as per the table below.

    All figures other than memory is in milliseconds.

    Scripting Rendering Painting System Idle Memory (MB)
    Best jLottie 41 11 5 14 928 1.9
    lottie-player 122 28 10 37 801 4
    Average jLottie 70 29 8 23 872 3.4
    lottie-player 91 36 11 31 831 6.2
    Worst jLottie 124 35 11 24 805 8
    lottie-player 84 41 9 25 840 4.7

    Stress test

    In this test, a total of 35 Lottie animations, whose features are fully supported by jLottie, were chosen at random from the Lottiefiles public animations repository. These animations were then rendered in one page at the same time, and performance and memory utilization analyzed using Chrome tools.

    The test pages used for this test are here for jLottie and here for lottie-player.

    During this test, it was discovered that all 35 animations noticeably skipped frames when lottie-player was rendering them. Conversely, jLottie is designed not to skip any frames, and therefore no jitter could be discerned on any of the animations even during the Chrome performance analysis.

    All figures other than memory is in milliseconds.

    Scripting Rendering Painting System Idle Memory (MB)
    jLottie 515 269 36 62 115 73.7
    lottie-player 564 205 19 45 166 183

    Features

    Supported features

    • Shapes (except, ellipse, polystar, repeater, trim paths)
    • Fills (except radial gradient)
    • Strokes (without opacity and dashes)
    • Transforms
    • Interpolation (except roving across time)
    • Masks (limited to path, opacity and subtract)
    • Layer effects (limited to only fills)

    Features not supported

    • Matts
    • Merge paths
    • Text
    • Expressions
    • Images
    • Precomps
    • Time stretch
    • Time remap
    • Markers

    Installation

    In HTML:

    • Import from CDN.
    <script src="https://unpkg.com/@lottiefiles/jlottie@latest/dist/jlottie.min.js" type="module"></script>

    In Javascript or TypeScript:

    1. Install package using npm or yarn.
    npm install --save @lottiefiles/jlottie
    1. Import package in your code.
    import * as jlottie from '@lottiefiles/jlottie';

    OR

    const jlottie = require('@lottiefiles/jlottie');

    Usage

    <div id="my-animation"></div>

    To load an animation from a URL:

    jlottie.loadAnimation({
      container: document.getElementById('my-animation'),
      loop: true,
      autoplay: true,
      useWebWorker: false,
      path: '<LOTTIE_URL>',
    });

    To directly pass animation data:

    jlottie.loadAnimation({
      container: document.getElementById('my-animation'),
      loop: true,
      autoplay: true,
      useWebWorker: false,
      animationData: animationDataVariable,
    });

    To enable debugging (debug outputs console logs and debugAnimation outputs exception messages to the debugContainer):

    jlottie.loadAnimation({
      container: document.getElementById('my-animation'),
      loop: true,
      autoplay: true,
      debug: true,
      debugAnimation: true,
      debugContainer: document.getElementById('debug-div'),
      useWebWorker: false,
      path: '<LOTTIE_URL>',
    });

    In all three cases above, simply set useWebWorker to true to enable rendering using web workers.

    API

    Methods

    jlottie.loadAnimation(configObject)

    Takes in an object with format as follows as parameter

    {
      container: document.getElementById('my-animation'), // html dom element to hook animation to
      loop: true, // loop toggle
      autoplay: true, // autoplay
      path: '<LOTTIE_URL>', // path to hosted lottie file
    }

    Returns

    Type: Object, that refers to the created animation with the following properties:

    thisAnimation._currentFrame; // the current frame number thisAnimation is on
    thisAnimation._totalFrames; // the total number of frames in thisAnimation 
    

    jlottie.pause(elementId)

    Pause animation. Takes in the Dom element Id as parameter.

    Alternative : thisAnimation.pause()

    Returns

    Type: Null

    jlottie.play(elementId)

    Play animation. Takes in the Dom element Id as parameter.

    Alternative : thisAnimation.play()

    Returns

    Type: Null

    jlottie.stop(elementId)

    Stop animation. Takes in the Dom element Id as parameter.

    Alternative : thisAnimation.stop()

    Returns

    Type: Null

    jlottie.destroy(elementId)

    Destroy animation. Takes in the Dom element Id as parameter.

    Alternative : thisAnimation.destroy()

    Returns

    Type: Null

    jlottie.goToAndStop(frame, elementId)

    Go to specified frame and stop. Takes in a frame number and Dom element Id as parameter.

    Alternative : thisAnimation.goToAndStop(frame)

    Returns

    Type: Null

    Events dispatched

    loopComplete

    Fires at the end of each loop.

    detail = {  
                count: num1, // number of loops thus far
                frame: num2, // the current frame number
                animation: num3 // internal index number of this animation
              }

    hovered

    Fires when pointer enters the bounding box of the animation.

    detail = {  
                animation: num1 // internal index number of this animation
              }

    DOMLoaded

    Fires right after all DOM content is loaded.

    detail = {  
                animation: num1 // internal index number of this animation
              }

    loadError

    Fires if an error is encountered whilst loading the animation.

    detail = {  
                error: {} // the error object thrown
                animation: num1 // internal index number of this animation
              }

    Go to specified frame and stop. Takes in a frame number and Dom element Id as parameter.

    Development

    Building

    1. Install dependencies.
    yarn install
    2. Dev mode.
    yarn dev

    Automatically build and preview while developing. This runs rollup in watch mode and spins up a server at port 10000 to preview and test the builds.

    3. Production builds.
    yarn build

    This creates ESM, CJS and UMD builds in the dist directory.

    Testing

    1. Install packages
    yarn install
    1. Run test command.
    yarn test

    This will generate snapshots in the __snapshots__ directory and warn of mismatches with lottie-web renderer as the comparison baseline.

    Contributing

    See how to contribute to this project.

    FAQ

    • Why doesnt my Lottie animation work on the jLottie player?

    • The jLottie player does not support as many Adobe After Effects features as other players, as it was built to be smaller in size and highly performant. It therefore may not support certain settings, effects or features that were used when creating the animation. Please send us feedback and by popular demand we may make accomdations as needed. You can submit your feed back here. Click here

    • What features/effects of After Effects does this player support?

    • Features supported by jLottie are listed here.

    • Where can I raise issues?

    • Please use github issues to highlight any bugs.

    • Where can I drop feedback?

    • You may Click here and submit your feedback

    License

    MIT License © LottieFiles.com

    Keywords

    none

    Install

    npm i @lottiefiles/jlottie

    DownloadsWeekly Downloads

    247

    Version

    1.2.1

    License

    MIT

    Unpacked Size

    2.21 MB

    Total Files

    15

    Last publish

    Collaborators

    • jawish
    • karamalie
    • sam-osb
    • shaafiee