Weebly is a popular no-code CMS platform that gives anyone access to a professional website without any web development experience. In this tutorial, we will cover how to incorporate Lottie animations into the builder to increase engagement without bogging down web pages. You will learn every step of the process, including where to find a premium library of free Lottie animations.
Add Life to your Weebly Website
We're adding Lottie animation to the design-forward website above. The page looks nice stylistically but has too much text in the middle sections. Animation will keep users on the page and incentivize them to read the paragraphs rather than scroll through.
Find a Premium Lottie Animation
The source of your animation is critical. Cheap designs won't capture visitors' attention and can bring down the overall quality of your website. We're using artwork from the Creattie library; you can find thousands of premium animated icons and illustrations perfect for any industry.
We'll be adding two animated illustrations - Worldwide Delivery and Restful Work. Both fit the aesthetic and will add value to the webpage we're working with.
Customize to Fit Branding
Once you've picked your design, you can customize the colors to match your page's branding. Creattie allows you to choose colors from a color spectrum or ID.
We've picked colors directly from our webpage's hero image. Just paste in the color ID, and you'll see the changes in real-time in the editor.
Download and Embed
Once your design looks perfect (don't worry, you can easily go back and make changes), click the 'Download' button. Once the design is downloaded, an 'Embed' button will appear. You can click 'Embed' without downloading if you are working with a free Creattie design.
We must embed when working with Weebly because there isn't a way to render JSON files in the builder without doing some serious hard coding. Embedding the code is as easy as copying and pasting, so don't worry if you haven't worked with HTML.
Modify Animation Attributes
After clicking 'Embed,' you'll be directed to the Creattie editor. Here you can change the following:
- Size – the size of the animation in pixels
- Delay – the time the animation will pause when running on a loop
- Speed – how fast the animation script plays
- Trigger – customize how you want the animation to interact with users
Once you've selected your preferred specifications, click 'Copy.' The code snippet will be saved to your clipboard and ready to add to your webpage.
Drag' Embed Code' Into Section
Now we can navigate to the Weebly builder. Drag the 'Embed Code' widget from the left toolbar directly into the section you want to edit.
Paste in the code and watch your webpage come to life.
You can align the page element just under the code editor; we've centered the animation to fit above our text.
Click out of the element and publish the webpage to check if the design is rendered. The process isn't perfect, you may not see your animation in the builder, but it should show up once you've published it to the web.
Repeat the Process
We're adding multiple animations to the page. Typically, animated designs of this size would slow down the webpage, hurting your SEO and damaging the user experience, but Lottie is tiny and won't affect page load speeds.
Both animations are included in the section below.
The middle of the webpage now includes motion and a cohesive color pallet to keep the user interested. Large text blocks are boring and a leading contributing factor to high bounce rates.
Front-End Customization
One of the most significant advantages of working with JSON-based animations is making changes directly from the editor. Even if you aren't an experienced web developer, making changes just takes a few seconds.
Below is the code snippet in Weebly.
If you want to change the speed of the animation, just increase or decrease the number after 'speed=' and keep it in quotations. Modify the trigger with the following string values:
- "loop"
- "loop-on-hover"
- "hover"
- "morph"
The Creattie embed has a style attribute that allows you to change the alignment, include a border, or add other in-line CSS commands.
Embrace the New Technology
Adding Lottie animations to Weebly isn't a perfect process yet. Lottie is still a new technology, and most web builders haven't included software to accommodate JSON animations adequately. Ideally, you would have the option of uploading a JSON file and be able to control the characteristics from the toolbar rather than in the code.
Other CMS platforms like Elementor have built-in software to simplify the process. So, it's only a matter of time before Weebly includes a Lottie widget or an 'add-on' to give users more ways to incorporate animation into their designs.
Final Words
Working with Lottie has significant advantages over other types of animation file formats. While platforms like Weebly don't have specific tools to accommodate the new technology, the process is extremely easy. In addition, your web pages won't be slowed down, and you can customize directly from your builder.
We highly recommend incorporating animation in your web designs, and Creattie is the best source for premium Lottie animations. Check out the entire library and try hundreds of designs 100% free of charge.
