Lottie-web: Struggling to get the Script to run in the browser :(

[HBVIZ]

I am having trouble getting the animation to show in Chrome

### HTML -

<h1>:(</h1>

css -

body{
background-color:rgb(7, 7, 7);
margin: 0px;
height: 100%;
overflow: hidden;
}

lottie{

background-color:rgb(17, 14, 14);
width:100%;
height:100%;
display:block;
overflow: hidden;
transform: translate3d(0,0,0);
text-align: center;
opacity: 1;

}

h1 {
color: aqua;
font-family: sans-serif;
}

I have tried a few variations and non seem to have worked for me! i am new to writing these languages although just to get my animation to display i seemed to have followed all the steps i can find point to point.

I do aim to make some animated buttons implementing Sass/scss once i get the basics

Hopefully someone can help me out here as im really stuck :(

[bodymovin]

hi, do you have a link with the implementation to check?
There might be several reasons why it is not working.

[mrocchi]

@bodymovin I'm having the same error, and have tried different ways of export. But even if the json runs in Lottie in doesn't run in the browser.

Here's the link to one.

https://lottiefiles.com/share/FVbxbi

[Inventsable]

Hi guys. Just to clarify do you mean that when you use Inspect on your pages, that the element defined as the Lottie instance has no container or contents, or does it have contents which are not displaying? If not displaying, does it have both width and height dimensions?

One common issue I run into at the beginning is noticing that my SVG root has a height but no width or vice versa, in which case simple CSS at low specificity on the tag itself can solve this:

svg {
    width: 100%;
}

[mrocchi]

@Inventsable, after I exported the json my devs told me that it doesn't show anything. Basically, it's a blank screen.

I'm using this tool to test the jsons and doesn't load anything.

https://nicolasjengler.github.io/bodymovins-json-tester/dist/

[Inventsable]

@mrocchi, that website doesn't work for any Lottie file -- mine or your own:

Have you gotten any file to display with it?

Can you provide your AEP or the files? If the link earlier was the file in question it clearly does work if it's being played by LottieFiles, but I'm not able to do much with only verbal description -- unless you tell me what the contents of the Lottie instance HTML element are via Inspect or DevTools or define the error being thrown in the console, I have no way of knowing if the problem is on the side of Lottie or the way you're implementing them in the browser (missing dimensions, etc.)

[Inventsable]

@mrocchi See here in this repl.it (press run to view):

Uncaught TypeError: Cannot read property '0' of undefined
    at l.f [as interpolateValue] (lottie.min.js:1)
    at l.c (lottie.min.js:1)
    at l.u [as getValue] (lottie.min.js:1)
    at GradientProperty.getValue (lottie.min.js:1)
    at new GradientProperty (lottie.min.js:1)
    at SVGGradientStrokeStyleData.SVGGradientFillStyleData.initGradientData (lottie.min.js:1)
    at new SVGGradientStrokeStyleData (lottie.min.js:1)
    at SVGShapeElement.createStyleElement (lottie.min.js:1)
    at SVGShapeElement.searchShapes (lottie.min.js:1)
    at SVGShapeElement.searchShapes (lottie.min.js:1)

Your error is being thrown by using an older version of Lottie. In the case of this repl.it, it was initially running the CDN minified version 5.4.3, when updating to 5.5.3 it does work. In the instance of the website you linked, I suspect they're also using an outdated version which wouldn't support Gradients.

[Inventsable]

Just as a followup, the repository to that website is here and it hard codes a version of lottie that has not been updated for over two years. Since Lottie has progressed quite a bit since then, you won't be able to play any file on that site which isn't two years old! I'd recommend not using that one, and if your devs are using a CDN instead of npm to draw the most recent automatically, they need to use the same version or above as your file: 5.5.1

[Inventsable]

@HBVIZ I bet you have the same issue since you're not using Node. Try replacing this line in your code:

<script type="text/javascript" src="lottie.js">

With this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.3/lottie.min.js"></script>

[mrocchi]

@Inventsable Thank you for the help. I can share the AE file I'm having problems with.

I'm using the version 5.5.5 of Bodymovin.

What did you in order to make that json runs?

[mrocchi]

This is my AE with the animations. And what I do is simply use Bodymovin (5.5.5) and export the animations. :/

Levels.aep.zip

[mrocchi]

I'm really sorry @Inventsable, and I might sound dumb but I have low coding skills. But, how can I update the CDN minified version of bodymovin?

[Inventsable]

Hi @mrocchi ,

I updated the CDN in my own file, seen in index.html:

    <!-- Outdated lottie below was throwing the error -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.3/lottie.min.js"></script> -->

    <!-- But it works fine with the latest: -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.3/lottie.min.js"></script>

By grabbing the most recent CDN link from the README. Just a note, the v parameter of the JSON you supplied earlier is at 5.5.1, I exported from my own 5.5.2 panel and updated the repl.it with one of the icons from your AEP. Your files are fine, the problem is with your devs using an old version of lottie. Tell them to get off your back and solve their own problems 😉

In case repl.it seems intimidating and you don't understand how to see the results, you press the big "Run" button at the top of the page. To update your <script>, paste this line in the <head> section of your HTML (or wherever else you're grabbing the lottie.min.js, ignore it and use this instead, see the index.html on the repl.it):

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.3/lottie.min.js"></script>

[mrocchi]

Thank you @Inventsable !! You just saved my life

[HBVIZ]

hi, do you have a link with the implementation to check?
There might be several reasons why it is not working.

Hey @bodymovin !

Thanks so much for the super fast reply i am really new to this it seems to be working however the images that make up the .Ae file are not syncing with the animation what would be the protocol for attaching the images file created by the Bodymovin plugin with the code?

My second question and probably a more silly one. What would be the best way to present to you my implementation? I am new to Git and i see people using so many different ways to present there projects?

• would it be best by creating a Git repository?

@Inventsable Thankyou!! i believe that was what the problem was.
@mrocchi Awsome man - :)

[Inventsable]

@HBVIZ very cool! Glad to hear it displays correctly. Can we close this issue? I'm not sure what the problem would be for your images, but for the sake of keeping problems in places others can easily find them (issue reports with the most relevant titles) I feel it'd be best to move it to a separate issue if need be.

[HBVIZ]

Yeah sure if you feel that's what is best thanks for the support!

On Wed, 19 Jun 2019, 07:32 Tom Scharstein, [e-mail] wrote:

@HBVIZ https://github.com/HBVIZ very cool! Glad to hear it displays
correctly. Can we close this issue? I'm not sure what the problem would be
for your images, but for the sake of keeping problems in places others can
easily find them (issue reports with the most relevant titles) I feel it'd
be best to move it to a separate issue if need be.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/airbnb/lottie-web/issues/1679?email_source=notifications&email_token=AL5JIB3ZC7772CTTT3MVZDDP3HHILA5CNFSM4HYYWE32YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODYA22VA#issuecomment-503426388,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AL5JIB2X4C64YHMWQ7TDN2TP3HHILANCNFSM4HYYWE3Q
.