Ok fair point. I suppose these tutorials and demos are aimed at explaining a trick or a animation method or idea. They're not really on how to use the basics of GreenSock (which I incorrectly assume viewers are familiar with). Noted!
Chris, thanks for sharing your techniques. At 14:18 you mention that you often need the xml namespace for dynamic content. Any chance you could do a tutorial on using svgs and greensock in dynamic content?
Paul Davis I could do yeah although I’ve found dynamically creating SVG elements can be problematic across browsers. I tend to hand write raw shapes in the tag and then use cloneNode (a JS method) to create copies. This way seems much more stable and involves less code.
I love the level of detail you go into on your channel. I feel pretty comfortable coding and using GSAP, but can't wrap my head around how you drew those paths evenly from the center (without slowly adding the offset degrees and roughly producing similar lengthened paths)?
I draw everything in Adobe Illustrator and the splat lines are created by applying the Effect > Distort & Transform > Transform effect to just one path/line and making 7 Copies and rotating them around a central origin.
+Kyriakos Kokkinos I've animated lots of SVG logos and they all require different treatments. However I always use GreenSock because it's the best tool for SVG animation IMO.
hey bro which version of AI are you using ? mine its 17.1.0 and do not have the export selection option :( do you use an extra plugin for it ?, nice tutorials by the way !! :D
Great tutorial - quick question for Chris or someone else here: I have an SVG icon that I like.. I open it in Illustrator and then copy the SVG code from the Export window (show code) which I paste into CodePen's HTML. However, mine shows up as
Alain Patry FYI You can animate a path in the same way as line or polygon or circle. To answer your question it's no longer practical (IMO) to copy/paste now that AI has its new Asset Export panel. Use that and your native shapes will stay native on export and it also generates much cleaner SVG code. I guarantee once you manage to weave Asset Export into your workflow your production speed will increase (but you do end up with thousands of individual SVG files).
Thanks Chris - did not know about the Asset Export panel. So if you don't use the "Show Code" feature anymore, what do you do once you've exported the SVG and need the code for CodePen? Do you open the SVG in a browser and do ViewSource? What's your workflow after exporting the asset to get the code into CodePen? Also, the icon files I'm opening up in AI are just a compound path on the layer - maybe that's why they are not animating using the technique shown here. Do I need to convert the compound path to something else?
Alain Patry Sorry missed this question. My workflow is the same. I just export an SVG and open it in a text editor. When I overwrite it it just updates in my text editor. The output is cleaner using Export Panel and the IDs are as intended.
Thanks Chris! Great work on the tutorial! Learned a trick or two. Need more of this!
Thanks - yes there aren't enough SVG resources around. I'm trying to fix that!
Very nice tutorial. Thank you very much for sharing, Chris!
I am still beginning to start with svg and your tut is a very good starting point!
Nice to hear you found it useful 👍🏼
best tutorial ever..just wished you could explain the green sock code a little more.
Ok fair point. I suppose these tutorials and demos are aimed at explaining a trick or a animation method or idea. They're not really on how to use the basics of GreenSock (which I incorrectly assume viewers are familiar with). Noted!
Great vid and clear voice which is at its minimum of all time in the last 3 youtube years :)
That's an excellent tutorial. Thanks for taking the time to do / share.
Paul Knight You're very welcome
Thank for this tutorial - Really clear and inspiring!
Welcome back Chris Gannon!! where ya been?
Likes vs Dislikes ratio says it all
Chris, thanks for sharing your techniques. At 14:18 you mention that you often need the xml namespace for dynamic content. Any chance you could do a tutorial on using svgs and greensock in dynamic content?
Paul Davis I could do yeah although I’ve found dynamically creating SVG elements can be problematic across browsers. I tend to hand write raw shapes in the tag and then use cloneNode (a JS method) to create copies.
This way seems much more stable and involves less code.
You are a gosh darn wizard.
Awesome Tutorial
Great tutorial!
this tutorial is so amazing :D
I love the level of detail you go into on your channel. I feel pretty comfortable coding and using GSAP, but can't wrap my head around how you drew those paths evenly from the center (without slowly adding the offset degrees and roughly producing similar lengthened paths)?
I draw everything in Adobe Illustrator and the splat lines are created by applying the Effect > Distort & Transform > Transform effect to just one path/line and making 7 Copies and rotating them around a central origin.
This tutorial is absolutely great, but holy heck your devil-may-care attitude to code indentation breaks my heart and makes my eye twitch, haha!
wwklnd Ha well I just but the 'Tidy' button at the end and hope for the best!
Chris Gannon As long as the end result looks neat and doesn't leave anyone maintaining messy code, I'm happy. ;)
Would you use the same method to animate an svg logo? I'm thinking of creating a 1second logo animation to serve as a preloader on my portfolio.
+Kyriakos Kokkinos I've animated lots of SVG logos and they all require different treatments. However I always use GreenSock because it's the best tool for SVG animation IMO.
Chris Gannon Thanks for the speedy reply Chris! I'll keep greensock in mind!
hey bro which version of AI are you using ? mine its 17.1.0 and do not have the export selection option :(
do you use an extra plugin for it ?, nice tutorials by the way !! :D
I think the SVG export functionality came in Adobe Illustrator CC 2015
+Chris Gannon ohhh :( thank you.
Great tutorial - quick question for Chris or someone else here: I have an SVG icon that I like.. I open it in Illustrator and then copy the SVG code from the Export window (show code) which I paste into CodePen's HTML. However, mine shows up as
Alain Patry FYI You can animate a path in the same way as line or polygon or circle.
To answer your question it's no longer practical (IMO) to copy/paste now that AI has its new Asset Export panel. Use that and your native shapes will stay native on export and it also generates much cleaner SVG code.
I guarantee once you manage to weave Asset Export into your workflow your production speed will increase (but you do end up with thousands of individual SVG files).
Thanks Chris - did not know about the Asset Export panel. So if you don't use the "Show Code" feature anymore, what do you do once you've exported the SVG and need the code for CodePen? Do you open the SVG in a browser and do ViewSource? What's your workflow after exporting the asset to get the code into CodePen?
Also, the icon files I'm opening up in AI are just a compound path on the layer - maybe that's why they are not animating using the technique shown here. Do I need to convert the compound path to something else?
Alain Patry Sorry missed this question. My workflow is the same. I just export an SVG and open it in a text editor. When I overwrite it it just updates in my text editor. The output is cleaner using Export Panel and the IDs are as intended.
22:05 to 20:10
I'm vocalizing the animation!
Good tutorial but I think you should talk faster.
Muhammed Eren Özyürür I speak more slowly because some viewers don't speak English as their first language.
add video speed controller extension to your browser
Sir, you do not understand my intention, I mean, +Muhammed Eren Özyürür not you I apologize for that
mohamed ali I realised my mistake and removed it. Sorry about that!
Haha no problem you have a fun day go and creative