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.