Create an Interactive Splat Animation in SVG
HTML-код
- Опубликовано: 29 сен 2024
- Splat - it's the new click!
Chris explains the process of making an interactive splat animation for a radio button using SVG, GreenSock and a whole load of goo.
In it he covers the Export function from Adobe Illustrator, the DrawSVGPlugin from GreenSock, the goo SVG filter effect (blur and contrast) and highlights some gotchas.
Below are links to some references in the video
The original pen:
codepen.io/chri...
The pen I made during this tutorial:
codepen.io/chri...
The Adobe Illustrator source file:
s3-us-west-2.a...
GSAP paid plugins (you can play with these free on CodePen):
codepen.io/Gree...
You don't need this reverse path script for this tutorial but it's useful anyway:
illustrator.hil...
Likes vs Dislikes ratio says it all
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!
22:05 to 20:10
I'm vocalizing the animation!
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.
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.
You are a gosh darn wizard.
Thank for this tutorial - Really clear and inspiring!
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.
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 👍🏼
thanks thanks thanks
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.
That's an excellent tutorial. Thanks for taking the time to do / share.
Paul Knight You're very welcome
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!
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!
this tutorial is so amazing :D
Great vid and clear voice which is at its minimum of all time in the last 3 youtube years :)
Awesome Tutorial
Great tutorial!
Welcome back Chris Gannon!! where ya been?
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
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. ;)