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

I will even show you how to export it and use a little bit of JavaScript to make the animation take place upon a click event.

Enjoy this tut? Leave a comment and subscribe!

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS weekly!

^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Come to my discord server or add me on social media and say Hi!

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

[aravindmj]

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

[arthurprather]

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. : )

[mohitsoni]

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!

[cseymour]

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

[niner]

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.

[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.

[will]

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 !

[npnp]

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.

[rajesht]

Thank You Mr. Gary Simon. Appreciate your work.

[oneavi]

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

[qianbang_]

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

[anthonypenna]

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!

[liamuk]

Very useful, would love to see more of these!

[jotajaviergonzalezgarcia]

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

[LazyBearHQ]

I have been searching for this. Thanks man

[thdisciples]

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

[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.

[mohamedfariz]

ShapeShifter is Awesome & Your Tutorial made it so simple

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

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