Animating SVG Icons? UI Animations with ShapeShifter! (Tutorial)
HTML-код
- Опубликовано: 15 сен 2024
- Ever wonder how designers animate their icons? They may have used a tool called shapeshifter.de... -- which allows you to import SVG graphics and animate them based on a timeline. In this tutorial, I'm going to show you how to do exactly that while we create our own SVG icon and animate.
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!
My site: designcourse.com
My personal FB account: logodesi...
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi!
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!)
review material.io plz
watched this video: worked with SQL for some months, then watched it again - can really be recommended
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.
@@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
you should use inkscape and 7zip, but nvm
I think it's the only "tutorial" on ShapeShifter. Awesome work bro.
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!
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!
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.
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 !
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
Better question: where is your background-size at? I don't have it
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!
Thank you very much for this !
thank you soo much!
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. : )
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.
You could also select them all and export as SVG and it will export them individually
demit. I need to sleep.. These tutorials make my curious self awake -_-
I have been searching for this. Thanks man
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.
Clear + useful + valuable tutorial. Highly appreciated . Keep up the good work Gary!
Thank You Mr. Gary Simon. Appreciate your work.
Hi. Greetings from spain. Great tuto. This can be done even with font awesome svgs
Very useful, would love to see more of these!
ShapeShifter is Awesome & Your Tutorial made it so simple
Thanks dude. You are helping me build my career bit by bit.... You are a good man. God bless you.
Thanks allot for this tutorial.
You're one of my best teachers.
Thanks Gary
Now the Fog disappeared :D great video again! Thanks 💪🏼
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.
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.
Great today's video, has 0 dislike. thanks a lot man.
Immediately after you said that, someone just had to click dislike. ;) Thanks for the comment though!
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.
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
@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.
Excellent insights! adding this to my creativity toolkit.
Incredibly useful.
Thank you so much for your kind help!
A very excellent tutorial. please make some more like these.
if you had chosen .svg, where is the animation data stored? is css able to control the animation?
I was looking for this for a really long time, thank you so much!!
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?
Can you use after effects to animate the icon, will it still be responsive
Regardless of the tool that you used, SVG will always be responsive. It's named as Scalable Vector Graphic for a reason ^^
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?
Lol, I always thought it was animated with CSS. Now I am happy to know, that there is an easier alternative.
How can I change the size of the icon?
I try it but the animation is not works
Great insight to svg animation, thanks a lot
file size is very big problem...i think not much scenario are applicable if the fileszie are not greatly reduced.
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?
thank you so so much! this is such a good tutorial
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.
THIS IS BRILLIANT
Can you please give a list of plugin you are using in VSC, which showing auto complete of css, and javascript.
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!
@@user-rt1et3zw1d 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
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.
we need more on SVG ICONS
love your videos!!! i can understand even i never tried using AI
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
You could export all lines as a group and flatten the group in shapeshifter
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
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
Great video man! well done!
Extremely helpful! Thanks
Thanks for the tip. Sure helps to save time.
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?
That's great tutorial, thank you men 😀😀
Doesn't background-position cause repaints lowering performance?
Dude! amazing tutorials ty!!!
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.
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
Alex Lockwood Sure thing, I'll take care of it later today.
Awesome! Thank you for this video! You are king! :D
Is there a way to use either spritesheet or any other export option for JavaFX?
Is it possible to do the same animations using the SVG icons from the material-icons page?
is there an option to save as one SVG file with animation without sprites?
Great video, thanks!
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 .
Quick question, I'm not into Javascript yet. But can't you just use CSS for the button to click? Like :focus or something?
You only need to change the .play with :focus
isn't it possible to animate it in Adobe itself?
Why not delete the point with the pen tool, save you extra clicks :) Nice tut by the way!
can i use this for xml file i mea for android development im using android studio
Great Sir... Thanks
Great video. Thank you so much
Welcome!
How to reverse the animation when click on X
good question
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.
thanks for your help.
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.
Same here, been trying to figure that out too...
Did you success ?
Where is another corse love this one..
great video thanks a lot
There are no 3 dots in my example to use "Convert to clip path" 11:50...
same here, I'm facing the same problem. I couldn't find this option anywhere!
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?
I would submit your code to stackoverflow or one of the other sites in that niche.
great video! i want more! : )
Thanks, dude!
Wow. Great man
Thanks bro.
Thanks for the Sheep 🐑 shifter lol great tut
seems so cool, but for some reason it does not animate anything i am doing, not sure why
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
Probably with the SVG viewport. In your code.
You are awesome .
When I import my design it gets stuck halfway through, is there a fix to this?
ruclips.net/video/0YL6AxK7hWA/видео.html
How can we do this with letters?
Cool, but I can't figure out how to loop the svg animation in the browser without a button click. Would like to learn ;-)
Probably too late, but you can do that with CSS3. Add this to your .shapeshifter.play block: animation-iteration-count: infinite
does this work in figma?
wow thanks!
Have you tried svgator.com yet?
90KB.. ouch. I think you're better off using Lottie and bodymovin if you have access to After Effects.
incyphe I'm fairly certain this can be much more optimized. I'll look into it
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).
FYI, I just deployed the fix at shapeshifter.design (lmk if you see a difference in file size!)
Awesome
Thank but convert to path disspared
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
LinkedIn Instructor 😱
Can add this into my code ?
How to click to reverse the animation?
codepen.io/Mostafa_Abobaker/pen/LmzYdm
It's easy, just use "animation-direction: reverse;" in css
Good stuff, I tell you!