lottiefiles / jlottie Goto Github PK

Hi jLottie,

I really like the performance-side of this and wonder if you are going to support dot.lottie file-format, which does a great deal at compressing lottie-files up to 90%. That would make this version of lottie my goto version if I need only a subset of lottie.

All shapes are been repositioned at the player. Can you tell me why this is happening?

Link: https://lottiefiles.github.io/jlottie/

Steps to reproduce:

1. Open the above link
2. Enter: https://assets5.lottiefiles.com/packages/lf20_ykcdxg7n.json

Expected: loads animation as https://lottiefiles.com/share/ykcdxg7n
Actual: https://drive.google.com/file/d/1yY0rrD3UitaC7m-7_0Bkq7BtNTLwgIhl/view?usp=sharing

Below is the component I wrote using jlottie, and it's doing great, but problem shows up when destroying at using useEffect return method.

import { useEffect, useRef } from 'react';
import * as jlottie from '@lottiefiles/jlottie';

const JlottiePlayer = ({ animationData, style }) => {
  const jlottieRef = useRef();

  useEffect(() => {
    const jlottieAnimation = jlottie.loadAnimation({
      container: jlottieRef.current,
      loop: true,
      autoplay: true,
      animationData: JSON.stringify(animationData),
    });

    return () => {
      jlottieAnimation.destroy();
    };
  }, [animationData]);

  return <div ref={jlottieRef} style={style} />;
};

export default JlottiePlayer;

seems like jlottie keep running after calling destroy method, and this warning also shows when I pass id into the method.

if you could point out the problem that would be great :) excited with this new player

I'd like to explore using this new player in a React codebase.

Looking through the issues on the lottie-web player repo, I found this suggestion for creating a react wrapper: https://gist.github.com/olso/0d2aeff411092627a3fdba6fb6dac406

Will that approach work with jlottie? The API seems to be identical, so I'm hoping yes.

Thanks in advance! Excited to use the new and improved player 😎

Following your example code, I can’t seem to prevent the animations from autoplaying.
Stripped down example:

<script>
let lottieIcon = document.getElementById("my-animation");
jlottie.loadAnimation({
  container: lottieIcon,
  loop: false,
  autoplay: false, // Set to false but still autoplays, am I missing something?
  path: "https://assets6.lottiefiles.com/private_files/lf30_8walmmtg.json" });
</script>    

Functioning example of issue: https://codepen.io/samwalker/pen/0608d732e98db09451f355161c3460be?editors=1010
Output: https://cdpn.io/samwalker/debug/0608d732e98db09451f355161c3460be

Hi 👋

We want to use jLottie in our Next.js(React with Typescript) project.
But I cannot find type definition of jLottie project.

Is there any type definition of jLottie?

Hi 👋,

Setting the yarn version and node version here https://github.com/LottieFiles/jlottie/blob/main/package.json#L11 forces people to use yarn 2 and at least node 14 (otherwise it fails doing an npm install which is suggested https://github.com/LottieFiles/jlottie/tree/37f161e2a9ebf12994166e13c60a5bb940783d01#in-javascript-or-typescript). Is there any reason for that? Ideally I would drop/remove both from the package.json as not every project might be using node 14 and a lot of people can be using npm instead of yarn.

What do you guys think? 😀

Thanks!

Hello!

There is a type error on some of animations and some don't run correctly (mostly spinners and loaders). It can be reproduced here https://lottiefiles.github.io/jlottie/

TypeError: Cannot read properties of undefined (reading 'x'):

1. https://assets3.lottiefiles.com/packages/lf20_wls5tgbc.json - preview run
2. https://assets2.lottiefiles.com/packages/lf20_mc18rdvr.json - preview run

Incorrect animation run

1. https://assets1.lottiefiles.com/packages/lf20_l11veb0d.json - preview run
2. https://assets1.lottiefiles.com/packages/lf20_tDul7a.json - preview run

steps:

1. So we show a jlottie "hearts" animation (duration 1.5s) when user presses on a button ("like")
2. now when the user switches to other tab/page exactly before the animation is completed (before the duration 1.5s)
3. and again comes back to the same tab/page where animation is implemented
4. presses the same ("like") button gain which activates the animation,
5. now the ("hearts") animation is stuck in one frame.

also bonus(rare issue /low poriority) : animation gets stuck/slow out of nowhere

Keywords : ReactJS ,Microfrontend, TWA/PWA , navigation , jlottie ,

Hey folks!
I'm trying to understand what feature https://assets5.lottiefiles.com/private_files/lf30_deoivojd.json is using that is causing it to not only not load correctly, but throw an error trying to load it on the console and blow up.

I know a number of folks run into this with jLottie having an incomplete feature set currently, including our motion designers. Having a debug mode that can look at a json asset, and print out to the console or some other mechanism any features in use that are not supported would be super helpful. In this instance, I am assuming the above asset is using Merge Paths, but without a long cycle of reaching out to our designer and having them look through the After Effects file, it's a challenge to understand why something doesn't work.

If a feature existed that even though it's not implemented, would report the features in use that are not supported, I think that would be super helpful not just to engineers, but also motion designers trying to make their art work with jLottie.

Potential Output:

The asset could not be fully loaded as it makes use of the following currently unsupported features:
  - Merge Paths
  - Expressions

Some of these issues can be worked around by following the steps at http://some_url_with_tips.

Current Output:

jlottie.js:1266 Error: <rect> attribute width: Expected length, "[object Object]".
I @ jlottie.js:1266
jlottie.js:1267 Error: <rect> attribute height: Expected length, "[object Object]".
I @ jlottie.js:1267
jlottie.js:1269 Error: <rect> attribute x: Expected length, "NaN".
I @ jlottie.js:1269
jlottie.js:1270 Error: <rect> attribute y: Expected length, "NaN".
I @ jlottie.js:1270
jlottie.js:1117 Uncaught TypeError: Cannot set properties of undefined (setting '0')
    at S (jlottie.js:1117)
    at j (jlottie.js:1199)
    at K (jlottie.js:2640)
    at K (jlottie.js:2591)
    at K (jlottie.js:2591)
    at U (jlottie.js:2863)
    at XMLHttpRequest.u.onreadystatechange (jlottie.js:2959)

Hello LottieFiles,

In the documentation, to install it shows the directory to fetch has a Capital L, which is not allowed by NPM. This will result in a 404

Currently animationData doesn't work with loadAnimation, it will be a great feature to have in the library.

IMP: I noticed the above line in the codebase, and would just want to confirm that if animationData is passed as a JavaScript Object, the length attribute doesn't exist on it, hence changing it to Object.keys(obj.animationData).length > 0 should work better.

Link: https://lottiefiles.github.io/jlottie/

Steps to reproduce:

1. Open above link
2. Enter any lottie animation JSON url

Expected: loads animation from JSON
Actual: fails for all animation JSONs