Jump to content

Make lottie file clickable to open another page?

Recommended Posts

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?

Link to comment
  • Replies 18
  • Views 1.9k
  • Created
  • Last Reply

Top Posters In This Topic

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>

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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. 

Edited by storycolorcrew
Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...
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

Link to comment
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.
 

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?

Link to comment
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

Link to comment
  • 2 months later...

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.

Edited by D8NMT
updated question
Link to comment
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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 🙂 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.