Javascript error, please help

JavaScript
1

Hi!

I have trouble with my js code and i can’t fix it.
I watched a tutorial from youtube how to get after effects file to web pages and tried to get my animation work but in .js file i got errors.

my code:

var animation = bodymovin.loadAnimation({
    container: document.getElementById('anim'),
    rederer: 'svg',
    loop: true,
    autoplay: true,
    path: 'data.json'
});

Errors:

  1. bodymovin was used before it was defined
  2. ‘Animation’ is assigned a value but never used
  3. ‘bodymovin’ is not defined
  4. ‘document’ is not defined

I would be very grateful if someone can help me :slight_smile:

2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

1 Like
3

@boy94

  1. You have a spelling mistake in your function. It’s renderer not rederer according to the docs

Error 1 can be caused if the script tag to load bodymovin onto your website is below the script tag of the JS file where you are trying to use it.

In the HTML markup for your website the script tags needs to be in the correct order. Script tags in the head of your HTML are loaded before script tags that are added to the bottom of the body tag. bodymovin will need to be your first script tag and then your own js file needs to be loaded after it and not before it.

My overall suggestion would be to create a minimum version of your website in codepen.io or codesandbox.io that replicates your issue. It will it make it easier of us to help you.

4

Hi! thank you for answering. Im new here so i can’t send links but below is my simply html code

<!DOCKTYPE HTML>
<html lang="eng">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-compatible" content="ie=edge">
        <title>Bodymovin</title>
</head>
    <body>
        <div id="anim"></div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.0/lottie_html.js"></script>
        <script src="script.js"></script>
            
    </body>
</html>

Then i have data.json file where is my animation. I don’t know how to edit my code to get it works. Thank you for helping :slight_smile:

5

@boi94

That is just your HTML file. That only shows us that you are loading the scripts in the correct order. I would still suggest you use something like https://codesandbox.io to recreate a minimal version of the website that shows what you are trying to do and that allows us to replicate the error messages. That is the easiest way for someone here to assist you.

6

I actually created my minimal version in codesandbox but since i can’t send a link here it wasn’t helpful. I have only basic html and js code that i have already posted here. I have only code about animation that i need to get work. However, do you have any idea how you would get access to my codesandbox? Or what should i do?

Thanks for helping!

7

Post the link as codesandbox dot 3fd32fds. We can then copy and paste it and replace the word dot with an actual ..

8

codesandbox dot io/embed/n9zv8j7yx0?fontsize=14

Here is link to my codesandbox.

9

You don’t have a bodymovin script tag in the HTML file. You need to include it to fix the bodymovin is not defined error.

<body>
	<div id="app"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.0/lottie_html.js"></script>
	<script src="src/index.js"></script>
</body>
10

Hi,

I have checked your code and there are few possibilities that can cause an issue:

  1. Please double check if ‘id’ of your wrapper element is identical to that you have used in script.js
  2. data.json doesn’t contain any information (your exported animation)
  3. Forget to load lottie using cdn or locally

Example:
in html -> <div id='container'></div>

in js:

var animatedData = {
container: document.getElementById('container'),
path: 'data.json'
};

var anim = bodymovin.loadAnimation(animatedData);

here is my html:

	<!-- Container of the animation -->
	<div id='container'></div>
	<!-- Scripts -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.0/lottie_html.js"></script>
	<script src="./scripts/bodymovin.js"></script>
</body>```