How To Add Lottie Animations to a Squarespace Website (LottieFiles)
No animation skills required.
If you’ve ever visited apps like Duolingo or Headspace, you’ve probably noticed how fun and engaging their animated elements are. They’re often created using something called Lottie files — and you can use them on your Squarespace website too.
Before we get into it, if you’d prefer to watch and learn then click the video below!
How to add Lottie animations to a Squarespace website
-
[00:00:00.00] - Speaker 1
Hey, everyone. In this video, I want to show you how to add animations to your Squarespace website. Now, I'm going to be doing this through Lottie files. This is something that I like to use on websites that I create for clients, but also on my own personal website, and I'm going to show you some examples of that. But first, if you don't know what a Lottie file is, then the best way that I can explain it is that it's basically a small, versatile, and high-quality way to to add dynamic animations to websites and apps. If you've ever seen Duolingo or Headspace, they like to use a lot of those cartoony, funny, cute animations that just bring the user into a fully immersive experience on that platform. Duolingo is very much Duolingo. Lottie files are just really nice to use because they work on a bunch of different screen sizes. It's like a vector graphic. Vector graphics can scale across different screen sizes, and they don't look blurry or pixelated depending on its size. So think of a lot of animation like that. And because of the file size being so small, it really can improve the speed and efficiency of your website or your app.
[00:01:23.06] - Speaker 1
So this is my blog, the back-end of my blog, right? So if I were to go into my most recent one, you'll see that I have this arrow animation here. And so that is a Lottie animation script, right? So it looks normal here. And if I preview this, it looks normal, right? Just telling the user to scroll down to see the full blog. But in the editor, it looks like this. And so it is an embedded script that that I just copied and pasted from this website where I got it from. So basically, what we're going to do is add a lot of animation to this new blog draft that I have here. As you can see, I have the title ready to go, but there are different things that need to be added here. We're going to add that. If we go back here and we type in Eric, then we're going to get a lot of different things. This one's decent, this one. Just for our purposes, I really could do anything just to show you how to do it. Let's say we wanted to do... Let's say we wanted to do the blue, right?
[00:02:58.25] - Speaker 1
Then here we have saved the workspace. What we want to do is do asset and embed. First, we're going to save it to the workspace. I'm just going to put it in first project is final. Let's save. It's going to take me to this. Exit that out for now. Then we have this editor screen here. It's just going to give you a lot of options that you can do. You can get information, comments, accessibility stuff, color palette, version history, just all of this different information. Transparency grid, bounding box, background color, There are different ways you can download it. What we're going to do is do something called handoff. Then we're going to enable the asset cdn, which I can't see in this thing, but we're just going I'm going to check that on. Then what we have here is the asset configuration, the asset link format, all these things, integration guide. We have embedded HTML. Then what we can do here is basically just copy this. And now we have that. Come back here, go here. I'm just going to delete this text Add a plus sign. Go to the embed code snippet, embed data.
[00:04:39.26] - Speaker 1
Pace that in there, go back, save it. Then when we click Exit, we have it here. Now, obviously, it's a little off-centered, so I want to make sure that it's in the middle. So you'll just go into Edit, and you can go to Edit here, go to Embed Data. And then what we can do is just look for... Let's see here. Style, width. Okay, so width. Let's try changing that. Okay, a little bit more. Just want to tweak it just slightly. I don't know. That looks pretty centered, maybe a little bit more. It looks pretty centered to me. I don't know. I could be off a little bit, but it looks centered to me. And then obviously, you could also change the height here, which you could do 200 if you want to make it a little smaller. But yeah, I think that's fine for now. So basically, you're just going to click Save, and then when you click Exit, and then we'll preview this. Then you'll have the animation right here, and you can obviously see that it's working correctly. So that is how you add a Lottie animation file to your Squarespace website.
[00:06:13.21] - Speaker 1
So if this was helpful, then hit the like button and drop a comment down below. Maybe share the website that you add some animations to. I'd love to see it, and subscribe for more website tips just like this. And if you want to keep a streak going, then check out this video right here because it might be helpful to you.
What Are Lottie Files?
Lottie files are small, high-quality, scalable animations that you can embed on your website or app. Think of them like vector graphics that move, they stay sharp and smooth on any screen size without slowing your site down.
Because they’re so lightweight, Lottie animations load quickly and can actually help improve your site’s speed and performance compared to larger GIFs or video files.
They’re perfect for:
Adding motion to your homepage hero section
Highlighting a call to action (like a down arrow prompting users to scroll)
Making a static page feel more alive and professional
Why Add Animations to Your Website?
Animations can bring your website to life and make it more memorable. They:
Guide visitors’ attention to key areas of your site
Improve user experience by making navigation feel smoother
Strengthen your brand personality through subtle movement and visual storytelling
If you design websites for clients, this is also an easy way to elevate your projects and make them stand out, without sacrificing site speed or functionality.
Ready to work with a designer to get an awesome, high-converting website? Book a call and let’s chat!
How to Add a Lottie Animation in Squarespace
Let’s walk through how to embed a Lottie animation into your Squarespace site using LottieFiles.com.
1. Choose Your Animation
Head to LottieFiles.com and browse through the free animations. You can search for whatever fits your project, arrows, icons, shapes, illustrations, or more.
For example, let’s say you choose a simple blue arrow animation to encourage scrolling on your blog post.
2. Save and Get the Embed Code
Once you’ve chosen your animation:
Save it to your workspace.
Open the file and click “Handoff” in the top menu.
Turn on the Asset CDN option.
Scroll to find the Embed HTML section, then copy that embed code.
This code is what you’ll paste into Squarespace.
3. Add the Animation to Your Page
In Squarespace:
Open the page or blog post where you want the animation.
Click the “+” icon and choose “Code” or “Embed” block.
Paste in your Lottie HTML code.
Click Apply or Save.
When you preview the page, your animation should now appear and play automatically.
4. Adjust the Size and Alignment
If it looks off-centered or too large, you can adjust it easily:
In the code block, look for
widthandheightin the style section.Change the numbers until it looks right.
For example:
style="width:200px; height:200px;"
Final Thoughts
And that’s it! You’ve just added a professional-looking animation to your Squarespace website. No plugins or heavy files required.
Lottie files are a quick way to make your site feel more interactive and engaging while keeping things clean, fast, and modern.
If you found this tutorial helpful, be sure to check out my other Squarespace tips.
Abby Castillo
Let’s Connect
Check out more step-by-step tutorials!
Subscribe to my YouTube channel @designwithabby for easy-to-follow Squarespace tips, design walkthroughs, and CSS learning.
Want more tips and inspiration?
Follow me on Instagram, Facebook, or LinkedIn for behind-the-scenes content, educational content, and design advice that actually helps.
Need a pro to handle your website?
Whether you're starting from scratch or need a refresh, I offer custom Squarespace design services to help your business stand out online. Get in touch here to book a free discovery call and see if we’re a good fit!
Or view my portfolio to see how I’ve helped others. :)
Frequently Asked Questions
-
Yes! You can add Lottie animations to both Squarespace 7.0 and 7.1 using an embed block or code block.
-
Many Lottie animations are completely free to use. Some creators offer premium versions with licensing for commercial use.
-
No — they’re designed to be lightweight and load quickly, unlike video or GIF formats.
-
Yes, you can edit colors and scaling in LottieFiles’ editor before exporting, or adjust size directly in your Squarespace embed code.
-
Use them sparingly! Great spots include call-to-action sections, scroll indicators, or subtle background movements... anywhere you want to guide attention without distracting users.
