lottiefiles / dotlottie-web Goto Github PK

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!

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

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

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.

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

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

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.