Make lottie file clickable to open another page?

I have code blocks for lottie files, which I want the user to be able to click on to open another page. My lottie code looks like this:

<lottie-player
  hover
  loop
  mode="normal"
  src="https://assets9.lottiefiles.com/packages/lf20_ruuytjtm.json"
  style="width: 300px"
>
</lottie-player>
 

Is it possible to have the animation be clickable to open in a separate tab to another page?

Is there anything preventing you from adding a button class or an a class to the lottie animation in the code block? If not then just use "href=URL_HERE_" and "target=_blank". I think that should open in a new tab.

I'm not sure where to put these things you're saying, sorry I'm very new at this.  What would the code look like in the end? Like this (oh god please don't laugh if this is ridiculously wrong!):

<lottie-player
  hover
  loop
  mode="normal"
  src="https://assets9.lottiefiles.com/packages/lf20_ruuytjtm.json"
  style="width: 300px"
>
</lottie-player>
<href=http://thecolorcrew.com/
  target=_blank>

On 11/19/2021 at 10:46 PM, storycolorcrew said:

I'm not sure where to put these things you're saying, sorry I'm very new at this.  What would the code look like in the end? Like this (oh god please don't laugh if this is ridiculously wrong!):

<lottie-player
  hover
  loop
  mode="normal"
  src="https://assets9.lottiefiles.com/packages/lf20_ruuytjtm.json"
  style="width: 300px"
>
</lottie-player>
<href=http://thecolorcrew.com/
  target=_blank>

Use this new code

<lottie-player
  hover
  loop
  mode="normal"
  src="https://assets9.lottiefiles.com/packages/lf20_ruuytjtm.json"
  style="width: 300px"
>
</lottie-player>
<a href="http://thecolorcrew.com/" target="_blank" class="tuan"></a>
<style>
  .code-block>div {position:relative;}
  a.tuan {
  	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
  }
</style>

Hey! The Lottie file isn't playing now, just stays stuck on the original first frame.  Any suggestions? The link does work, so that's awesome.

BTW, your answers are always amazing, thank you so much.  I have used a lot of your responses on this forum to help me out before. 

On 11/23/2021 at 2:54 AM, storycolorcrew said:

Hey! The Lottie file isn't playing now, just stays stuck on the original first frame.  Any suggestions? The link does work, so that's awesome.

BTW, your answers are always amazing, thank you so much.  I have used a lot of your responses on this forum to help me out before. 

I see you figured it out with script code

Yes, thank you!

On 11/29/2021 at 11:08 AM, storycolorcrew said:

Yes, thank you!

Hey, what was the solution you ended up figuring out? I've tried a few things and like you, I got the hyperlink to work, but the animation won't play now.

On 2/5/2022 at 11:53 PM, rocketbarn said:

Hey, what was the solution you ended up figuring out? I've tried a few things and like you, I got the hyperlink to work, but the animation won't play now.

we can use script code to add event click.

If you share link to page where you added lottie, we can check & give the script code

On 2/8/2022 at 1:59 PM, tuanphan said:

we can use script code to add event click.

If you share link to page where you added lottie, we can check & give the script code

Hi,
I've the same issue.
Can you please share a working example how to fix this?
Thanks

21 hours ago, lottiebeginner said:

Hi,
I've the same issue.
Can you please share a working example how to fix this?
Thanks

Can you share link to page where you have problem? We can check easier

On 4/24/2022 at 9:50 AM, tuanphan said:

Can you share link to page where you have problem? We can check easier

Thank you for your quick response.
This is the link of the webpage: https://www.govivit.com/ and for example the element back to top above the footer won't animate on hover, if I put the lottie animation in <a> Tag.
 

On 4/25/2022 at 4:31 PM, lottiebeginner said:

Thank you for your quick response.
This is the link of the webpage: https://www.govivit.com/ and for example the element back to top above the footer won't animate on hover, if I put the lottie animation in <a> Tag.
 

You mean right arrows? It looks fine to me

7 hours ago, tuanphan said:

You mean right arrows? It looks fine to me

Yes, because the animation isn't nested inside the <a> tag.
But how can I add a link so that the hover animation also works?

5 hours ago, lottiebeginner said:

Yes, because the animation isn't nested inside the <a> tag.
But how can I add a link so that the hover animation also works?

closed

On 4/28/2022 at 3:16 AM, lottiebeginner said:

closed

You mean you fixed this?

I would also like to know how to achieve this,  would be great if anyone is able to share their solution 🙂

I'd like to be able to click a lottie animation and use it as a link to scroll the user down the page.

7 hours ago, D8NMT said:

I would also like to know how to achieve this,  would be great if anyone is able to share their solution 🙂

I'd like to be able to click a lottie animation and use it as a link to scroll the user down the page.

Add this code into Lottie Code Block

<a href="http://thecolorcrew.com/" target="_blank" class="tuan"></a>
<style>
  .code-block>div {position:relative;}
  a.tuan {
  	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
  }
</style>

Replace example url with your desired url.

On 7/9/2022 at 5:24 AM, tuanphan said:

Add this code into Lottie Code Block

<a href="http://thecolorcrew.com/" target="_blank" class="tuan"></a>
<style>
  .code-block>div {position:relative;}
  a.tuan {
  	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
  }
</style>

Replace example url with your desired url.

Thanks so much for helping - very much appreciated 🙂