Streaming live at 10am (PST)

Lottie animation as link

Hi. Is there possibility in Webflow to make Lottie file as link resource or it’s just for animation?

Yes it works fine. Set up a Link Block, and have that block act as the link (specify what it does in the block’s settings). Give it the exact dimensions and position you want. Then a wrapper Div inside of that link block (set to 100x100%), then insert your Lottie inside that Div. You will be then able to control the behavior of the animation on hover and/or click, while the Parent Link block acts as the link.

2 Likes

Thank you very much!

If you don’t mind me joining into this post since I am doing exactly this right now and am having one questions about it.
I am using 3 sec lottie within link bloc. The link is link for new page within website. My problem is that I want that mouse click activates animation and once it has played its 3 seconds to change the page. Now/where can I set that link action happens after lottie plays full length?
Thank in advance for a tipp

Hey @Boris_Kajmak, you’ll need a custom code snippet for that.
If you are new with Webflow, check this link out.

As for the code itself, there are many ways to go about it, but the most common one used is this:

<script>
$('.link-class').click(function(e) {
      e.preventDefault();
      var linkUrl = $(this).attr('href');
      setTimeout(function(url) { window.location = url; }, 3000, linkUrl);
    });
</script>

Just replace “link-class” with the name of your link/button’s class. And in the last line, 3000 is for 3000 ms (3 seconds). This is the delay time.

And just keep in mind, you will not be able to see this unless you publish or export your site, as all custom codes cannot be executed in the Webflow preview.

Let me know if it works or you need any more help. Cheers!

1 Like

That’s awesome!
Yes, I am new to Webflow but you’ve explained it great so even I could implement it. And it works lovely.
I was guessing I will be needing a bit of custom code I cannot do myself.
Thanks a lot for quick response and so accurate. If I end up changing my idea which is beyond changing class, or duration and I fail to do it myself, I will be in touch again.

…and it was my first call for help on the Webflow community! Love it!

Cheers from Rome, Italy

Hi @Mr_Finn !
Great tips thank you !
I added my lottie file in a link block and then a div block, it’s quite working, but the link block is only “available” when I move the mouse out of my lottie animation. Do you know why ?
I would like that when I have my mouse on my lottie file it’s still playing and so I can click on it.
Thank you very much if you can help me :slight_smile:
LINK : https://parabole.webflow.io/

Alex

sorry, it’s on the Lab text link, when you go with the mouse over it the lottie file play

Hey, first of all, we have similar names for our studios, haha ^^

Second, yes so when I hover over the link “lab”, an animation appears in front of it, but then you cannot click the link itself. That is the issue, correct? You want the lottie to appear, but also still be able to click the link? It most likely has to do with how you structured the link and how you placed the lottie inside it.

If you could show me your read-only webflow project (in case you never did, check out how to do it on this link ), I can help you figure out how to structure it better.

1 Like

ahah so funny :slight_smile:
yeah sure, here is the link : Webflow - Parabole
thank you very much !

Yes this is exactly the issue. I would like to have the Lab word dissapears when the mouse come over and the the lottie file appear and animate. Then when you click on the image of the lottie it goes to the page and when the mouse go out the lottie file dissapears and the word lab come back.

Hey man, so here is what you do, I got it to work as you want it to:

  1. the Div “Navlinks navlinks 1” (the one containing all the links): change alignment from “stretch” to “center”. Because the link containing the lottie is going to be bigger in height, that way they all remain aligned.
  2. Inside the “row” element, create a new element “link block” (NOT text link). This will act both as a container and a link. For this, set the display to “flex” and “center - center”
  3. The lottie file itself, keep the position “static”. the div that contains the lottie, this one you set it to “absolute”
  4. Then the text that says “lab”, make sure to keep it “static”
  5. REMOVE the animation trigger from the text element, and add the animation triggers to the link block that you created in step 2.

Message me if you had more issues.

Cheers!

Screen Shot 2021-01-29 at 11.36.49 AM

Hello @Mr_Finn,
Thank you very much ! you are great it’s working ! :wink:
Only problem I have is the text animation trigger. I added fade in/out text animation to my bock link but when I preview this, it’s working strange. Everything is 0 opacity mouse out and it’s making weird when I go on or out with the mouse. Do you see what is the problem ?

https://preview.webflow.com/preview/parabole?utm_medium=preview_link&utm_source=designer&utm_content=parabole&preview=0d8fff4b2bbb4b61b4ae78753578764c&mode=preview

Hey, glad to hear it’s working.

So the issue is your “fade out text” is affecting the link block, not the text (because it was set to affect the trigger, which is now the link block)Screen Shot 2021-02-01 at 12.54.22 PM

What I recommend you do is, instead of having three animations, I highly recommend you delete those and create only ONE animation, where you merge all three. It’s just easier to control and keep track of. So on hover IN, you will have the text fade out, and the lottie fade in, and on hover OUT, text comes back in and lotties fades out.

Now, if you are still not used to stacking multiple animations, it’s fine keep them like that. But if you have some to fiddle around and try it, go ahead, it’s a much better practice for later. The key is just to know how to time each. Also, use the “set as initial state” button, for the lottie on hover in. That way it will have 0 opacity as a default setting, before you hover, then it will animate to the next value after you hover.Screen Shot 2021-02-01 at 12.59.46 PM

Anyway, what you did works very well, this is just a tip that will make your life much easier for later, when you have more complex animations.

Cheers!

ohhhh I did not thought about it. Thank you very much for all your help !
you are great ! :wink:
Alex

1 Like