dotlottie / player-component Goto Github PK

I am trying to convert lottie JSON to dotLottie, though the server seems to be down
https://dotlottie.io/resources/json-to-dotLottie/

Do we some node module available to do this locally?

Expected behavior

When loop={false} is set on the player, the animation will play once then stop.

    <dotlottie-player
      autoplay
      loop={false}
      src="animation.lottie"
    />

Actual behavior

The behavior of loop={false} is identical to that of loop={true} - the animation will continue playing indefinitely

This is not the case when loop is not set or is explicitly loop={undefined} in which case the animation will stop on completion as expected.

CodeSandbox

So I understand that dotLottie is an extension of Lottie Web only coupled with js-zip and js-lit for compression and a few minutes extra tweaks to make it work compressed.

Now i do understand that lottie works fine with pre-comps (atleast the animation i used showed fine on lottiefiles which means the animation is working just finne.) though when i use the same animation on for dotLottie, i get the following issue.

Attached is the ZIP with the JSON/dotLottie/AE files
Archive.zip

Any help would be appreciated as i do believe that dotLottie would make a difference in the World. Already has made my world better with super fast loading animations.

My workaround is removing the Pre-Comps but that just increases the time overall.

Tell us about your environment
Tried Windows/Mac

• Browser and Browser Version:
  Chrome Latest

• After Effects Version:
  AE 2020

When I use <DotLottiePlayer src="..." /> from @dotlottie/react-player,
I get setAutoplay() Can't use whilst loading. warning in console.
How can I fix this?

• codesandbox: https://codesandbox.io/s/lottie-warning-4g8fmj?file=/src/App.tsx
  (the file is optimized .lottie)

Hi
I use the library exactly the same as the example in next js and load component on the client side

but after the page loaded, Lottie comes with an error in HTML elements as you see in the pictures

Is dotlottie ready to use in production? Currently, I get:

error: Processing of node_modules/@dotlottie/player-component/dist/dotlottie-player.js failed.Error: Could not load module '../lit-html.js' from '/Users/jfiser/Documents/ContentPartnerAPI/node_modules/@dotlottie/player-component/dist'. Make sure the file actually exists.

For performance reasons, I'd like to load the dotLottie files in advance and use them immediately when needed.
For now, there doesn't seem to be a workaround other than to hide dotlottie-player before use.

https://github.com/dotlottie/player-component/blob/master/src/dotlottie-player.ts#L47
https://github.com/dotlottie/player-component/blob/master/src/dotlottie-player.ts#L318

If there is an animationData property, I think we could use the fetchPath function to fetch it in advance and use it when we want, is it possible to add this feature?

When using lottie-player to load your *.lottie file, This error pops up in NextJS

ReferenceError: window is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack

file:///Users/kumarutkarsh/Documents/app-store/frontend/web/node_modules/@dotlottie/player-component/dist/dotlottie-player.js (25:25)

file:///Users/kumarutkarsh/Documents/app-store/frontend/web/node_modules/@dotlottie/player-component/dist/dotlottie-player.js (1:69)
Object.
file:///Users/kumarutkarsh/Documents/app-store/frontend/web/node_modules/@dotlottie/player-component/dist/dotlottie-player.js (1:220)
Module._compile
node:internal/modules/cjs/loader (1105:14)
Module._extensions..js
node:internal/modules/cjs/loader (1159:10)

I'm the maintainer of fflate and received an email from presumably someone who is on your team regarding substituting jszip with fflate, but the sender does not seem to be a valid email address. Here is my response:

Sorry for the late reply! I took a look into the dotLottie format, and it seems that your files are traditionally only a few kilobytes to a few hundreds of kilobytes large (correct me if I'm wrong). In that case, you probably want to use the synchronous, non-streaming zip decompression API provided by fflate.

import { unzipSync, strFromU8 } from 'fflate';
// yourZipFile is a Uint8Array, e.g. from this:
// const yourZipFile = new Uint8Array(await (await fetch('/example.dotLottie')).arrayBuffer());
const data = unzipSync(yourZipFile);
// strFromU8 converts Uint8Array output from fflate into strings that can be parsed
if (data['manifest.json']) {
  const manifest = JSON.parse(strFromU8(data['manifest.json']));
  for (const animName of manifest.animations) {
    const animation = JSON.parse(strFromU8(data[`animations/${animName}.json`]));
    // To get base64 PNG, you should probably use base64-js on the Uint8Arrays for performance and memory
    // However you can also pass strFromU8(data, true) to make a binary string, which btoa understands
    // This is going to cause performance issues for PNGs over 500 kB due to binary strings being wasteful, so be careful
    const base64Png = btoa(strFromU8(data['your-png-file.png'], true));
  }
}

Let me know if this works for you.

Also, I'm familiar with ES6 distribution but in the case of fflate, I've found that utilizing most ES6 features in the source code does not improve bundle size substantially for ES6 consumers but does make the generated ES3 bundle much larger due to ES6->ES3 transpilers not being perfectly effective, so I decided not to provide one.

Hi,

I was trying to make some lotties responsive to the container, but I have an issue this this inner div,

could it be possible to add a prop to modify this styles and add more? I need height: 100% and width : 100% here too.

Thanks

But works fine.

The keepLastFrame property is not working on the dot lottie player react component

What was the problem?
I think importing with .min will help reduce the bundle size

I am using DotLottiePlayer of @dotlottie/react-player in my app.
When I use recent chrome version, there is no any error.
But SyntaxError like image below is occured in android Version: 9 with chrome Mobile WebView Version:79.0.3945.

(Before I use DotLottiePlayer, no error occured.)

Hi guys,

Reporting a small bug in "@dotlottie/react-player": "^1.4.0" :

after calling onEvent={eventHandler) and console logged the results for a noLooped animation:
I've received outputs of "ready" "frame" "play" events only
but "complete" event didn't proc at all

I've retested the animation with Loop=true, and the "loopComplete" procced as it should be
so, we are missing only the "complete" event

I tried to use DotLottiePlayer on a Next.js 13 barebone app with nothing but the DotLottiePlayer. Got the following error. I tried all versions from 1.3.0 to 1.6.3 all with same error. The player still plays but has some strange side effects.

 ⨯ node_modules\@dotlottie\react-player\dist\chunk-RRTNX2SD.js (1:33293) @ 
new bn
 ⨯ Internal error: ReferenceError: structuredClone is not defined
    at new bn (./node_modules/@dotlottie/react-player/dist/chunk-RRTNX2SD.js:18:33903)
    at eval (./node_modules/@dotlottie/react-player/dist/chunk-4TZKCMTH.js:14:78)
    at ok (D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:65430)
    at Object.useState (D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:67789)
    at t.useState (D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:239329)
    at A (./node_modules/@dotlottie/react-player/dist/chunk-4TZKCMTH.js:14:73)
    at eval (./node_modules/@dotlottie/react-player/dist/chunk-4TZKCMTH.js:14:1136)
    at oZ (D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:71093)
    at at (D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:104584)
    at e (D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:109576)
    at an (D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:111554)
    at aa (D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:113776)
    at D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:102528
    at at (D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:103006)
    at e (D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:109576)
    at an (D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:111554)
    at o7 (D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:72511)
    at D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:77602
    at at (D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:77626)
    at e (D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:109576)
    at an (D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:111554)
    at o7 (D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:72511)
    at D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:77602
    at at (D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:77626)
    at at (D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:106481)
    at e (D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:109576)
    at an (D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:111554)
    at aa (D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:113776)
    at ao (D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:112668)
    at e (D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:109925)
    at an (D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:111554)
    at at (D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:105120)
    at e (D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:109576)
    at an (D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:111554)
    at o7 (D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:72511)
    at D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:77602
    at at (D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:77626)
    at e (D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:109576)
    at an (D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:111554)
    at oQ (D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:72092)
    at at (D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:75508)
    at e (D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:109576)
    at an (D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:111554)
    at o7 (D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:72511)
    at D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:77602
    at at (D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:77626)
    at e (D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:109576)
    at an (D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:111554)
    at oQ (D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:72092)
    at at (D:\projects\lottietest\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:75508)
null

It would be nice if we could use this as a direct import in nuxt3, plugins are added to every page on your website it isn't the performant choice. And the whole point of this technology is performance.

Currently direct imports gives the error
At least one <template> or <script> is required in a single file component.

Even currently installed as a plugin it gets the warning. failed to resolve component: dotlottie-player
which is supposedly fixed by adding it as a custom component in your complier options, however this gives the same error as using it directly.
At least one <template> or <script> is required in a single file component.

so ideally it would be nice if the nuxt3 support would be re-evaluated

Is it possible cashe lottie files ? and it was nice to have a fn to control freeze() when document.hidden.

Hi i see i get this warning in my build step when using this library. so just a heads up

Hi,

We are using dotlottie through on the following site.

https://www.leprechaunmuseum.ie/story/

We have 8 animations in place on the page. 4 animations are in the top area and 4 animations are revealed in modal windows. In the first scene if you click the tree you will see the dotlottie animations.

The issue that we are having is that the dotlottie animations are not running every time you visit the page. It is frustratingly very inconsistent.

Strangely enough the dotlottie files that are in the modal windows load every time but the animations in the main scenes are loading inconsistently.

The dotlottie files are in my webpack build (example below).

Is there something that I am doing wrong that is stopping the animations from loading every time?

import '@dotlottie/player-component';

document.addEventListener("DOMContentLoaded", () => {

const playerSilo4 = document.getElementById('lottieStoneBelow');
playerSilo4.load('/wp-content/themes/NLM-theme/src/js/dotlottie/stone-below-v2.lottie');

const playerScene1 = document.getElementById('lottieRag');
playerScene1.load('/wp-content/themes/NLM-theme/src/js/dotlottie/new-rag-tree-v2.lottie');

const playerSilo1 = document.getElementById('lottiePotGold');
playerSilo1.load('/wp-content/themes/NLM-theme/src/js/dotlottie/new-pot-v2.lottie');

const playerScene2 = document.getElementById('lottieFairyFort');
playerScene2.load('/wp-content/themes/NLM-theme/src/js/dotlottie/new-fariy-fort-v2.lottie');

const playerSilo2 = document.getElementById('lottieFairyFortBelow');
playerSilo2.load('/wp-content/themes/NLM-theme/src/js/dotlottie/fairy-fort-below-no-gradient.lottie');

const playerScene3 = document.getElementById('lottieWellAbove');
playerScene3.load('/wp-content/themes/NLM-theme/src/js/dotlottie/new-well-above-v2.lottie');

const playerSilo3 = document.getElementById('lottieWellBelow');
playerSilo3.load('/wp-content/themes/NLM-theme/src/js/dotlottie/new-well-below-v2.lottie');

const playerScene4 = document.getElementById('lottieStoneAbove');
playerScene4.load('/wp-content/themes/NLM-theme/src/js/dotlottie/new-stone-above-v2.lottie');

});

I have a simple lottie animation which I want to pause after it has looped once. I tried removing the loop prop but that removes the entire animation after 1 loop. Can anyone please help me out here ?

What I want to achieve

An animation that completes one loop and stops at its last frame, meaning user does not keep seeing a looped animation

It seems like intermission attribute does nothing. The player starts the next loop immediately.
My code is pretty straightforward:
<dotlottie-player ref={player} intermission={9} autoplay loop />
Actual lottie is loaded to this player later via player.load()

Am I missing smth or is it a bug?
Thanks!

Getting this when running/building my app:

WARNING in ./node_modules/@dotlottie/react-player/dist/chunk-RRTNX2SD.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/example/node_modules/node_modules/.pnpm/@[email protected]/node_modules/node_modules/.pnpm/@[email protected]/node_modules/@rgba-image/copy/src/index.ts' file: Error: ENOENT: no such file or directory, open '/example/node_modules/node_modules/.pnpm/@[email protected]/node_modules/node_modules/.pnpm/@[email protected]/node_modules/@rgba-image/copy/src/index.ts'

WARNING in ./node_modules/@dotlottie/react-player/dist/chunk-RRTNX2SD.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/example/node_modules/node_modules/.pnpm/@[email protected]/node_modules/node_modules/.pnpm/@[email protected]/node_modules/@rgba-image/create-image/src/index.ts' file: Error: ENOENT: no such file or directory, open '/example/node_modules/node_modules/.pnpm/@[email protected]/node_modules/node_modules/.pnpm/@[email protected]/node_modules/@rgba-image/create-image/src/index.ts'

WARNING in ./node_modules/@dotlottie/react-player/dist/chunk-RRTNX2SD.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/example/node_modules/node_modules/.pnpm/@[email protected]/node_modules/node_modules/.pnpm/@[email protected]/node_modules/@rgba-image/lanczos/src/convolve.ts' file: Error: ENOENT: no such file or directory, open '/example/node_modules/node_modules/.pnpm/@[email protected]/node_modules/node_modules/.pnpm/@[email protected]/node_modules/@rgba-image/lanczos/src/convolve.ts'

WARNING in ./node_modules/@dotlottie/react-player/dist/chunk-RRTNX2SD.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/example/node_modules/node_modules/.pnpm/@[email protected]/node_modules/node_modules/.pnpm/@[email protected]/node_modules/@rgba-image/lanczos/src/filters.ts' file: Error: ENOENT: no such file or directory, open '/example/node_modules/node_modules/.pnpm/@[email protected]/node_modules/node_modules/.pnpm/@[email protected]/node_modules/@rgba-image/lanczos/src/filters.ts'

WARNING in ./node_modules/@dotlottie/react-player/dist/chunk-RRTNX2SD.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/example/node_modules/node_modules/.pnpm/@[email protected]/node_modules/node_modules/.pnpm/@[email protected]/node_modules/@rgba-image/lanczos/src/index.ts' file: Error: ENOENT: no such file or directory, open '/example/node_modules/node_modules/.pnpm/@[email protected]/node_modules/node_modules/.pnpm/@[email protected]/node_modules/@rgba-image/lanczos/src/index.ts'

Environment info:

OS: macOS 13.6
Node: 18.18.2
npm: 9.8.1
webpack-cli: 5.1.4
@dotlottie/react-player: 1.6.3

Because it does not return a cleanup that removes listening, the handler continues to be called even after the component is unmounted.
Am I using it wrong?

Using @dotlottie/react-player 1.6.6 and NextJS.

I have a loading spinner as

import { DotLottiePlayer, PlayMode } from '@dotlottie/react-player';

import json from './LoadingSpinner.json';

export default function LoadingSpinnerComponent() {
  return (
    <div className="absolute left-0 top-0 h-full w-full center">
      <DotLottiePlayer
        className="z-50"
        autoplay
        loop
        playMode={PlayMode.Normal}
        src={json}
        style={{ height: '300px', width: '300px' }}
      ></DotLottiePlayer>
    </div>
  );
}

In my _app.tsx I have:

          <Suspense fallback={<LoadingSpinner />}>

I get the following error:

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.

Node : v14.17.2
React : v17.0.2
Code :

import React from 'react'
import './index.scss'
import DotLottie from './assets/lottie/full/data.lottie?url'
import { DotLottiePlayer, Controls } from '@dotlottie/react-player';
import '@dotlottie/react-player/dist/index.css';

const App = (): JSX.Element => {

  return (
    <>
      <DotLottiePlayer
        src={DotLottie}
        autoplay
        loop
      >
        <Controls></Controls>
      </DotLottiePlayer>
    </>
  )
}

export default App 

Got this error:

and the lottie animation didn't show as expect.

Trying to install the latest version of @dotlottie/[email protected] throws an error saying @dotlottie/common cannot be found on npm

Came across the worker property while looking through dotlottie-player.ts in version 2.7.0.

This is an incredibly useful feature (thread blocking no more!) and I thank you for pushing it.

It is so useful that it deserved a special announcement 😂

But hasn't been documented anywhere...

Therefore, requesting for the feature to be documented 🙏

The animation plays however this line:

causes this error:

dotlottie-player.js:38 Uncaught ReferenceError: CanvasRenderer is not defined
at AnimationItem.setParams (dotlottie-player.js:38)
at AnimationItem.setData (dotlottie-player.js:38)
at h (dotlottie-player.js:38)
at Object.t.searchAnimations (dotlottie-player.js:38)
at searchAnimations (dotlottie-player.js:38)
at checkReady (dotlottie-player.js:38)

when the <script> tag is inside a CMS.

I got the security report and found the vulnerability of dependency in the jszip of fflate

should I ignore this issue?

Can someone explain to me the tradeoffs between dotLottie and using json files?

The react player package for dot Lottie files is 2MB... Seems incredibly heavy to send to the browser vs. importing the JSON player and JSON files.

In the documentation, it says that the Lottie-player can be set and loaded programmatically. For better (or maybe worse), we still use requirejs, and using the 'bodymovin' player, this works just fine:

require(['https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js'], (bodymovin) => {
        const player = bodymovin.loadAnimation({
        container: document.getElementById('abc123'),
        autoplay: false,
        renderer: 'svg',
        loop: false,
        animationData: 'some-json-here'});
});

I'm trying to do something similar with the dotlottie-player - something like this:

require(['https://unpkg.com/@dotlottie/[email protected]/dist/dotlottie-player.js'], (player) => {
            console.log('player is available - here:', player); <-- I see the player in the console ({PlayerState: {…}, PlayMode: {…} etc)
            player = document.querySelector('dotlottie-player-element'); <-- this exists
            player.load('url-to-dot-lottie-file.lottie');
            player.play();
});

But it doesn't seem to work. What am I missing? And is there more documentation available somewhere for programmatic use?

TIA :)
Martin

Hey,

I see that getMockDotLottieState function in apps/dotlottie-playground/src/utils.ts file and updateSrc function in packages/common/src/dotlottie-player.ts are using the structuredClone function which is not available for chrome versions < 98 ref, which is making the updated version incompatible with those versions. I can do a PR to convert those to Object.assign function or any other method to replace structuredClone.

Thanks

I use this code for a couple of animations in my React/Next app.

import { DotLottiePlayer } from '@dotlottie/react-player';
import '@dotlottie/react-player/dist/index.css';

const SlideLottie = ({ slide }) => {
  return (
    <DotLottiePlayer
      key={slide}
      src={slide}
      loop={false}
      autoplay={true}
      intermission={0}
    ></DotLottiePlayer>
  );
};

export default SlideLottie;

Everything works fine until the animation is complete – then those elements which are animated simply disappear. When I try them in the web Lottie player everything is fine, so I assume it has something to do with the DotLottie player. Can anyone help? :)

I'm unable to use this library in my react native application. It throws an error saying ReferenceError: Property 'HTMLElement' doesn't exist.. Are we planning to add support for react native applications in it?

Describe the bug
I have followed the documentation and implemented everything in my Next.js project. Animation is working perfectly in Desktop browsers but animation remains blank in mobile browsers. I have tested it in both Android and iOS. Can anyone help me out?

To Reproduce
Download the "developer.lootie" file from here - https://www107.zippyshare.com/v/kbeBPeaz/file.html and place it in your project "public/developer.lottie". or you can try and .lottie file. Then create a ".env.local" file and place the below line there -

NEXT_PUBLIC_URL=http://localhost:3000

Just create a blank Next.js project and place the below code in pages/index.js file.

import { useEffect } from "react";

export default function Home() {
  useEffect(() => {
    import("@dotlottie/player-component");
  });

  return (
      <div className="min-h-[calc(100vh_-_81px)] ">
        <div className="max-w-lg">
          <dotlottie-player src={`${process.env.NEXT_PUBLIC_URL}/developer.lottie`} autoplay loop style={{ height: "100%", width: "100%" }} />
        </div>
      </div>
  );
}

Expected behavior
If you run "npm run dev" in your terminal and open the browser and visit http://localhost:3000, the animation should load properly. Everything is working absolutely fine in all desktop browsers. But when I check it from mobile browsers, the animation remains blank. Please check the below screenshots.

Screenshots/Logs

Desktop Browser:

iPhone Safari

Environment (tested in iPhone and Macbook pro):

• OS: [Mac, Window, Lunux]
• Browser [Firefox, Safari, Chrome and Edge]
• Bundler [webpack]
• Framework [Next.js]
• Library [React.js]

When my project uses it, running with vitest will result in errors

Error: Failed to resolve entry for package "@dotlottie/react-player". The package may have incorrect main/module/exports specified in its package.json.

I was testing my webpage with dotlottie on LightHouse, apparently the result was pointing at the excessive DOM size that might lead to potential longer style calculation.

I'm using the following in my nuxt project:

<dotlottie-player
  src="https://assets2.lottiefiles.com/dotlotties/dlf10_l12sw9oo.lottie"
  autoplay
  renderer="canvas"
  loop
/>

Is it not possible to use other renderers than SVG with dotlottie? Or does the .lottie-file need to be prepared in a special way?

The dot lottie player seemingly ignores all external CSS rules, even if important!, with the inline fill and stroke attributes always taking precedence.

This is troublesome for theming (we don't really want to maintain 2 versions of the icons for light, dark modes).

Perhaps I am missing something but I am not seeing a way to inject classes or change the default colors of dot lottie animations.

It would be useful for the <dotlottie-player> tag to take a svgStyle attribute that would allow us to access the CSS directly within the shadow root.

I have an issue with displaying the Optimized dotLottie file.
Normal, not optimized .lottie file is working.

I generated the files from Lottie's user panel.

Scripts:

https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.js
https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js

My HTML:
<dotlottie-player id="product-4-min" src="/dist/lottie/test-4-min.lottie"></dotlottie-player>

Error message in the console:

dotlottie-player.ts:688 Error: [dotLottie-player-component] TypeError: Cannot read properties of undefined (reading 'length')
    at createError (utils.ts:6:17)
    at dotlottie-player.ts:332:15
    at async DotLottiePlayer_1._fetchDotLottie (dotlottie-player.ts:336:5)
    at async DotLottiePlayer_1._fetchFileAndLoad (dotlottie-player.ts:398:56)
    at async DotLottiePlayer_1.load (dotlottie-player.ts:622:9)
    at async DotLottiePlayer_1.firstUpdated (dotlottie-player.ts:1068:14)

This may be a bit of an ask, but when I insert the dotlottie-player element into a sticky column powered by Javascript or CSS, the file doesn't load. But when I disable the sticky feature, the dotlottie-player loads the file just fine.

I'm using Wordpress, and Salient Theme. Any advice would be appreciated.

We are listening to the error event on dotlottie-player falling back to static svg image. This works well, however there is a brief delay before the error event is emitted, and during this time window, the ⚠️ is visible.

Can't seem to add display: none; to the .error class due to shadow dom.

I am trying to migrate from @lottiefiles/lottie-player but I am having trouble getting autoplay to work...

<script lang="ts">
  import { onMount } from 'svelte';
  let lottiePlayerReady = false;
  onMount(async () => {
    await import('@dotlottie/player-component');
    lottiePlayerReady = true;
  });
  let lottieSrc =
    'https://lottie.host/13489d72-9fb8-47e8-94b9-42d1c880647b/zMLtJHw8sJ.json';
</script>

{#if lottiePlayerReady}
  <dotlottie-player
    src={lottieSrc}
    autoplay
    loop
    style="width: 500px"
  ></dotlottie-player>
{/if}

if I include the controls, I am able to play and loop the lottie. A workaround is to trigger play when I receive the ready event:

  onMount(async () => {
    await import('@dotlottie/player-component');
    lottiePlayerReady = true;
    await tick();
    const lottiePlayer = document.querySelector('dotlottie-player');
    lottiePlayer.addEventListener('ready', () => {
      (lottiePlayer as any).play();
    });
  });

The readme here calls out using DotLottieRefProps (from @dotlottie/react-player), however that is no longer exported from the package. It was on the version 1.1.0.

As of 1.4.0, the fetchPath function is gone, which was a great way to preload large lottie files and only render them later. Can you guys put it back in?

Hello Lottie Developers & Designers,

I'm a designer who's creating his own website with Lottie animations and I want to try the new dotlottie format as it's heavily optimized, and I like the fact it uses a webcomponent to do all my responsive animations correctly. It's a great help for a indie-dev.

I have one thing that is noticeably missing; proper theming and naming convention for hooking up your own stylesheet with your Lottie animation. For now you have to directly target colors rather than those colors being variables you refer to.

First of all I would like to propose if people are for an idea like this to begin with and B, I would love to have a shot at using my own "perceptually relative & inclusive" design token naming convention Base--Plus--Minus

The premise is very simple; If colors would work like floors in an elevator, and you when you simply need a brighter or darker color depending (or even programmatically), then all you have to do is to go UP from the CURRENT FLOOR, or DOWN depending.

Well congratulations, you now understand BASE--PLUS--MINUS (BPM for short, not related to bpm). Need your color/size/font whatever to go up? Base plus one (or two, whatever you need). Need less? Base minus one. See it's a ruleset that works for humans very easily, and also translates to rules you can code, without the need for an extra layer of abstraction or technology in between.

I did a lightningtalk at React Amsterdam in February about it in more depth on why It works and how I designed this design token naming convention; it scales very easily in a personal projects, it's very familiar and it's simple. Dutch!

(video) Design Systems Galore: React Amsterdam - February 2020
https://youtu.be/G4mui3OCMVA?t=6458

Why would BPM matter for Lottie? Well first of all it adds the base-tag at the end of your token so the Sass functions know what to do with them, without you having to refactor your code. That's a whole step ahead in adoption since you only have to loop your colors through some Sass we provide, and all your colors get the same perceptually relevant position on the ramp.

Second, Dark-mode is built-in with BPM since the BASE doesn't decide what the theme is, it just puts itself at the zero-point and then ramps them exactly the way you think it works; either you see PLUS as adding darkness, or you see it as adding lightness to a color. That doesn't matter too because that's relevant and just a matter of "flipping the mental switch".

This way your colors can simply be "flipped" not by overwriting the values, but by simply flipping the scale and letting positive become negative respectively. And since it's dynamic in nature (symmetry) it is easily forecastable this can be done programmatically and thus creates 50% less code for styling since it just flips the poles.

It doesn't matter for the naming convention since that is relative to the pole too, yet you can work both ways "from the pole" on the same project and have it work the same for either theme you're developinng. Funny happy accident when you use symmetry on color and other things.

In CSS light or dark schema looks like this, uniformly;

(base--plus--one = bp1
base--minus--one = bm1)

--brand-primary--bp4:
--brand-primary--bp3:
--brand-primary--bp2:
--brand-primary--bp1:
--brand-primary
--brand-primary--bm1:
--brand-primary--bm2:
--brand-primary--bm3:
--brand-primary--bm4:

To me that's a whole lot clearer knowing the concept behind BPM what each color does respectively. In traditional naming conventions they use the same ramp as with typography; numbers that in themselves don't mean a thing like you seen in Material Design and Tailwind CSS; purple--600 is the base, but what does that say about the color itself? they are just that, numbers not functional tokens with a job-role that all relate to one uniform standard and a way of looking at it.

Since --brand-primary is the base and used most often, it doesn't require the extra addition plus it will not be "seen" as a child since it doesn't bare the --bpX tag. Yes correct, tag as I see it as an abstraction-layer so you can write test for this based on rules, roles & responsibilities these tokens need to have in relation to keeping your colors accessible from the start, by setting rules for what the BASE should be (like AAA on text etc.)

How do you handle colors in between or ones you add later? Well easy, I have a very simple rule for that; no more than one edge-case per token. Say you need a slightly lighter color between --bp1 and --bp2, and the color is lighter then --bp1, it will get attached to the color closest to the base by adding __ALT.

So in this case it will be --brand-primary--bp1__ALT. Since you can only have one edge-case per token, there is no need for ALT1 or such. This makes it easy to catch alternatives upfront so you can easily find & refactor them later without blocking you from proceeding creating your design.

All caps and double underscores are only used for such cases so it's easy to spot in your editor as well as any post- or preprocessor handling. This creates optimal flow for manual production of such a scale upfront, while maintaining a simple ruleset; "what comes up, must go down" meaning if I add it I am also responsible to refactor it if needed.

Using Sass, or some JS if you like, you can loop through everything ending with *__ALT, or with pinpoint accuracy target a certain token with *--bp2__txt in regular :is or :not CSS to get what you need without needing JS for that. It's a good mix of design + code that is easy to maintain in code and relatable for designers, and if they don't stick with it; Typescript ftw

This is different than making alternate variants that also use double underscores for readability and accessibility purposes, DRY-ing out the utility-classes by design in from pre-production to post-production, uniformly;

token specifically for text; __txt
token specifically for icons; __ico
token specifically for defaults; __def

I hope you like the idea for creating an additive and presentational layer for design tokens that can literrally scale, because I really like Lottie and performance, and it's one of the most designer-friendly tech out there that could really make a difference for motion designers who want to jump into code. I think BPM is in line with that; to be designer-friendly as well as performant

in dotlottie-player.ts:

The #animation-container element has role="img" but is lacking an aria-label attribute. This triggers an a11y violation: https://dequeuniversity.com/rules/axe/4.7/role-img-alt?application=axeAPI

I want to use dotlottie in react native but don't know if this library supports it