Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Animation parts render incorrectly after build

See original GitHub issue

Tell us about your environment I’m building a website with SvelteKit (latest version, but still in beta), using an adapter for Vercel in the build process. Here are my dependencies just in case:

"@aws-sdk/client-sesv2": "^3.22.0",
"@sveltejs/adapter-vercel": "^1.0.0-next.26",
"@sveltejs/kit": "next",
"@types/tailwindcss": "^2.2.1",
"@typescript-eslint/eslint-plugin": "^4.19.0",
"@typescript-eslint/parser": "^4.19.0",
"autoprefixer": "^10.2.5",
"aws-sdk": "^2.947.0",
"eslint": "^7.22.0",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-svelte3": "^3.2.0",
"lottie-web": "^5.7.12",
"nodemailer": "^6.6.3",
"postcss": "^8.2.15",
"prettier": "~2.2.1",
"prettier-plugin-svelte": "^2.2.0",
"smoothscroll-polyfill": "^0.4.4",
"svelte": "^3.34.0",
"svelte-preprocess": "^4.0.0",
"tailwindcss": "^2.1.2",
"tslib": "^2.0.0",
"typescript": "^4.0.0"

Browser and Browser Version: Tested on Google Chrome 91 and Microsoft Edge 92.
After Effects Version: -
What did you do? Please explain the steps you took before you encountered the problem. I’ve loaded a Lottie JSON animation like so:

lottie.loadAnimation({
    container: animationContainer,
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: '/images/welcome-anim.json',
    name: 'welcome-animation'
})

(A link to the animation: https://assets1.lottiefiles.com/packages/lf20_pkc4qrpb.json)

What did you expect to happen? In development it loaded as expected, but after building and shipping, part of the animation shifted around on the live website.
What actually happened? Please include as much relevant detail as possible. The arm part of the guy in the animation is placed incorrectly after building out the project.

Here are screenshots before and after the build process:

In development:
After build:

Issue Analytics

State:
Created 2 years ago
Comments:10

Top GitHub Comments

2reactions

oliver-lehnercommented, Oct 14, 2021

Thank you! The workaround works, it’s even safe to enable minification. This is the modified svelte.config.js.

1reaction

bodymovincommented, Aug 1, 2021

this usually is related to code minifiers messing up with the lottie player library. In particular the expressions module. Can you add an error listener to the animation instance? It probably will log the error. These are some other similar issues that can help. https://github.com/airbnb/lottie-web/issues/2346 https://github.com/airbnb/lottie-web/issues/1120