How to Use Lottie Animations on Squarespace
What are Lottie Animations?
Lottie files are a modern and versatile way to add animations to your website or app. They are based on the open-source Lottie format, created by Airbnb, and consist of lightweight vector animations that are exported as JSON files. These JSON files are then rendered using the Lottie-web library, which ensures smooth playback across various platforms and devices. These animations have become increasingly popular due to their smooth performance and ease of customization.
Benefits of using Lottie animations
There are several benefits to using Lottie Files for your animations:
Small file sizes: Lottie Files typically have a smaller file size compared to traditional animated formats like GIFs or video. This translates to faster loading times and improved website performance, leading to a better user experience.
Scalability: Since Lottie animations are vector-based, they can be easily scaled without any loss of quality. This means that your animations will look sharp and crisp, regardless of the screen size or resolution..
Easy customization: Lottie animations can be easily customized in terms of color, speed, and other properties, making it simple to adapt them to your brand and design aesthetic.
Cross-platform compatibility: Lottie animations work seamlessly across different devices and platforms.
Interactivity: Lottie Files can be made interactive using additional libraries, such as the Lottie Interactivity library. This enables animations to respond to user interactions, such as scrolling or hovering, creating a more engaging and immersive experience.
Does Squarespace Support Lottie Animations?
Squarespace does not offer direct integration with Lottie Files out of the box. However, you can still incorporate Lottie animations into your Squarespace website using custom JavaScript and HTML code. By using custom code, you can add Lottie animations to your Squarespace website with even scroll-based interactivity. This workaround allows you to enjoy the benefits of Lottie animations without native support from Squarespace.
Squarespace Built-in Animations
While Squarespace does not support Lottie animations by default, it does offer site-wide animations that can be applied to specific elements such as images, text, and buttons. These animations can be customized in terms of timing, speed, and type.
Creating and Using Lottie Animations
Option 1: Creating your own Lottie file
Designing animations in Adobe After Effects
Adobe After Effects is the industry-standard software for creating animations and visual effects. You can design your Lottie animations in After Effects, making use of its powerful tools and features.
Exporting animations with the Bodymovin plugin
After creating your animation in After Effects, you can export it as a JSON file using the Bodymovin plugin. This plugin converts your animation into a Lottie-compatible format, which can be easily embedded into your website.
Option 2: Using existing Lottie animations
Browsing and selecting animations
Resources like LottieFiles and Icon Scout offer a vast library of ready-made animations created by talented designers. You can browse through the collection and find an animation that suits your needs.
Customizing and downloading animations
Once you've selected an animation, you can customize its colors and properties with the Lottie Editor or Color Palette feature before downloading the JSON file. This allows you to tailor the animation to match your website's design and branding.
Integrating Lottie Animations with Squarespace
Now that you have your Lottie animation JSON file, you can follow the following steps to integrate it with your Squarespace website using HTML(HyperText Markup Language)
Step 0: Obtaining a URL for your Lottie Animation
There are two alternatives for obtaining a URL for your own Lottie animation. One option is to host the animation on your own server by uploading the JSON file, which will provide you with a direct URL for the file. The second option is to use a file hosting service like LottieFiles, where you can upload your animation and then retrieve the URL from their platform.
If you prefer using a pre-existing animation, you can easily obtain the URL of any public animation from Lottie libraries such as LottieFiles, IconScout, and others. This allows you to quickly and conveniently access a wide range of animations to integrate into your project.
For the sake of this guide, let’s take a pre-existing lottie file created by Bashir Ahmed
Step 1: Add the script tag for the LottieFiles web player component
LottieFiles provides a <lottie-player> web component that enables seamless integration of Lottie animations into your web pages. To utilize this web component, we need to inject the <lottie-player> web component into the header code of your Squarespace site.
Navigate to your website's editor on your Squarespace account.
Click on "Settings" in the left-hand menu.
Select "Advanced" from the settings options.
Choose "Code Injection" from the advanced settings.
In the "HEADER" field, paste the following script:
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>Step 2: Create the HTML code for the Lottie animation
You can utilize the Lottie Web Player page to quickly generate the required HTML code for the player.
Simply input the URL of your Lottie file and experiment with the available options to customize the player or animation as desired. Once you have adjusted the settings to your liking, copy the generated code and insert it into your website's HTML.
The <lottie-player> web component offers numerous options for tailoring the appearance and behavior of your animation. Customize your Lottie animation using the following attributes:
Play Mode: Select the "bounce" play mode to have the animation play normally but reverse direction upon reaching the last frame, looping back and forth continuously.
Direction: Choose whether the animation plays forwards or backwards.
Background: Define the background color of the animation or set it to transparent to reveal your website's background. Use valid HTML color attributes (e.g., "white") or hexadecimal color values (e.g., "#FFFFFF") to establish the background color.
Speed: Adjust the playback speed, with the default being 1. Use values smaller than 1 to decelerate the animation (e.g., 0.5 for half-speed) or larger than 1 to accelerate it (e.g., 2 for double speed). Fractional values like 0.75 or 1.5 can also be used for precise speed adjustments.
Loop: Include this attribute to make the animation loop indefinitely. Without it, the animation will play once and stop.
Controls: Add this attribute to display a seeker bar with start, stop, and pause controls. For design-focused animations, you may prefer to disable this attribute.
Hover: Enable this attribute to have the animation play only when users hover their mouse over it.
Autoplay: Include this attribute for the animation to start playing automatically upon loading. If not specified, JavaScript must be used to trigger the animation.
Step 3: Embed the animation to your website
On your Squarespace account, navigate to the page where you want to add the Lottie animation.
In Edit mode, Click Add Block > Code
A new Code Block will appear on your page. Click on the block to open its settings.
In the "Code" field, paste the Lottie player code that you generated earlier. You don’t need to include the first line of the code as we already injected the script tag in the first step.
Make sure the "Display Source" option is unchecked and click "Apply" to save your changes.
Click "Done" in the top-left corner to exit the page editor.
<lottie-player src="https://assets7.lottiefiles.com/packages/lf20_5XEJb3YBIg.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop controls autoplay></lottie-player>Your Lottie animation should now be visible on your Squarespace website, embedded within the Code Block. You can move or edit the Code Block as needed to adjust the placement and appearance of the animation.
Examples of Websites Using Lottie Animations
Inspiring use cases of Lottie animations
Lottie animations have been used by companies like Airbnb, Google, and Netflix to create engaging user experiences. Check out the Lottie showcase to see examples of Lottie animations in action.
LottieLab is another excellent resource for finding inspiration on how to effectively integrate Lottie animations into your website design.
We at Coglyde also use Lottie animations on our own Squarespace website, as well as our client’s websites. See the video below showcasing our Lottie-animated logo, as well as the scrolling paper plane animation we have integrated using Lottie Files Interactivity guide. Let us know if you would like a separate blog covering the interactivity features, such as animate on scroll!
Best Practices for Implementing Lottie Animations
Ensuring smooth performance
To ensure that your Lottie animations perform smoothly on your Squarespace website, keep the file size as small as possible and avoid using overly complex animations.
Optimizing animations for different devices
Make sure that your Lottie animations are responsive and adapt well to different screen sizes and devices. You can refer to our responsive web design and Squarespace blog post for more information on creating responsive designs.
Troubleshooting Common Issues with Lottie Animations
Animation not displaying
If your Lottie animation does not appear on your Squarespace website, double-check the JSON file's URL and ensure that the Lottie-web and Lottie-interactivity libraries are correctly added to your site.
Sometimes the animation may not display in Edit mode on Squarespace. Save/Publish your page and open it in preview mode to display it.
Interactivity not working as expected
If the interactivity settings do not function as intended, review the configuration on Lottie Web Player , and make sure you are grabbing the updated code reflecting your changes.
Conclusion
Recap of integrating Lottie animations with Squarespace
In this article, we discussed how to integrate Lottie animations with Squarespace using custom JavaScript and HTML code. Although Squarespace does not support Lottie animations natively, this workaround enables you to add engaging and interactive animations to your website.
Encouraging creativity in web design using Lottie animations
Lottie animations can breathe life into your website, enhancing user experience and adding a touch of creativity to your design. By following the steps outlined in this tutorial, you can integrate Lottie animations into your Squarespace website and create a unique online identity for your brand. For more information on custom web design, check out our custom web design blog post.
If you would like to work with us, please feel free to check out our website design services and don’t hesitate to contact us to help you create the perfect website that stands out from the competition.
