Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

103
Views
json animation won't show up on my website?

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',

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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' 
})
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!