Overview

Sorry for opening these many issues. We are moving from @dotlottie/player-component to @lottiefiles/dotlottie-web and we want to make sure everything works as expected. We are primarily working with this animation.

With @dotlottie/player-component it works flawlessly. However, when running the animation with @lottiefiles/dotlottie-web, some paths (trimming) go much faster than expected (only some of them). In the case of our animation, the windows of some houses are drawn too quickly. Example (I highlighted some of the mismatches in red):

You can check the same animation running with each package in:

• @lottiefiles/dotlottie-web: https://adelantevalladolid.es/test-lottiefiles/ (password: test)
• @dotlottie/player-component: https://adelantevalladolid.es/

Overview

When rendering a simple animation from the same JSON file, the result is different when using dotlottie-web compared to lottie-web. The dotlottie-web rendering produces unexpected opaque center within the rocket:

In the above example, lottie-web uses canvas renderer for fair comparison. Both use the same JSON file as a source. I tried converting JSON to dotlottie format, but it didn't change the result.

Reproduction

I created minimal reproduction that can be observed here: https://stackblitz.com/edit/vitejs-vite-2pieau?file=src%2FApp.svelte

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): update dependency @size-limit/preset-small-lib to v10.0.3
• chore(deps): update dependency size-limit to v10.0.3
• fix(deps): update dependency @dotlottie/dotlottie-js to v0.6.1
• chore(deps): update dependency @size-limit/preset-small-lib to v11
• chore(deps): update dependency remark-cli to v12
• chore(deps): update dependency size-limit to v11
• chore(deps): update dependency syncpack to v11
• 🔐 Create all rate-limited PRs at once 🔐

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• chore(deps): update dependency @commitlint/cli to v17.8.1

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update pnpm to v8.10.3
• chore(deps): update dependency lint-staged to v13.3.0
• chore(deps): update dependency npm-check-updates to v16.14.6
• chore(deps): update dependency typescript to v5.2.2
• chore(deps): update dependency zx to v7.2.3
• chore(deps): update dependency @commitlint/cli to v18
• chore(deps): update dependency eslint to v8
• chore(deps): update dependency lint-staged to v15
• chore(deps): update dependency prettier to v3
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

Overview

Hi, I am trying to integrate this lottie animation (that I had exported from figma), https://app.lottiefiles.com/share/352a1071-0e63-44f2-9bd8-a6b94026600d, into my react app but it does not seem to work at all (it renders a blank canvas). Both the .json and .lottie formats do not seem to work.

Lottie .json: https://lottie.host/c47dca0a-2580-41b8-b2e9-75a9aeeb017b/Ja2z677E9b.json
.lottie: https://lottie.host/70cdd9e4-7e68-4166-9769-4ea6e4412fd6/GOZKlPuo9N.lottie
Codepen: https://codepen.io/tayyari/pen/wvZyXRZ

This is how it's supposed to look

Consuming repo

What repo were you working in when this issue occurred?
dotlottie-web

...

Labels

• [] Add the Type: Bug label to this issue.

Overview

I've noticed that when going to another tab or another window (for a while), the animation starts to lag and skip frames (I'm using Mozilla Firefox). The lag (skipped frames) continues even when the animation loops.

Labels

• Add the Type: Bug label to this issue.

Overview

• I want to use dotLottie web player on a Nuxt 2 project. But it seems there is an issue with the file loader. I haven't found a solution for this case yet (Currently only topic related to Nuxt 3 is opened)
  Module parse failed: Unexpected token. You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
  

• My reproduce repo:
  Codesandbox

• I used node v20.11.1 and nuxt 2.15.7.

So I would like to know if dotLottie currently support Nuxt 2. Thank you!

Overview

I am testing an animation moving from @dotlottie/player-component to @lottiefiles/dotlottie-web. Animation link.

With @dotlottie/player-component it works flawlessly. However, when running the animation with @lottiefiles/dotlottie-web, some parts do not work. In my case, the "bike" animation at the end (which was created using the loopOut() command in AE), does not loop.

It would be useful to introduce a new feature in the dotLottie Viewer that allows users to list markers available and select specific marker for playback.

dotLottie-web package currently provides an API that enables the retrieval of all markers and the loading of a specific marker. To illustrate the usage of markers within dotLottie-web, this CodePen example serves as an excellent reference: https://codepen.io/lottiefiles/pen/RwOROKp.

Overview

The doc for the vue package mentions a getDotLottieInstance function but it is not in the component typing.

getDotLottieInstance is not defined, triggering TS issues and losing type.

I think that we should use defineExpose at this line

as explained in the Vue docs here

Consuming repo

dotlottie-vue

Labels

• Add the Type: Bug label to this issue.

overview

it seems like this repo is completely based on the canvas renderer, as it requires a canvas element to function properly. are you planning to integrate the svg renderer as well at some point?

type

• new feature
• changes to existing features

motivation

i prefer this repo over the player component, because it is not designed as a web component and does not encapsulate its functionality within a custom <dotlottie-player> element, which unfortunately creates multiple issues on my side with my bundler and code splitting.

so this new repo seems to be making all my dreams come true. however, some of my animations are being played back filling the whole viewport, which creates performance issues and low frame rates. the svg renderer would eliminate these issues.

labels

• Add the type: feature request label to this issue.

Overview

Hello. I was trying to implement animations on a site and noticed that dotlottie-web causes a huge CPU load. You can check it here: https://codepen.io/nauorama/full/LYvJOrZ. This doesn't happen with the @dotlottie/player-component library using the same animations. Can you help, please?

Overview

I am using @lottiefiles/dotlottie-react 0.3.1

import myLottie from '@/assets/myLottie.lottie?url'

<DotLottieReact
width={'600'}
height={'400'}
src={myLottie}
autoplay
loop
/>

Canvas width and height getting smaller when I change zoom level. and hits zero eventually.

• Add the Type: Bug label to this issue.

Overview

It seems currently not possible to add scroll interactivity to .lottie files integrated with dotlottie-web. In the previous player web-component (that points to dotlottie-web, see https://github.com/dotlottie/player-component/tree/master/packages/player-component) we were able to use the lottie-interactivity library (https://github.com/LottieFiles/lottie-interactivity) to create scroll-interactions.

Motivation

to create animated .lottie files with scrolling reactivity and while using the latest dotlottie-web library, as the .lottie files seem to be much more performant than the older .json/lottie-web or player-component integrations.

Overview

When including import '@dotlottie/react-player/dist/index.css'; in the application as described in the documentation, it adds some unscoped css which can interfere with application style, for example it adds the following style:

.error {
  display: flex;
  margin: auto;
  justify-content: center;
  height: 100%;
  align-items: center;
}

It's a very common class name, and using it unprefixed can cause unexpected errors in different places. In my specific case, the issue is with the margin: auto; part, but I have no guarantee it won't interfere with other class names too.
...

Consuming repo

What repo were you working in when this issue occurred?

I'm using the @dotlottie/react-player package.

Labels

• Add the Type: Bug label to this issue.

In the dotLottie viewer, the load time should only reflect the duration it takes to load the lottie or dotLottie data, excluding the network request's load time for the source file

Get RuntimeError: table index is out of bounds when trying to embed the attached .lottie (replace .zip with .lottie) file via dotlottie-react.

File: lush3n7n.zip

Description:
In the current implementation of the DotLottieReact component within the @lottiefiles/dotlottie-react library, there seems to be an inconsistency in the way paths are handled, causing confusion and potential errors for users.

Problem:
When attempting to utilize the DotLottieReact component in a Vite + React project, users are encountering issues related to incorrect path usage. Specifically, the component fails to render the Lottie animation when the src prop is assigned a relative path ("./animation.lottie"), resulting in a broken animation.

Failing Code:

import { DotLottieReact } from "@lottiefiles/dotlottie-react";

function App() {
  return <DotLottieReact src="./animation.lottie" loop autoplay />;
}

export default App;

Expected Behavior:
The DotLottieReact component should successfully render the Lottie animation when provided with a relative path to the animation file.

Working Code:

import { DotLottieReact } from "@lottiefiles/dotlottie-react";

function App() {
  return <DotLottieReact src="../src/animation.lottie" loop autoplay />;
}

export default App;

Explanation:
Upon investigation, it appears that the DotLottieReact component requires a precise path to the Lottie animation file in order to render it correctly. However, the documentation or error messages do not provide clear guidance on this requirement, leading to confusion among users.

Proposed Solution:
Documentation Improvement: Enhance the documentation of the @lottiefiles/dotlottie-react library to explicitly specify the correct path usage for the src prop, providing examples and explanations to guide users effectively.

Error Handling: Implement more informative error messages within the library that notify users when an incorrect path is provided to the DotLottieReact component, helping them identify and resolve issues more efficiently.

Additional Information:
Library Version: 0.5.1
Environment: Vite + React + JS (in Visual Studio Code)
Operating System: Windows 10

This issue seeks to improve the usability and reliability of the @lottiefiles/dotlottie-react library, ensuring a smoother experience for developers integrating Lottie animations into their Vite + React projects. Any assistance or clarification on this matter would be greatly appreciated. Thank you.

Overview

Hey,
so I've added a preloader to my shopify website and used the dotlottie animation. It's only shown once in a session and only on the main page.
Via HTML I preload the .lottie file and the animation plays, after the DOM Content has completely loaded, to ensure, the timer syncs with the animation.

My html:

<div id="loader">
<dotlottie-player background="transparent" id="lottie-loader" speed="1" style="width: 50%; height: 50%" direction="1" mode="normal" loop autoplay></dotlottie-player>
</div>

<link rel="preload" fetchpriority="high" href="https://lottie.host/a276f20a-2888-4dc0-a098-2edf62682b4c/WtaeCDO9ti.lottie" type="application/json">

My javascript

preloader.js

  const loader = document.getElementById("loader");
  $('#loader').hide();
}

$(document).ready(function() {
  if (document.cookie.indexOf("preloaderShown=true") === -1) {
      document.cookie = "preloaderShown=true; path=/";
    window.onload = function() {
      const player = document.querySelector('dotlottie-player');
    player.load('https://lottie.host/a276f20a-2888-4dc0-a098-2edf62682b4c/WtaeCDO9ti.lottie');
      setTimeout(function() {
      hidePreloader();
    }, 3100);
    };
    
The animation hides, after the preloader has completely loaded.

} else {
    // If the preloader has already been shown in this session, hide it immediately
    $('#loader').hide();
  }
});

The Problem

Sometimes the animation skips some frames and lags, especially on mobile devices. It doesn't matter if your connection is slow or fast, since the animation only loads after the page is completely loaded.

How it looks when it bugs:

How it should look like:

This is also reproduceable on desktop. Sometimes it lags, sometimes not. Hope some1 can help me.

Consuming repo

What repo were you working in when this issue occurred?

...

Labels

• Add the Type: Bug label to this issue.

Overview

This Animation don't has color, but it can works on player-component

animation page: https://lottiefiles.com/animations/gradient-loader-01-vC5xkkshyC

dotLottie file url: https://lottie.host/771777cf-ca38-4c6c-acb8-5fc2366c7790/qLVOgTwflt.lottie

codepen: https://codepen.io/trendymen/pen/XWQxRvP

Consuming repo

https://github.com/LottieFiles/dotlottie-web

Labels

• Add the Type: Bug label to this issue.

hello

adobe after effect movin and lottie json file can work here ?

as some image and text level dynamic template possible and convert to video ?

int his script possible or anyone can help us how to possible make dynamic tempalte so based on user we can process to mp4

currently in adobe we getting png with base64 raw format and other text how to modify dont know

Overview

Using @lottiefiles/dotlottie-web, calling play() after setFrame() resets the currentFrame property and restarts the animation from the start. This does not match the documentation for play(): Begins playback from the current animation position.

import { DotLottie } from "https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web/+esm";
(() => {
// Get lottie player and set the animation to play from half way through when finished a loop
const canvas = document.getElementById('hero-lottie');
const player = new DotLottie({
autoplay: true,
loop: false,
canvas: canvas,
speed: 1,
src: canvas.getAttribute('data-src'),
});
// Get loopFrom attribute
const loopFrom = parseInt(canvas.getAttribute('loopFrom'));
player.addEventListener('complete', () => {
    player.setFrame(loopFrom);
    player.play(); // Here the animation resets to the frame 0
});
})();

A workaround is to call player.setFrame() after play().