Lottie File Upload to Homepage

[EnesCinar]

Hi all!

I wonder about how you manage and add your lottie files into your website pages. Rather than using GIF(which affects the page speed badly), we want to use lottie file. Without using any development support, I want to know that how you can utilize this in your HubSpot CMS.

Do we need to use the source code section to add that? Or do you have another trick?

The lottie example that I meant, you can see the first section of the homepage on  this website : https://reposify.com/ 

Thank you,

Enes

[DNebojsa]

Hi, we are using Lottie File within HubSpot website too, but our problem is that the animation looks good until we put it on the website. From then on the image is not sharp anymore. 

https://www.loom.com/share/09c9a84a155743a88aaad3e022f0d0aa?sid=2ba6313c-dd4a-4d21-b2a6-08498a69f1e7

[LNguyễn8]

Hi  EnesCinar

I guess you did this successfully. Your site looks very nice!

I am just wondering if your site is built on WordPress or on Hubspot? 

[EnesCinar]

Hi,

The website is built on HubSpot 🙂 

[txpproduct]

Works for me - thank you, Mike!

[mike-ward · Accepted solution]

Hi @EnesCinar ,

Yes, I would definitely start by trying the HTML Module - go to the marketplace to install it if it's not already there (it's free, made by HubSpot directly). Then you can easily add a container to the page for your animation, e.g. like this:

<div id="lottie-container"></div>

Then you'll need to load and run the Lottie JS file; here is an example. To test this, you can just go to page settings and under Advanced Options, put this in the site Footer:

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.4/lottie.min.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    bodymovin.loadAnimation({
  // animationData: { /* ... */ },
  container: document.getElementById('lottie-container'), // required
  path: 'https://maxst.icons8.com/vue-static/landings/animated-icons/icons/pause/pause.json', // required
  renderer: 'svg', // required
  loop: true, // optional
  autoplay: true, // optional
  name: "Demo Animation", // optional
})
});
</script>

The best way to do this would actually be with a custom module that would basically just take the URL of the .JSON file, and expose some of those options (like loop, autoplay etc...) - and the module would handle loading the JS lottie dependency etc... but that would require a little more knowledge on creating modules.

This should let you quickly add a Lottie JSON file to a page though.

Let me know if that helped!

Cheers,

Mike

---

Did I answer your question? If your question is answered, please mark it as a solution. If you need more help, hit that big orange 'Reply' button!

[HelpfulHero]

Mike, thanks so much for this AWESOME solution.  Got it working and this makes the whole experience of simply adding in the lottie URL so much easier. 

[DHoe]

Hi, this looks like a good solution for me. However, I cannot find any HTML module - neither in the Hubspot marketplace, nore in the collection of our installed modules. Does this depend on the theme we're using? Any hints appreciated 🙂

[HelpfulHero]

You'll want to create your own Custom Module which is going to be the easiest way to do this.