Creating an on Hover Lottie Animation in Webflow

Are you looking to add some magic to your Webflow projects with eye-catching animations that appear when hovered on? Look no further! In this quick blog post, we'll guide you through the process of creating a looping animation in Webflow that appears on hover and disappears when not hovered on.

We'll be using some fantastic tools like Figma, Jitter, Lottie, and Webflow to achieve this mesmerizing effect. So, let's dive in!

Step 1: Export your Figma asset into Jitter using their Figma plugin

To get started, you'll need a design or illustration that you'd like to animate. If you're using Figma, you can use the Jitter Figma Plugin to export your assets into Jitter seamlessly.

1. Select your frame and click on Plugins
2. Search for the Jitter Figma Plugin‍
3. Export your desired asset from Figma to Jitter using the plugin.

Step 2: Bringing Your Design to Life with Jitter and Lottie

Now that you have your asset in Jitter, it's time to unleash your creativity and add captivating animations to your design!

1. Select Your Element: In Jitter, begin by selecting the element you want to animate. Whether it's a logo, icon, or any other part of your design, Jitter offers the tools you need.
2. Animate with Ease: Once your element is selected, click on "Animate" to access Jitter's animation features. Here's where the magic happens! You can choose from a variety of pre-made animations to save time, or you can let your imagination run wild and create a custom animation tailored to your vision.
3. Fine-Tune for Perfection: Jitter allows you to fine-tune various aspects of your animation, including the duration and easing methods for each element. This level of control ensures you achieve the exact effect you desire, bringing your design to life in a dynamic and engaging way.
4. Set the Final Duration: After crafting your animation to perfection, it's time to set the final duration. This step ensures that your animation loops seamlessly and mesmerizes your visitors without interruption.
5. Export as a Lottie File: With your animation ready, it's time to export it as a Lottie file. This file format is perfect for Webflow integration and ensures your animation will display flawlessly on various devices and browsers.
6. Learning Resources: If you're new to Jitter or looking to enhance your animation skills, be sure to check out Jitter's YouTube channel. There, you'll find a treasure trove of tutorials and tips to take your animation expertise to the next level: Jitter's YouTube Channel

Now that you have a stunning Lottie animation, let's proceed to the next step and upload it to LottieFiles!

Step 3: Upload your Lottie (.json file) to LottieFiles and export it for the web

With your animation ready in Jitter, it's time to convert it into a format that Webflow can understand and display seamlessly.

1. Head over to LottieFiles (LottieFiles.com) and log in or create an account if you haven't already.
2. Go to "My Dashboard" and click "Upload Animation."
3. Upload the Lottie file (.json) that you exported from Jitter.
4. After the upload is complete, click on "Share" and make sure to enable the "Asset Link" option.
5. Copy the Web Embed link provided by LottieFiles; we'll use this in the next step.

Step 4: Add the "HTML embed" element to your Webflow project and insert the custom code

In this step, we'll integrate the animation into your Webflow project.

1. Open your Webflow project and navigate to the page where you want the animation to appear on hover.
2. Drag and drop an "HTML Embed" element onto the page at the desired location.
3. Inside the HTML Embed element, paste the custom code provided by LottieFiles. Replace "<lottie-player>" with the copied Web Embed link.

Copy this custom code:

<lottie-player id="my-lottie-player" src="https://lottie.host/3f9d098b-03c1-4ce0-822d-3df11559b6cd/01WhIACdIU.json" background="transparent" speed="1" style="width: 100%; height: 100%;" loop></lottie-player><div id="my-lottie-controller"></div><script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script><script> var lottiePlayer = document.getElementById("my-lottie-player"); var hoverTrigger = document.getElementById("my-lottie-controller"); hoverTrigger.addEventListener('mouseover', function(event) { lottiePlayer.play(); }); hoverTrigger.addEventListener('mouseout', function(event) { lottiePlayer.pause(); });</script><style> #my-lottie-controller { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; }</style>

‍

Step 5: Publish your site and make the animation live

Congratulations! You're almost there. Now, let's bring your project to life.

1. Before publishing your Webflow project, make sure to save all changes.
2. Preview the page to see the animation in action when you hover over the designated area.
3. Once you're satisfied with the results, hit "Publish" to make the animation live for your website visitors.

That's it! Now your Webflow project features a captivating looping animation that appears when hovered over and vanishes gracefully when not in focus. With the power of Figma, Jitter, Lottie, and Webflow combined, you can create seamless and immersive user experiences that leave a lasting impression.

So, go ahead and add some magic to your web design projects with stunning animations! Happy designing! ✨

‍