lottiefiles / jlottie Goto Github PK
View Code? Open in Web Editor NEWA small-footprint lottie player in Javascript
Home Page: https://lottiefiles.github.io/jlottie/
License: MIT License
A small-footprint lottie player in Javascript
Home Page: https://lottiefiles.github.io/jlottie/
License: MIT License
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'):
Incorrect animation run
steps:
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.
Line 3056 in 2333943
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:
Expected: loads animation from JSON
Actual: fails for all animation JSONs
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.