Elevate Your HubSpot Site with LottieFiles Animations

Vishnu Sasidharan

4 mins

May 27, 2025

Lottie and HubSpot are both built for momentum - until you try using them together.

Lottie gives designers and developers a way to ship rich, lightweight animations without bloated files or dev-heavy workarounds. It’s fast, expressive, and scales beautifully across platforms.

Note: The animations above and below this text block are LottieFiles!

HubSpot does something similar for marketers. CRM, CMS, email, automation, analytics, lead management - all under one roof, no engineering degree required. It's a clean, efficient, and powerful tool that also lets you build websites with just drag and drop.

Each solves a different kind of chaos.

Lottie makes motion easy. HubSpot makes operations make sense.

But try combining the two? Suddenly, things slow down.

Since HubSpot provides no native support, adding a Lottie animation to HubSpot means opening the Design Manager, hand-coding a module, and hoping it renders right. Want to control speed, loop, hover effects, or playback direction? That’s more dev time. More QA. More “is this even worth it?”

The tools think alike, but they don’t work alike.

Blue background - White text that reads "Add LottieFiles" to HubSpot. And an infographic that displays the advantages of B-Moat's LottiePlayer plugin for HubSpot.

If you're using HubSpot, chances are you’ve already opted into clarity over chaos.
You chose an ecosystem that’s clean, data-rich, and built to scale.

And yeah - maybe you gave up some of the fancier no-code page builders.
That trade-off made sense.

But scrapping animation altogether? That shouldn’t be part of the deal.

.lottie isn’t just a newer format - it’s a smarter one. Designed for scalable, lightweight motion, .lottie files reduce file size without compromising quality. That means faster load times, smoother animations, and a noticeable boost in performance benchmarks - especially in tools like Lighthouse, which measures real-world metrics like speed, interactivity, and visual stability.

We can fix that with the LottiePlayer for JSON and DotLottie Files.

We’ve built native support for both .lottie and .json directly into the plugin - no wrappers, no additional setup. As of now, we're the only HubSpot plugin offering this out of the box. Others may follow soon (and they should), but our goal has always been to help teams move faster and perform better without the usual friction.

It fills a small but annoying gap between how you design and how you publish.

Because great tools should accelerate your work - not slow it down at the finish line.

How to Use the LottiePlayer Plugin

This plugin was built to remove complexity, not add it. Here’s how to get your animation live in five steps - no code, no chaos.

1. Install the Plugin

Head to the HubSpot App Marketplace and search for “LottiePlayer for JSON and DotLottie Files.”

A screengrab of the page displaying B-Moat's LottiePlayer Plugin for HubSpot on the HubSpot App Store.

Click Install, connect your HubSpot account, and you’re in.

The module automatically lives in your HubSpot account to use in as many pages of your project or in as many projects as you want.

No long setup. No dev calls. Just install and go.

2. Use the plugin

Open the project that you want to add Lottie animations to, head to the sidebar on the left and find the LottiePlayer for JSON button. You can then drag and drop into the section of your website where you wish to add your Lottie animation.

3. Upload the animation

There are two ways to upload the Lottie files onto the plugin, you can upload the file (.json or .lottie) from your system or paste a CDN link into the interface and let it do the heavy lifting.

A digital screenshot of a content management interface in HubSpot, showing a LottiePlayer module developed by B-Moat.com. The panel includes options to add smart rules, upload a Lottie file from either an external link or a file upload, and a note indicating that the animation may not be visible while editing the page.

Choose exactly how you want the animation to play:

On page load
On hover
On click
On scroll

You can also tweak direction (forward or reverse), speed, and looping.
No guesswork- just precise control in a friendly UI.

Instructional graphic titled 'How to use' explaining the features of a Lottie animation module. It is divided into two sections: 'Content Tab' and 'Styles Tab.' The Content Tab covers settings like animation file type, play on hover, loop, animation speed, playback direction, width and height, and fallback image. The Styles Tab includes alignment, border radius, and background color settings. Each feature is described with a brief paragraph and accompanied by a blue checkmark icon.

Check the animation right in HubSpot’s preview mode.
Looks good? Hit publish. You’re done.

Want to see it in action? Watch the full walkthrough on YouTube.

What You Save (Besides 8+ Hours)

Let’s break it down:

No building custom modules from scratch
No fiddling with custom JS
No ongoing maintenance is required on your end, the app developer will handle all updates required.

You’re saving 8–9 hours per animation - not counting the edge cases (like when reverse playback crashes at 2x speed... just for fun).

That time? It goes back to what actually matters:
Better pages. Faster launches. Less frustration.

More time doing the work that moves the needle - not patching the part that shouldn't be broken in the first place.

Let’s be clear, this doesn’t add anything new. It just removes what’s been getting in your way.

→ Install the plugin. Watch the demo. Get your time back.

And if you'd like customised animations for your site, you can book a call with us.