storycolorcrew Posted November 12, 2021 Share Posted November 12, 2021 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
Wolfsilon Posted November 12, 2021 Share Posted November 12, 2021 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. Link to comment
storycolorcrew Posted November 19, 2021 Author Share Posted November 19, 2021 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
tuanphan Posted November 21, 2021 Share Posted November 21, 2021 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
storycolorcrew Posted November 22, 2021 Author Share Posted November 22, 2021 (edited) 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 November 22, 2021 by storycolorcrew Link to comment
tuanphan Posted November 25, 2021 Share Posted November 25, 2021 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
storycolorcrew Posted November 29, 2021 Author Share Posted November 29, 2021 Yes, thank you! Link to comment
rocketbarn Posted February 5, 2022 Share Posted February 5, 2022 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. Link to comment
tuanphan Posted February 8, 2022 Share Posted February 8, 2022 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
Guest Posted April 23, 2022 Share Posted April 23, 2022 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
tuanphan Posted April 24, 2022 Share Posted April 24, 2022 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 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
Guest Posted April 25, 2022 Share Posted April 25, 2022 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
tuanphan Posted April 27, 2022 Share Posted April 27, 2022 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
Guest Posted April 27, 2022 Share Posted April 27, 2022 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
Guest Posted April 27, 2022 Share Posted April 27, 2022 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
tuanphan Posted May 1, 2022 Share Posted May 1, 2022 On 4/28/2022 at 3:16 AM, lottiebeginner said: closed You mean you fixed this? 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
D8NMT Posted July 8, 2022 Share Posted July 8, 2022 (edited) 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 July 8, 2022 by D8NMT updated question Link to comment
tuanphan Posted July 9, 2022 Share Posted July 9, 2022 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
D8NMT Posted July 11, 2022 Share Posted July 11, 2022 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment