Hello fellow webflowers! Its been a minute, but I have another interesting tutorial to share that opens up a whole lot of possibilities IMHO.
So without further ado, here it is – a way to make your lottie animations interactive – for example I have created a lottie animation of a mobile navigation – it consists of a hamburger button, that transforms into a menu that has navigation links, and a close button. In its implementation – you can click on the hamburger, the lottie will play the animation where the mobile navigation opens, and then the links are clickable and navigate around the site, the close button is clickable and closes the menu. Any of the nav link click will close the navigation – which plays the lottie in reverse.
You can check up a working implementation at https://mograph.webflow.io – you would have to open it on your mobile or in chrome/safari responsive developer mode to see it (since it is a mobile navigation).
I followed the tutorial created by Sam @SVGenius - https://www.youtube.com/watch?v=gfoImTlEcIU . By the way if you have any questions about lottie, its implementation, animation and so on – you can join the lottiefiles discord channel Lottie Community which is full of super helpful people who really know their stuff!
The setup is pretty straight forward but you have to have access to Adobe After Effects to edit/create the lottie, since you have to name certain layers in a certain way so that you can manipulate them with JS and/or Jquery.
Step 1 - Prepare your Lottie
In creating the lottie, the After Effects Project layer that you want to interact with must be named .something - when integrated into your website, that layer will have the class .something. You can change its color, or stroke, or make it clickable – you’re the boss!
In my case I had a number of layers that I wanted to interact with - the hamburger button, a close menu button, and four links – Home, Gallery, About & Contact.
Test and export your lottie and upload it to you webflow project.
Step 2. Prepare your webflow project
Since I wanted to have the links navigate around the site, in webflow I have created a four link blocks that connected the sections I wanted to scroll to (it may as well be any link you want). In my case the link blocks had the following names. .homelink, .about-link, .gallery-link and .contact-link. Additionally I have created the following div’s (they will each have Webflow interactions tied to them to playback the animation) .nav-open and .nav-close. All these linkblocks and div’s can be set to display:none.
This is the layout of my Mobile Nav -
In my demo setup, the mobile I used the following Settings for .NAV
and
.mobile-nav-container:
Step 3 - Add Webflow Interactions
Now you need to create two interactions - one to open the nav menu and one to close. First lets add the Open Interaction. Select your .nav-open div and go to the interactions menu and add the following “on click” interaction:
Save, and then select your .nav-close div and add a similar interaction just reversing the lottie animation on-click. You can make the reverse quicker - but that decision is up to you 
Step 4 - Add Custom Code
Now we need to add custom code that will map the clicks on the lottie to the linkblocks/divs that you created in Step 2.
Here’s the code that I used - and I will explain it below:
window.addEventListener("load", function(){
$('.activate').on("click", function() {
$('.nav-open').trigger("click");
$('.nav').css("overflow","visible");
});
$('.home').on("click", function() {
$('.homelink').trigger("click");
$('.nav-close').trigger("click");
setTimeout(function(){
$('.nav').css("overflow","hidden");
}, 2000);
});
$('.contact').on("click", function() {
$('.contact-link').trigger("click");
$('.nav-close').trigger("click");
setTimeout(function(){
$('.nav').css("overflow","hidden");
}, 2000);
});
$('.contact').on("click", function() {
$('.contact-link').trigger("click");
$('.nav-close').trigger("click");
setTimeout(function(){
$('.nav').css("overflow","hidden");
}, 2000);
});
$('.gallery').on("click", function() {
$('.gallery-link').trigger("click");
$('.nav-close').trigger("click");
setTimeout(function(){
$('.nav').css("overflow","hidden");
}, 2000);
});
$('.about').on("click", function() {
$('.about-link').trigger("click");
$('.nav-close').trigger("click");
setTimeout(function(){
$('.nav').css("overflow","hidden");
}, 2000);
});
$('.close').on("click", function() {
$('.nav-close').trigger("click");
setTimeout(function(){
$('.nav').css("overflow","hidden");
}, 2000);
});
I am sure it is not the most elegant code that can be written, in fact I am sure that there is a better way to write and do it, but not being a coder, this is the best that I could come up with.
So it is important to note that the window.eventListener("load", function(){}) is very important because if the script runs without it, non of it will work, since the lottie elements have not loaded yet. So the script must run very very last. (took me a long time to figure this one out)
Next, on open we must change the style of .NAV back to overflow:visible so that we can see the entire animation (if you recall we set it to hidden in Step 2). hens when we emulate the click on .nav-open we change its style and playback the animation opening the nav.
We also set up that click on any of the links will emulate the click on a relevant linkblock and also trigger the .nav-close animation while making sure that we set the time out function to 2sec (since this is the duration of the close animation in my example)
Publish, and enjoy (& don’t forget that custom code is only visible on a published site)
I hope that people will find this small tutorial useful and good luck webflowing!
(like it if you do)