Create An Animated Radio Button Using GreenSock’s Cycle Feature

[@tomrishworth8317]

Great tutorial, very easy to follow. Thanks a lot!

[@Ihatetomatoes]

The master is back! Thanks for the tutorial Chris.

[@framespark]

Not as polished as yours but they're getting better (slowly ;)

[@Ihatetomatoes]

+Chris Gannon it's not about the polishing, your content is always very useful.

[@chino01animation]

+Chris Gannon your videos are very helpful. Thanks for the effort sharing your workflow.

[@framespark]

Great to hear!

[@marlonmarcello]

That's great Chris, thanks man.

[@deanhidri1822]

great tut. a lil suggestion, as you already told. for the menuId I would set data-menuid="$". I think they also work cross-browser.

[@framespark]

Good to know thanks!

[@pauldavis7099]

Hi Chris. Thank you for the awesome tutorial. Any chance you could post a part 2 that shows how you get the color background to switch to the next button?

[@bmus8008]

Very very helpful!!

[@clockwerkz]

Hi Chris, I'm really digging your tutorials on svg.. I'm just getting started on learning it, so your channel will be super helpful!. I'm curious as to why you start your javascript with variables set to "www.w3.org/2000/svg"? If you cover that in one of your videos if you could point me to it that would be awesome. Thanks!

[@framespark]

That's a good question and one I hadn't considered explaining. When you dynamically create an SVG element, like a use tag or circle you use the _createElementNS_ method (create an element using a namespace). The constructor requires the XML namespace as well as the tag type. So if you want to dynamically create a circle you'd write: _var myCircle = document.createElementNS("**__www.w3.org/2000/svg**__", "circle");_ Similarly if you do the same thing for a use tag you need to create it and then set its _xlink:href_ attribute (the element that is its 'source'). So you write: _var myEl =document.createElementNS("**__www.w3.org/2000/svg**__", "use");_ _myEl.setAttributeNS("**__www.w3.org/1999/xlink**__", "xlink:href", "#sourceCircle");_ I always start with a template pen which contains them because I do a lot of dynamic element creation and I don't want to keep typing them!

[@clockwerkz]

Wow, interesting.. I've never heard of createElementNS. So this is if you're dynamically creating an svg object in code? If you copy and paste an SVG image from Illustrator you wouldn't need to do this, correct? Thanks for explaining what it is!

[@framespark]

Correct - if you copy graphics into the SVG tag from AI then you wouldn't really need the variables. However if you wanted to, say, create 100 particles that all reference one circle then you would run through a do...while... loop and dynamically create those elements that way. It would be pretty painful (and pointless) copying all those in from AI.

[@clockwerkz]

Thanks!

[@muhammadathar3524]

Boyoboyoboyboyoboyboy!!! AMAZING!

[@mltumz5095]

great tuts can u set your pen to public so we could see it :D if you dont mind

[@framespark]

Which pen?

[@mltumz5095]

this one

[@framespark]

+Marlon Tumala URL is in the description!

[@mltumz5095]

thanks gannon :D

[@framespark]

+Marlon Tumala Please remember to include the license and link to original pen if you use it for anything. License can be found here codepen.io/chrisgannon/details/EyaPZZ