Lottie radio icon - Mouse click (tap) - Webflow Interactions tutorial

Walkthrough and video tutorial for implementing a lottie radio icon in Webflow with the 'Mouse click (tap)' trigger.
TIMESTAMPS:
00:10 - Intro
00:31 - Live Example
00:49 - Structure
03:23 - Important Note
04:30 - How to build it?
LOTTIEFLOW: Get unique Lottie icon animations to implement on your website, product, or app for free. Browse for Lottie files, change hex color, customize easing, and download the JSON file. It’s that simple! 🚀 Made by ‪@Finsweet‬ for the ‪@Webflow‬ Community.
See all videos from the playlist: • Lottieflow by Finsweet
-----------------------------------------------
// RESOURCES FROM THE VIDEO
Lottieflow: lottieflow.finsweet.com/
Lottieflow How-to: lottieflow-clonable.webflow.i...
Lottieflow How-to cloneable: finsweet.com/lottieflow-clonable
Discover all Finsweet products: finsweet.com/sitemap
Subscribe to Finsweet: kzbin.info?su...
-----------------------------------------------
// ABOUT US
We’re Finsweet - a Webflow enterprise partner, badass product creator, and educational content powerhouse. We are taking Webflow to a new level and sharing everything with you along the way!
🙌 Join our community - finsweet.com/fin-pro
🛍 Shop our merch store - finsweet.com/merch
💪 Superpowers for your Webflow website - finsweet.com/attributes
🧰 Your toolkit for Webflow - finsweet.com/extension
-----------------------------------------------
// SOCIAL
Facebook: / ​
Twitter: / thatsfinsweet​
Instagram: / ​
Dribbble: dribbble.com/thatsfinsweet​
Behance: www.behance.net/thatsfinsweet/​
Webflow: webflow.com/team/Finsweet/​
-----------------------------------------------
// TAGS
#Lottie #Animation #Webflow
-----------------------------------------------
Thanks for your support! 🤟

[@jevgenisuija]

Guys, thanks for sharing this!

[@matthewcooper1]

Hey Joe, just wanted to tell you this video was great... Thank you. Really appreciate it. I was trying to do a slightly different animation - animating a div block that contained a radio button to scale by about 5%, change the border to green, and change the background to a light green when the user clicked the option. Could not figure it out, but the exact techniques you ran through here worked for that. I just styled the "parent div block", rather than "sibling radio icon". It looks really great, searched loads of places for help with radios and couldn't find help - so thank you!

[@Finsweet]

Hey Matthew - thank so much for sharing this. Really really glad this helped you!

[@ziyingtan7668]

Hey, thank you so much for your tip! Took me 3 hours to work on the background colour change of parent div until I see your comment! Boom! For the other who might run into a similar problem, do remember to APPLY THE ANIMATION TO ALL RADIO OPTIONS! And also thank you Joe for this detailed tutorial!!!

[@ziyingtan7668]

Also, for those who need a default "checked" checkbox, just go to the right-hand panel, setting->custom attribute-> press[+]button -> set [name] "checked" , [value] "true". There you go! PS. It seems even if you add a combo class "checked" to the "checked" checkbox (because I want the default one to be green) The class setting in animation (without "checked" class) still works perfectly : )

[@maxbach1150]

Awesome guys!! I used to build radio buttons to control my dynamic content within different categories on the site. So I also did it by fading the background color of my div blocks which works super well. It was a bit tricky to fade the text color which is a child of my button. But this also worked by using "only children with this class" instead of siblings. What I also rly like is just to add another class to my "all" button to design a default state when visiting the site. Thanks a lot for this tutorial and the comments. U rly helped me out here ;)

[@Finsweet]

So thrilled we could help!!! :)

[@OmerAviram]

Thank for the great video! Any chance this isn't working when using a CMS collection inside the Form element?

[@Finsweet]

You're welcome! It'd be best to post this on forum.webflow.com/

[@jferrara]

Great tutorial. But mine is broken. I can't separate actions with Siblings and All Class Items. If I switch one it changes all the states of my actions to match my most recent swtich. I am trying this with Opacity on an image.

[@filetmignon9978]

thats why he said to do the first animation inside the parent of one radio button, then the second one targeting the same element but in a separate radio button parent.

[@aloha2713]

Unfortunately it does not work. Webflow always changes both to either siblings or all.

[@filetmignon9978]

then you didn't do it right. It works for me