Animating SVG Icons? UI Animations with ShapeShifter! (Tutorial)

[@DesignCourse]

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!)

[@weshuiz1325]

review material.io plz

[@Holycrabbe]

watched this video: worked with SQL for some months, then watched it again - can really be recommended

[@IamEyalMarcosLevit]

Hi, thx for tut. You know you can just wrap the svg element with an element and link it to whatever you want instead of using javascript. I really recommend you use as little javascript as you can, because this is where svg's power really is.

[@abhishekrprasad]

@@IamEyalMarcosLevit can you please elaborate on how it is done, to get the same effect as in the tutorial by adding an , thanks in advance

[@mansaha9288]

you should use inkscape and 7zip, but nvm

[@aravindmj3723]

I think it's the only "tutorial" on ShapeShifter. Awesome work bro.

[@mohitsoni6986]

THIS IS AWESOME!!! Thanks for sharing it :) You can also design various elements of this icon in different layers respectively in illustrator and save it as svg, go to shape shifter and import the same, you'll find same layers over there. You need not to import again and again in shape shifter for each element(s). Though, your work is truly above and beyond. Thanks!

[@anthonypenna476]

I did a couple of things: - Subscribe - Liked - Left a comment - Told you you are awesome On a second thought, I haven't told you you are awesome yet. You're awesome Gary!

[@will9301]

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 !

[@gebozinhomalvado9086]

Did you manage to grasp full control of it? I've played around with those properties before reading your comment and all I've managed to do was distort and "cut" the bottom of my animation

[@gebozinhomalvado9086]

Better question: where is your background-size at? I don't have it

[@gebozinhomalvado9086]

OK never mind, I added the property, scaled the width according to the height using a graphics program and got it working at first try. Thanks!

[@gmerggo4362]

Thank you very much for this !

[@michals3089]

thank you soo much!

[@arthurprather6720]

5:48 -- for AI users... Be sure to "export > export as" to save SVG. instead of "save as" which will save curvature line not SVG. : )

[@flaviudsi]

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.

[@npnp6240]

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.

[@niner8275]

Didn't know of shapeshifter yet, nice tool. I think the only reason the SVG has become so big is that you animated the path which creates 60 or 30 variants of it per second. I remember this from the old Flash days when morphing shapes was always a big resource hog in terms of file size. And this may also be the only reason for having "30fps" and "60fps" versions, because every frame represents a distinct SVG shape. If shapeshifter could animate transforms (which it seems it doesn't right now), the file size would drop to a very small fraction. So file size again is the price you pay for wysiwig.

[@rajesht9702]

Thank You Mr. Gary Simon. Appreciate your work.

[@oneavi]

Clear + useful + valuable tutorial. Highly appreciated . Keep up the good work Gary!

[@cseymour97]

You could also select them all and export as SVG and it will export them individually

[@liamuk7]

Very useful, would love to see more of these!

[@LazyBearHQ]

I have been searching for this. Thanks man

[@jotajaviergonzalezgarcia7504]

Hi. Greetings from spain. Great tuto. This can be done even with font awesome svgs

[@13thdisciples28]

Thanks dude. You are helping me build my career bit by bit.... You are a good man. God bless you.

[@qianbang_]

demit. I need to sleep.. These tutorials make my curious self awake -_-

[@DommyAngka]

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

[@mohamedfariz]

ShapeShifter is Awesome & Your Tutorial made it so simple

[@whatthefunction9140]

if you had chosen .svg, where is the animation data stored? is css able to control the animation?

[@יהונתןאלטמן-ז1ב]

Thanks allot for this tutorial. You're one of my best teachers.

[@thecoderabbi]

Thanks Gary

[@trevorohara-oates4710]

For anyone who may be running into the problem of the vector not animating, I have found the reason why. I was trying to use this method to make an SVG animation with text but what I came to find out is that the SVG wouldn't animate from start to end. The reason for this is because the SVG path does not have the stroke aligned to the center. For this tutorial to work, the stroke MUST be alligned to the center to actually do any animation.

[@PhilipHarperGraphicDesign]

THIS IS BRILLIANT

[@pritampatil91]

A very excellent tutorial. please make some more like these.

[@gamingforever4587]

Can you please give a list of plugin you are using in VSC, which showing auto complete of css, and javascript.

[@mammlouk]

Thanks a lot for covering this. I hadn't seen Shapeshifter before. Looks like it is even Open Source which is great news! I wonder if they'll eventually add a Desktop version so that I can run it offline without having to serve it up via localhost.

[@aIexjI]

Jeremy Coleman Creator of ShapeShifter here! Assuming you've navigated to the page once before, you should be able to navigate to the page even without a network connection. Turn off your WiFi and see for yourself. :) Feel free to file a feature request on GitHub too if you still think the desktop version would be useful! github.com/alexjlockwood/shapeshifter

[@mammlouk]

@Alex Lockwood - Thanks for the response! Nice to hear it will work offline after caching the application. As a Linux user and also as someone who very often finds myself with constrained internet access on different corporate systems I will always find value in a standalone application. It is one of the things that a I really appreciate from the Gravit Designer team. Providing an zip based download for Windows and a .gz, Snap, or AppImage for Linux makes a big impact on whether I am able to use an application regularly in my workflow. I also think that packaging for Linux would be a great way for you to increase app visibility and useage. Linux guys go crazy over high quality open source software that fills gaps left by commercial vendors who refuse to build fully cross-platform applications. I'll try to remember to submit a feature request when I have some time in the next week.

[@bizhanbazhirov2404]

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

[@bensonmwaura9494]

Excellent insights! adding this to my creativity toolkit.

[@meza_jsx]

How can I change the size of the icon? I try it but the animation is not works

[@Nic-xu9pu]

Can you use after effects to animate the icon, will it still be responsive

[@armagan7417]

Regardless of the tool that you used, SVG will always be responsive. It's named as Scalable Vector Graphic for a reason ^^

[@Pankaj-Verma-]

Incredibly useful. Thank you so much for your kind help!

[@zael7848]

I was looking for this for a really long time, thank you so much!!

[@speedtnt7591]

isn't it possible to animate it in Adobe itself?

[@RindraParama]

i try this, and it's make my svg's file size from 2kb to 267kb @60fps. is svg animation file size can't get any smaller? btw, it's a nice tutorial

[@mtcindianutube]

Great insight to svg animation, thanks a lot

[@mounir101]

Great today's video, has 0 dislike. thanks a lot man.

[@DesignCourse]

Immediately after you said that, someone just had to click dislike. ;) Thanks for the comment though!

[@rebarius]

Now the Fog disappeared :D great video again! Thanks 💪🏼

[@jamesharrison4272]

Adobe Illustrator knowledge is a prerequisite for this video. Stack developers that do not have an adequate proficiency level with Ai will struggle and should either learn Ai first or move on because it will be difficult to follow along. I bailed, too much on my plate to hunt and peck around in Ai CS6 to find either from menus or keyboard short cuts how you were manipulating /creating icons. Looked as if it could have been useful though.

[@ColinsMatas]

file size is very big problem...i think not much scenario are applicable if the fileszie are not greatly reduced.

[@stevenkennedy8609]

How would you compare the optimization of something animated in this tool versus a tool like greensock? It's clearly easier, but I'm wondering if the code size would be bigger.

[@remanentecatolico]

Great, do you know a software to do it exactly like that? I mean it makes a svg file and only use it in html as easy as your video shows. And do you know if it is possible to do it in animate cc without using javascript?

[@andrerothweiler9191]

Lol, I always thought it was animated with CSS. Now I am happy to know, that there is an easier alternative.

[@easyluckable]

Cool, now SVG animation is much easier to do.

[@ГригорийХовер]

There is plenty of fancy tools to do that. Also coding it yourself is really interesting!

[@toybeaver]

@@ГригорийХовер The best one I could find is one called Spirit but it's paid which is just a serious drawback for a lot of people. I prefer coding it myself, but this shapeshifter can really come in handy :p

[@panayiotispavlides2148]

thank you so so much! this is such a good tutorial

[@leticiac1998]

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?

[@ColinsMatas]

love your videos!!! i can understand even i never tried using AI

[@dovilekirdeikyte1965]

When i'm checking SVG code, I dont find Path d=... Is it because I'm using older AI version? Or I'm doing smth in wrong way?

[@NickyKeyse]

Great video on shape shifter, I didn't know about it. Thanks. Is there a way to make the exported icon larger? If I just adjust the width and height in the css file .shapeshifter class I just get repeated icons. Thanks in advance for any help.

[@jojo_Ca]

Same here, been trying to figure that out too...

[@will9301]

Did you success ?

[@dimitridehouck9506]

Quick question, I'm not into Javascript yet. But can't you just use CSS for the button to click? Like :focus or something?

[@adriangonzaloprialecordova8321]

You only need to change the .play with :focus

[@karinakozinsky741]

You could export all lines as a group and flatten the group in shapeshifter

[@alexander-van-aken]

How could I, for instance, trigger another animation. Lets say this animation you made starts in the center of a white bg and once clicked, it slides up and a svg line pops and bends from the bottom up revealing the page content all without refreshing the page. Once clicked another menu item, the animation reverses and forwards again without reloading the page.

[@alexandprivate1]

Great video man! well done!

[@Shiwoen]

Cool. I was just planning on making some animated SVG Icons. Thank you for the video. Though, shapeshifter seemed to distort the paths of my imported SVG. I didn't have this issue if i imported the same file into svgator.

[@aIexjI]

Shiwoen do you mind creating an issue on GitHub so I can fix the issue? Just copying/pasting the svg text and posting that will help a ton! :) github.com/alexjlockwood/ShapeShifter/issues

[@Shiwoen]

Alex Lockwood Sure thing, I'll take care of it later today.

[@PaulMcCannWebBuilder]

I had high hopes for shape shifter until I saw it animates for the web with frames and steps, rather than doing the math to animate the paths (the way a javascript solution like Greensock would do). Although it is a great solution for Android and I certainly appreciate the work Alex has done and it deserves some support - github.com/alexjlockwood/ShapeShifter Great tut, with some nice tricks though. The sprite sheet export solution might be good for designers who need to quickly prototype animations, or for animations that would work well as frame-by-frame - they'd be scalable and smaller than a gif alternative. I hope someone smarter than me could help add features for better web-based exports: Animating simple properties like color, stroke, and trimPath (with the dash offset trick) are easily done in CSS, without needing to make a frame for each step. The clip path that clips the individual frames are fixed pixel dimensions that make it hard to make responsive, although some sort of transform:scale() trick or editing the svg's viewport would work.

[@nepalcodetv6298]

we need more on SVG ICONS

[@ctx4241]

Is there a way to use either spritesheet or any other export option for JavaFX?

[@clickrad]

does this work in figma?

[@paxwebb]

I made my animation way too big. How can I control the size in the code? (or scale the animation in shapeshifter). Great videos btw, I subscribed :P

[@juliosoto9471]

Probably with the SVG viewport. In your code.

[@RomboutVersluijs]

Why not delete the point with the pen tool, save you extra clicks :) Nice tut by the way!

[@nepalcodetv6298]

Where is another corse love this one..

[@soul.rebel1986]

Thanks for the video! Are there other application besides using Ai to accomplish this?

[@jundeleon8704]

inkscape is a good one

[@soul.rebel1986]

@@jundeleon8704 I'll look into that, I appreciate the info :)

[@mackry]

Doesn't background-position cause repaints lowering performance?

[@well7573]

Extremely helpful! Thanks

[@nielshgh4036]

Hey man! Great tutorial! I just can't figure out how to make that button ('btn') work. I've literally tried everything ( i think ). I've follow u step by step, and even copied your code from begging to the end. Can you please help me out?

[@DesignCourse]

I would submit your code to stackoverflow or one of the other sites in that niche.

[@netanelmad]

Great video, thanks!

[@Synkto01]

Dude! amazing tutorials ty!!!

[@bbenz9750]

Thanks for the tip. Sure helps to save time.

[@rapundercover3292]

When I type in the d="xx" code and pass it to the toValue, than it shows me an "Paths are incompatible. Auto fix or click the edit path morphing animation button above" error. Can somebody help me?

[@robertcieslinski4042]

is there an option to save as one SVG file with animation without sprites?

[@dineshjayathunge9943]

Is it possible to do the same animations using the SVG icons from the material-icons page?

[@Faizahbey]

Can add this into my code ?

[@minamulhaq]

Wow. Great man

[@winterlovers5756]

That's great tutorial, thank you men 😀😀

[@andregabriel5246]

Thanks, dude!

[@-Pavankalyan-dw1ew]

Thanks for your tutorial. Can you make video on group of icons at the same . What I mean is adding and removing of class of icons on click. It will be very useful .

[@_arjun991]

Great Sir... Thanks

[@renzviana6591]

can i use this for xml file i mea for android development im using android studio

[@HyperActive94]

great video thanks a lot

[@skapha]

great video! i want more! : )

[@buuqmarabo2778]

thanks for your help.

[@395implants5]

seems so cool, but for some reason it does not animate anything i am doing, not sure why

[@incyphe]

90KB.. ouch. I think you're better off using Lottie and bodymovin if you have access to After Effects.

[@DesignCourse]

incyphe I'm fairly certain this can be much more optimized. I'll look into it

[@aIexjI]

I was inspired by your comment and ended up reducing SVG spritesheet exports by about 44% on average. Will deploy a new release soon. I'm the one who made shape shifter btw if that isn't obvious :p twitter.com/alexjlockwood/status/992241261598855168?s=19 Also about Lottie... Yeah, definitely more powerful... You can do tons of crazy stuff. The bodymovin file will most likely be more than 90kb though. :) It also requires you to know after effects (and to pay a $500 annual subscription to use it). This was kind of the main reason why I started making shape shifter... A free open source tool that can run in your browser (although I acknowledge I will probably never be able to compete with adobe... its been mainly just me working on Shape Shifter up until this point :D).

[@aIexjI]

FYI, I just deployed the fix at shapeshifter.design (lmk if you see a difference in file size!)

[@GustavoSilva-kr6pi]

How to reverse the animation when click on X

[@jevoscure]

good question

[@JamesWelbes]

Have you tried svgator.com yet?

[@squirrelwise]

Great video. Thank you so much

[@DesignCourse]

Welcome!

[@oemeraran8183]

There are no 3 dots in my example to use "Convert to clip path" 11:50...

[@Beyond-30]

same here, I'm facing the same problem. I couldn't find this option anywhere!

[@rohitsagar9011]

You are awesome .

[@milosp.551]

Awesome! Thank you for this video! You are king! :D

[@jayn2149]

How can we do this with letters?

[@VideoNOLA]

Couldn't find a "Delete" button anywhere in the ShapeShifter UI, so you end up with a bunch of aborted paths and stuff. Interested to fiddle with the beta version, which adds a tool palette (but still no "Delete" button, lol).

[@SapumalMoragoda]

Thanks bro.

[@dartsgame_]

Thank but convert to path disspared

[@mirjamkuhl]

Cool, but I can't figure out how to loop the svg animation in the browser without a button click. Would like to learn ;-)

[@gebozinhomalvado9086]

Probably too late, but you can do that with CSS3. Add this to your .shapeshifter.play block: animation-iteration-count: infinite

[@joebertsembrero6092]

where's the svg file?

[@stevegoodjob5902]

Thanks for the Sheep 🐑 shifter lol great tut

[@TEJASKESARIA]

Awesome

[@IfIgetsubsIllGobacktomyfamily]

When I import my design it gets stuck halfway through, is there a fix to this?

[@animotu_editorial]

kzbin.info/www/bejne/ZoqvZ3SugJybjaM

[@gvsakhil143]

Why don't u add the files so that it makes people to use them when they don't have Illustrator installed at that moment... Thanks for the great tutorial

[@falfiya]

Good stuff, I tell you!