Add animations to your Hero blocks

Here’s a quick guide on how to turn your hero block into an animated experience for your visitors. If you’re familiar with After Effects, this guide is for you.

What are Lottie JSON files?

If you have experience with animation, you’ve probably come across the Lottie file type. For those that are not familiar, a Lottie file is just a different type of animation file. In today’s online world, when you go on a website that displays any type of animation (specially those you seem to control by scrolling), there a super high chance it is a Lottie file and not a GIF or mp4. Lottie files are smaller in file size, faster to load and more accessible, that’s why they’ve become so popular.

Screen Recording 2022-09-28 at 2.43.15 PM.mov

The example above is from Reo Cragun’s website. The animations are not GIFs or mp4s, they are Lottie files.

*You can use After Effects + LottieFiles Plugin to export your animation in this format instead of .mp4 or .mov.

Here is how it works:

Create/import/open your animation using After Effects.
Once your animation is done and you’re happy with the results, export as a PNG image sequence. You can also do this using the Adobe Media Encoder.
After it’s done exporting, create a new composition on After Effects. Take the image sequence you just exported and import back.
When finished, export the animation as a Lottie JSON (For this you need to install the LottieFiles plugin. You can get it here.)
Now it’s time to place it on your website’s hero block. To do this, go to your Bonfire dashboard and click Pages.
Click edit on the hero block you want to add the animation to, toggle to where it says animation and click ‘upload lottie file’
Select your Lottie file from the menu, click open and save changes.
Don’t forget to click ‘Update Page’ to save all your changes and make sure they go live.
Congrats! Your animation is now live.

Ok, but what if I don’t have After Effects?

Absolutely no worries, here’s a quick guide on how to take your .svg files from any software like illustrator, figma, canva, among others, and turn them into LottieFiles and then into animations for your hero block. Let’s dive in.

After you’re done with your design or illustration, either on illustrator, figma, canva or basically any design software, you can export it as a .svg file. SVG files are great and very popular in the design world because their dimensions can be changed without affecting quality, meaning that no matter how big you scale them, they will still look great.

Now that you have you freshly exported .svg file, let go step by step on how to turn this into a Lottie, animate it and add it to your hero block.

Go to the LottieFiles SVG-to-Lottie converter here and drag and drop your .svg file.
Choose an animation you like from the menu and click ‘Download Lottie’
If you want to make further edits to your animation, go to the lottie editor here, where you’ll be able to edit layer colors, layer text, etc.
Once you’re done, click ‘Export’.
Now it’s time to place it on your hero block. To do this, go to your Bonfire dashboard and click Pages.
On your Hero block click edit, then toggle to where it says animation and click ‘upload lottie file’
Select your freshly exported Lottie file from the menu, click open and save changes.
Don’t forget to click ‘Update Page’ to save all your changes and make sure they go live.
Congrats! Your animation is now live.

← Previous

Pages

Collections

On this page