Animating SVG Icons? UI Animations with ShapeShifter! (Tutorial)
- December 20, 2023
- Posted by: MainInstructor
- Category: BASIC C Go Illustrator JavaScript
Video Title: Animating SVG Icons? UI Animations with ShapeShifter! (Tutorial)
Whoa that was pretty cool how do people do that or how about this one or how about I don’t know morphing Hannibal’s into each other hey everyone Gary Simon of course zetro so today we’re going to take a look at designing a custom SVG icon and then
Importing it into a 100% free web-based tool called shapeshifter dot design which is the actual URL which will allow us to animate it and export it as an SVG that we can then use in HTML and CSS to control the animation and determine when it starts and plays and all that cool stuff
All right so make sure you subscribe here if you haven’t yet on the YouTube channel and also check out corset row comm let’s get started all right so to get started you want to visit shapeshifter dot design and I the very first thing you need just to actually
Import something so you do that under import and then a vector per table drawable or SVG we’re gonna use SVG and that means we’re gonna have to use a design app of some sort something that’s capable of SVG vector graphics so I’m just going to use Adobe Illustrator
Though you could use anything else that gives you a pen tool and allows you to export SVG files and so just to get a you know I need an idea of what we want to do something that can be helpful is to check out material do four slash
Icons and you could do a search here for a specific icon if you want like I don’t know chat or something like that or you could just browse these for you know a million different ideas and so I my idea was to take this something very similar
To this chat bubble outline and kind of go from this to this and then to this alright so I showed you at the beginning of this video the one that we are doing and so just to demonstrate this again that’s what we want to achieve so I’m not going to actually use these
Because these aren’t actual Strokes these are kind of paths that have already been expanded and so you wouldn’t want to use those if you if you’re trying to achieve this particular effect so what we want to do is I’m going to open up illustrator and by the
Way before we get there just to show you real quickly get back here this is based on 24 by 24 pixel grid okay so we’re gonna set our document up to match that so we have pixels selected here so there’s going to be 24 by 24 right okay
So let’s I toggle our layers right here alright so the first thing I’ll do is to create the just the rounded rectangle if we just left-click once we can just choose something like 20 by 20 quarter radius we can change that as needed obviously 12 is way too much so I’m
Going out to here to around 2 and we’re gonna move this into place alright and then we’re going to drag this up just a bit and then we’re just going to modify this to have this little kind of triangle section down here so zoom up
Here and by the way this is only a one-point fill we’re gonna make it – there we go and now we can see with the direct selection tool selected here we have our two anchor points we’re gonna need to add another one and sometimes this is a matter of just playing around
With things to get the desired look so pen tool I’m going to put one right here to add an anchor point and then I’m going to take the direct selection tool select both of these hold shift and go down alright maybe right around there and Then I’m going to take this one and just delete it bring this down holding shift and then take the pen tool and then hover over this one right here and left click and then we’ll combine those and we’ll push this over with the direct selection tool so just take only this Anchor Point
Hold shift move it over and we’ll select everything these bottom four anchor points use the keyboard up arrow key and make sure it sits in there nicely yeah right around there actually I want to go a little bit higher alright so we’re at
20 by 18 I might want to get this in a little bit guy will make it 18 here by 16 that we have we have a lot of padding and room to work with here alright so that looks good to me and this is going
To be the starting point for us and it’s going to be the first SVG file that we import into shapeshifter so if you go to file save as you save it somewhere we’ll call this one we’ll just call this outline chat and then we’ll save as SVG right here so we get save
And this little blip will come up and make your settings match here and then just hit OK alright so now we’ll go back to shape shifter we’ll go to file and nope rather import SVG and we’re gonna go to file outline – chat there it is perfectly set in and ready to rock
Alright so we can notice that we have a timeline down here we kind of have an area where we have our layers and you can group things up and you can create clipping masks and all that stuff we’ll get to shortly and then properties are over here based on what you select in
The timeline and that’s pretty much it for the most part although there are some other sections that we’ll take a look at so you can notice we can select this actual the outline here and it gives us all the data that’s associated with it like the
Path data it gives you the fill color you can change all this stuff by the way and that’s what’s really cool it allows you to animate a lot of different of these properties and actually if you click on this animate this layer then these are everything these are all the
Properties that you can actually animate so like trim path end and start for instance if we put this to zero well it’s no longer there it’s invisible and that’s how you can begin to animate some of these things so for instance I’ll just show you I’ve click on our path and we animate
The trim path end and we put from value 0 to value 1 and by the way this is your timeline you could drag this and you see how it effects it shows the end time so you can just put that you can specify here or just drag it over here but if
You hit play look at that let me just deselect that now you can notice it’s really fast it’s probably showing up a little bit jagged because I’m not using a high FPS for this video but it says animation is 300 milliseconds if you click on that you can change that right
Here so we’ll change it to one second but just note the longer the animation is also based on whether you’re not you’re going to use the 30 FPS version or the 60 which we’ll get to later it will increase the file size quite a bit so let’s see here we’re back here and
This is currently 279 milliseconds you know if you want to change that to half a second you’ll see that it’ll go a little bit slower but that looks slick already so you can create these kind of cool outlines and obviously very easily and and fast but we’re not going to do
That so just delete one we just select down here in the timeline just delete it go back to our path and change this back to one and we’re right back where we started when we imported it okay so now what we want to do is we
Want to go from this to this and we can kind of you could do it a lot of ways really but we’re going to basically create kind of like a wave effect that rises and this is based on one of their demos that they had if you go to file
Demo and then choose the heart break one I think it was called you’ll see basically we’re going to do the same thing so it’s gonna kind of fill up I all the way so how would we do that well let’s go back to illustrator and I’m
Going to take our pen tool and I’m going to just click right around here and left click and drag out a bezzie a and two right there and then I’m just going to come down it doesn’t really matter exactly where I’m at yet but I’m just holding shift and I’m
Connecting everything up now this one will not have a stroke so we’re just going to hit zero there and it’s going to have a black fill all right so the starting point of this animation is actually going to be outside of the chaplet alright and it’s going to be
We’ll just say it’s down here actually we’ll squash it further all right so it’s gonna be real small like that now if we go back to our layers and you go to window layers by the way and we come over here what I want to do now is just
Delete this the original path and then I’m going to go to file save as and for now I’m just gonna make it anything because I’m not actually going to save this actually yes I am we’re just gonna call this fill and I’m gonna hit save
And by the way notice this SVG code if we click this it will pop up a text editor here where it shows you the code associated with this so the important part right here is this right here this path D equals these are all the coordinates that
Really make up the shape so we’re gonna be referring to this in a second so just note that and save this so now we can go back and we’re going to import an SVG and then our fill looks like crap doesn’t it so that’s expected though
What we want to do now is import a path here the same path from before so our outline chat and we’re going to by the way it’s it’s called by the way can I rename this well probably can I’m just being slow at the moment file yeah I
What we can do is up here for this path too which is this one right here the copy we click on this more options there and then convert to clip path all right so now anything after it I will only show up in this area all right so now
What we can do is we can animate this right here to grow essentially and we can change the path data property so what we’ll do is take this I little icon right there and we’ll choose path data so you’re gonna go from a from value we
Can see the whole thing right there from here which is the initial to something else so how do we change that well we’ll go back to our Adobe Illustrator back up here control Z and then I’m just going to drag this up oops up to here above just so that it will
Fully cover everything alright so now we can delete this file we’ll save as will overwrite it it doesn’t matter but we’re not and I’m not actually going to save it just hit yes here and then we can get our SVG code copy the path D property get out of there and hit cancel
We just back up a few times here and then go back and then paste this in here alright so it looks a little bit silly right now but if we find our path data where we’re at here okay it’s not showing up showing up all the way over
Here there you go if that happens just use I if you’re using Chrome hit ctrl and your scroll will scroll wheel to change the zoom settings so you can see everything this needs to be at the beginning so we’re gonna drag that so now we hit play now let’s look at it
Without that selected all right and that’s how you would do that okay so let’s make that a little bit further all right cool so now let’s do the actual lines and just to simulate with that I’m gonna go ahead and just die yeah we can hide that and then for the lines let’s
Go ahead and fill this with a black so that we can actually see what’s happening all right stroke we can just we need that now for the lines we’ll go ahead and use the line tool just coming out from the very left holding shift and we’ll make our
First line you know something right around there make it a two point fill of white oops not a fill we don’t want to fill all right so this needs to be white okay and you just want to get a setup you can use the direct selection tool to take
The anchor points and position it where you want it to be and then once you have that done we can go ahead and duplicate that so ctrl c ctrl F move it down with your keyboard arrow keys and we’ll take the direct selection tool move this in
With our keyboard arrow keys maybe one two yeah just twice and then replicate that process one more time control C control F move it down now this is too much distance between these so I’m just going I’m only going to make it one so move this up one and then this up one
Take our there we go alright so now we’re gonna go ahead to our layers here and I’m going to delete this one here and as well as this one and I’m also going to just temporarily delete the very bottom and middle and I’m going to save this
All right so ctrl shift + s to save and we’re gonna call this here line 1 and the reason I deleted those is because an SVG code it will include that stuff what you just don’t need so we’ll save that and then we’ll back up and then just
Back up twice the other ones that I want to delete so the first one that I kept would be this one so we can delete that delete this and this will give us the middle one so I’ll save that as line two and then we’ll back up and then delete
These two there may be a better way if there’s a better way of doing this let me know in the comments all right so now we have everything we just backup to get everything that we start up start it up with I started out with other and then
Now we can import those three files so if we import SVG line one two three all right so right now they’re hidden because it’s showing up after I the what he call the clip that we have so if I select them you’ll see that I accidentally exported the wrong one so
I’m just gonna go back and fix that real quick um this is the one that we want so I’ll go ahead and just delete all this this one that’s hidden alright so this is actually line three yep and save sorry about that import line three all right so now we select
These there we go all right so I’m going to take these here and I’m gonna move them up here each one needs move separately apparently all right so now they’re going to show up over and if I screw out here just a bit what we want
To do rather is take our path right here or a clip in this shape and let’s hit ctrl G to group those so now I believe we can take all those three and then it won’t be affected by that path I thought you had to move it up but if you just
Group them up there we go but we don’t want these right here right so we don’t want these to be show to show up at the very beginning instead what we can do is animate the trim path end portion right here so we’ll take the we’ll take each three of these so the
First one here let’s move this up so this is the first second and third so path three we’re gonna take that and path end will be 0 this one as well would be 0 and then this one will be 0 as well okay and then the point at which we want
Them to show up which is right around perhaps right here we can I’ll take this first one we’re going to animate the trim path end from zero to one all right and pull this out a bit so there we go so if we hit play cool that’s pretty good to me
And we’ll do the same thing so take this one for path for trim path end zero to one drag this over here and you could stagger the animation if you want all right and then finally same thing for the last one all right so we’ll drag this over yeah
Might as well take each one of these and drag them out a little bit more all right so let’s it play awesome so now what we can do is export it so you go to export by the way you can save these and they’re they’re custom files for a shape
Shifter so you can save them to your computer and edit them whenever you want later on and now we can just export these as either just SVG vector drawable animated vector drawable and you know these are some of these are specific to you know actual mobile apps formats but
SVG sprite sheet will actually export an HTML and CSS file with animation along with a SVG file that will contain all of the frames essentially so if we do that it’ll download a zip automatically and if we open that up let me it’s off screen let me drag this over here for a
Second all right you’ll see we have a 30fps version and a 60 so obviously the 60 would be smoother but larger and file size so you can see 89 Kb there may be a way to drastically reduce that by the way so I would look into that and then
What we can do is just double click on the HTML and we can see it right here so now you can see by default it doesn’t stay there but that’s based on CSS properties that you can actually modify yourself so let’s do that real quickly I’m going
To take those three files that are inside of the zip file that just downloaded that them and then put them into a new folder all right it just paste them here and a new folder right here that I will open up in a code editor and here we are alright so I’m
Using Visual Studio code by the way we check out the HTML all this is is just a with a class of shapeshifter and play and a background image set to the SVG all right so the SVG file of course is massive so you definitely want to take into consideration when you’re creating
These and if there’s something you know if you’re working with a project where speed is important so do what really makes this tick though is this sprite the CSS file basically so it’s very simple we have an animation up here called play 60 and it basically just changes the background position on this
Play right here so this play class simply adds the animation name which is what makes the animation play so if you wanted to make this something clickable or you wanted to be able to control when the animation begins based on you know JavaScript or some event then you could
Do that of course with JavaScript so just to show you how that would be done real quickly we can go to our HTML and hit control B to get rid of that sidebar and we’ll come down here after the div and we’ll put in script and we’ll just
Use vanilla JavaScript for this just basic plain JavaScript get element by ID and we’re going to give it an idea called button and then add event listener on click function all right inside of here will simply say this dot class list and we’re going to add a
Class called play so that means by default we’re going to remove this from the class and then also give an ID of button all right so we’ll save that I’m not done yet I’ve to go to our CSS file and let’s just I add a couple rule sets here
Padding-top 30 pixels let’s see here I want to get this centered up for us margin Auto and also let’s make it so that it doesn’t reset the animation so animation film mode will be forwards and that makes it so that the animation once it gets to the last frame it won’t reset
Itself alright and so it’s me cursor:pointer or as well alright and I think that would be good so now if I just right-click and reveal an explorer and double click on it and also zoom up my browser so we can see this much more like 500% click on it and there we go
Awesome stuff I so really I’ve only just scratched the surface of this shapeshifter tool there are other possibilities that where you can actually modify the shapes and it’ll more from two different shapes themselves and that’s something that will took it take a look at in another lesson alright so hopefully you found
That useful and if there are areas that are cuve improved let me know in the comments but otherwise give it a like and make sure you subscribe and I will see you guys soon all right bye
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
I need you to do a couple things. (1) Subscribe if you haven't, and (2) Give me a comment, even if it's to tell me that I'm horrible (on second thought, nevermind, be quiet!)
I have been searching for this. Thanks man
Can add this into my code ?
isn't it possible to animate it in Adobe itself?
Thanks Gary
the svg files are waaaay too massive. The export is garbage, couldve been way smaller. Nonetheless a cool tool, especially since its for free
Thank but convert to path disspared
if you had chosen .svg, where is the animation data stored? is css able to control the animation?
I need to transform an AF file into an SVG, but when I do that the "puppet" effect that I used doesn't work does anyone have any solutions?
Thank You Mr. Gary Simon. Appreciate your work.
Hey Gary.. Awesome tutorials you create, thanks for all your great work and sharing. Past weeks I've watched only your tutorials. Tip for ShapeShifter: To rename the layer, you select it and in top right you edit the name. It took me some time to figure that out.
can anyone hook a brother up with some good resources to do this in react native? im a noobie lolz
A very excellent tutorial. please make some more like these.
How can I change the size of the icon?
I try it but the animation is not works
When I import my design it gets stuck halfway through, is there a fix to this?
Incredibly useful.
Thank you so much for your kind help!
LinkedIn Instructor 😱
I found shapeshifter pretty clunky and unfinished. There are tools in After Effects that yield better results; Lotti.
Cheers.
You can also import you sketch files into the Flow app (which you can find here https://createwithflow.com/ ) and then use sketch artboards to create animations. You can then use the app to export the animation as a GIF, MOVIE, Animated PNG, Animated SVG, iOS code, Web code, react native code, or even LOTTIE.
Hi. Greetings from spain. Great tuto. This can be done even with font awesome svgs
Ding Dong the site is dead 🙁
Can you please give a list of plugin you are using in VSC, which showing auto complete of css, and javascript.
Have you tried svgator.com yet?
I was looking for this for a really long time, thank you so much!!
File size exports are too big :/
What do you guys think about http://www.svgator.com ? I think you can do more with it.
Great, thanks for this! I wanted to use this for icon animation when it comes to viewport, here are some plain JS for that:
var element = document.getElementById('btn');
var elementHeight = element.clientHeight;
document.addEventListener('scroll', animate);
function inView() {
var windowHeight = window.innerHeight;
var scrollY = window.scrollY || window.pageYOffset;
var scrollPosition = scrollY + windowHeight;
var elementPosition = element.getBoundingClientRect().top + scrollY + elementHeight + 200;
if (scrollPosition > elementPosition) {
return true;
}
return false;
}
function animate() {
if (inView()) {
element.classList.add('play');
}
}
That's a good result but to be honest, the workflow is simply terrible.
Maybe when some good developers create a tool to work with animations then it gets better.
Even if it was like a slide by slide animation like in Flash years ago, would still be better.
HOW TO RESIZE????
Clear + useful + valuable tutorial. Highly appreciated . Keep up the good work Gary!
Thanks for the video! Are there other application besides using Ai to accomplish this?
Icon with bigger-size :
In .shapeshiter's css
– change your wished size with "width" and "height" (in my case 24px to 48px)
– modify your "background-size" (in my case "6240px 48px" cause the width of my svg was "3120"
In @keyframes -> 100%
– play with the background-position's width (in my case was -3096px, switched it to -6192px)
If you see your icon's moving, it's because you haven't the good value. The faster your icon moves, the farther away you are from the right size !
can i use this for xml file i mea for android development im using android studio
Thanks allot for this tutorial.
You're one of my best teachers.
hi, sorry to ask this silly question, is it Adobe CC? coz I'm surprise on how you can change the corner radius so easy
Hi Gary, To export all svg shaps at once. just duplicate Artboard (Ex: 3 Artboards according to your work) and edit them. Go to File>Export>Export Screens – you will appear a window – Select the Artboards that you need to export > Select the SVG From Format and Path that you need to export > Export Artboard Button. Cheers.
Doesn't background-position cause repaints lowering performance?
✌😎✌👍
Awesome video, I have a question tho, how can I change the size of the animation? I mean it is h362 w362 and I need h80 w80