Open jbellmont-phntm opened 2 years ago
hi, have you tried using the lottie player from the cdn? At least to verifiy it's not a minification / obfuscation issue
Having the same issue. Have you made any progress with this issue @jbellmont-phntm ? Such a strange behaviour, as everything works perfectly in lowers.
@therealsylaucoin do you have a link to check? From what I've seen so far, some bundlers either remove unused functions that are actually needed on expressions, or minifiers rename those methods.
Having the same issue. Have you made any progress with this issue @jbellmont-phntm ? Such a strange behaviour, as everything works perfectly in lowers.
Apologies for the late reply! I never found a solution.
And now another colleague is having the same issue - it working on local, but after build and deploy, it's not appearing.
Would be great if anyone else has figured out a solution.
This is happening for me. The animation works completely fine locally, it does not work on the dev site. If you inspect the elements it seems to be animating but all the assets aren't sized properly and are invisible. The animation includes images and I thought including the images in the json would fix it but it doesn't. There are zero error messages indicating a problem.
@Dylan-Wells-at-LION can you share a link to check the issue?
@bodymovin It's for a client and behind a password so I can't post a link/login info to the dev site here. I tested the data.json on lottiefiles.com and although it looked a little incorrect it was visible. Sorry if that's not very helpful but is there any other info I can get to you?
@Dylan-Wells-at-LION this is usually related to CSP or bundlers, but without an example it's hard to tell. Any chance you can build a simple example and provide a link?
@bodymovin I created a stripped down version for you to look at, it has the same issues as the real one. Here is what it should look like
Here is the link:
[removed]
@bodymovin
Local:
Online:
@bodymovin I created another version with just shapes instead of images on the same site and it works fine so I'm guessing it has something to do with how images are handled.
@bodymovin The image are rendered and sized correctly when I use the canvas
or svg
renderer, the issue happens when a use the html
renderer. The animation is broken for other reasons but it isn't completely blank.
@Dylan-Wells-at-LION can you try calling .resize()
on the animation instance once the window has loaded? And if it doesn't work, try to load the animation after everything is loaded?
I know it's not a solution, but it can help identify the problem
@Dylan-Wells-at-LION I think I found the issue. There is a global css selector applied to all image elements at the end of this file: https://lottietesting.wpengine.com/wp-includes/css/dist/block-library/style.min.css?ver=5.9.2 html :where(img) { height: auto; max-width: 100%; } that is affecting all img elements of the page, so the images don't behave as they should. I suggest that you remove it or change it for a more specific one so it doesn't affect the lottie imgs
@bodymovin Wow... Thanks for finding the issue even if it had nothing to do with Lottie.
Im having the same issue.
prod
and dev
html
or svg
mode, it doesn't work in prod
, but it works in dev
{
"react": "18.2.0",
"next": "13.0.3",
"lottie-web": "^5.9.6",
}
Was having the same issue with next.js. I found a work around in this post: https://github.com/vercel/next.js/issues/42801
Change swcMinify to false in next.config.js:
// next.config.js
module.exports = {
swcMinify: false,
}
This worked for Nextjs!! thanks
I have the same problem with a javascript server using vite Svelte.
"devDependencies": { "@sveltejs/vite-plugin-svelte": "^1.1.0", "svelte": "^3.52.0", "tailwindcss": "^3.3.2", "vite": "^3.2.3" }
Working towards a solution.
If you are using Vite and Svelte and it does not render in production it may be that you are not using the Svelte library for this files.
"@lottiefiles/svelte-lottie-player": "^0.3.0"
The solution to this problem is to use it in the correct way. I share the existing solution in another issue. If you follow the step by step implementation of your lottie component as described below it will render in production without problems:
Currently, I am using swcMinify: true,
in my next config.
import Lottie from 'lottie-web';
import AnimationJson1 from '@/libs/lottie/animation-1.json';
const Component = () => { React.useEffect(() => { const lottieInstance = Lottie.loadAnimation({ container: document.getElementById('lottie-card-section-1') as HTMLElement, autoplay: true, loop: true, renderer: 'svg', animationData: AnimationJson1, rendererSettings: { className: svgStyles.svgSizeFix, }, }); lottieInstance.setSpeed(0.5); return () => { lottieInstance.destroy(); }; }, []);
return (
); }
Hope that helps anybody who still want to use **swcMinify** option in nextjs and in general.
`yarn add -S lottie-web`
- I also have another **react-vite** project, and there I'm using `"@lottiefiles/react-lottie-player": "^3.5.3",`
- Here is a small snippet from that project.
```ts
// Supports tailwind Dark mode `class`
import { Player } from '@lottiefiles/react-lottie-player';
const Component = () => (
<div className="relative">
<Player
src="/animation-1.json"
background="transparent"
speed={1}
controls={false}
loop
autoplay
className="h-52 md:h-60 lg:h-80 2xl:h-96 filter brightness-100 dark:brightness-90
transition-all duration-300 ease-out"
/>
</div>
);
Cheers! if I helped you in any way 🍻
I am using vite and three.js, after putting the Lottie json file into the public/images folder it solved the problem.
Tell us about your environment
Mac OS Big Sur, v11.2. Macbook Pro (13inc, 2020)
Running an Angular app, using the following libraries: "lottie-web": "^5.7.3", "ngx-lottie": "^6.3.0",
Browser and Browser Version: Tested on:
Chrome Version 94.0.4606.61 (Official Build) (x86_64)
Safari Version 14.0.3 (16610.4.3.1.4)
After Effects Version: 2021
What did you do? Please explain the steps you took before you encountered the problem.
What did you expect to happen?
What actually happened? Please include as much relevant detail as possible.
Please provide a download link to the After Effects file that demonstrates the problem.
Are there any reasons why this might be happening? I am convinced it's due to the exporting of the JSON file, as I've done as much as I can on the dev side to fix the potential issue.