0

Hi I'm a complete beginner so I'm sorry for my messy code (I also apologize for my english in advance).

I'm currently trying to code a website for myself and I made a blender animation which I edited with after effects and then exported with bodymovin. I don't know if I linked my script.js wrong or something else but I followed tons of videos and nothing seems to work because it just won't show up on my website or I get errors in my script.js . I hope I'm posting my code here correctly.

HTML:

<div id="cloud"></div>
<script src="lottie.js"></script>
<script src="script.js"></script>

Script.js

var animation = bodymovin.loadAnimation({
    container: document.getElementById('cloud')
    renderer: 'svg',
    loop: true
    autoplay: true,
    path: 'Cloud_1.json' 
})

Thanks in advance!

EDIT:

My animation is a moving cloud. I use Brackets but It's nowhere to be seen on the website.

I currently have an error at

`renderer: 'svg',

And these are all the errors that I've gotten:

'bodymovin' was used before it was defined. var animation = bodymovin.loadAnimation({ 3
Expected 'renderer' at column 1, not column 5. renderer: 'svg', 3
Expected '}' to match '{' from line 1 and instead saw 'renderer'. renderer: 'svg', 3
Expected ')' to match '(' from line 1 and instead saw ':'. renderer: 'svg', 3
Expected ';' and instead saw 'svg'. renderer: 'svg', 3
Expected 'svg' at column 1, not column 15. renderer: 'svg', 3
Expected an assignment or function call and instead saw an expression. renderer: 'svg', 3
Expected ';' and instead saw ','. renderer: 'svg', 3
Expected ',' at column 1, not column 20. renderer: 'svg', 3
Expected an identifier and instead saw ','. renderer: 'svg', 3
Stopping. (42% scanned). renderer: 'svg',

zazaza
  • 1
  • 2
  • You don't have to apologise for "messy code" as long as it's readable/understandable or "bad English". That doesn't matter. What's more important is to add all **relevant information** regarding your question. For example, what "doesn't seem to work" exactly? What *errors* are you getting? How are you using that code in your program? Also note that JavaScript is not Java. I'll correct that tag for you. – QBrute Feb 21 '22 at 11:27
  • `'bodymovin' was used before it was defined.` seems fairly straight forward. I don't see it defined in the code you've shared. Why do you expect it to be? – Quentin Feb 21 '22 at 11:53
  • Then I hope its readable and understandable :) and thanks I guess I confused those two. I edited my post because I can't comment it here. – zazaza Feb 21 '22 at 11:53
  • How do I define it? – zazaza Feb 21 '22 at 11:54

1 Answers1

1

Add the Lottie CDN to the header of your file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.8.1/lottie.min.js" integrity="sha512-V1YyTKZJrzJNhcKthpNAaohFXBnu5K9j7Qiz6gv1knFuf13TW/3vpgVVhJu9fvbdW8lb5J6czIhD4fWK2iHKXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

And replace

var animation = bodymovin.loadAnimation({
    container: document.getElementById('cloud')
    renderer: 'svg',
    loop: true
    autoplay: true,
    path: 'Cloud_1.json' 
})

By

var animation = lottie.loadAnimation({
    container: document.getElementById('cloud')
    renderer: 'svg',
    loop: true
    autoplay: true,
    path: 'Cloud_1.json' 
})
sam-osb
  • 141
  • 3