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!)
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.
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!
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!
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
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.
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.
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.
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.
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.
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.
@@ГригорийХовер 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
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?
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.
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.
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.
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?
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
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.
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?
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 .
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).
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).
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'); } }
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
![[Android] Анимации (2021)](http://i.ytimg.com/vi/VvK1CxHCYXc/mqdefault.jpg)
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.
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!
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!
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!
Thank You Mr. Gary Simon. Appreciate your work.
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.
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.
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. : )
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.
demit. I need to sleep.. These tutorials make my curious self awake -_-
Hi. Greetings from spain. Great tuto. This can be done even with font awesome svgs
Clear + useful + valuable tutorial. Highly appreciated . Keep up the good work Gary!
I have been searching for this. Thanks man
You could also select them all and export as SVG and it will export them individually
Thanks dude. You are helping me build my career bit by bit.... You are a good man. God bless you.
ShapeShifter is Awesome & Your Tutorial made it so simple
Very useful, would love to see more of these!
A very excellent tutorial. please make some more like these.
Thanks allot for this tutorial.
You're one of my best teachers.
Incredibly useful.
Thank you so much for your kind help!
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.
Excellent insights! adding this to my creativity toolkit.
Thanks Gary
Lol, I always thought it was animated with CSS. Now I am happy to know, that there is an easier alternative.
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!
Great insight to svg animation, thanks a lot
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.
love your videos!!! i can understand even i never tried using AI
I was looking for this for a really long time, thank you so much!!
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.
THIS IS BRILLIANT
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!
@@ГригорийХовер 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
thank you so so much! this is such a good tutorial
if you had chosen .svg, where is the animation data stored? is css able to control the animation?
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?
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?
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
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?
Can you please give a list of plugin you are using in VSC, which showing auto complete of css, and javascript.
Great video man! well done!
Thanks for the tip. Sure helps to save time.
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.
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.
You could export all lines as a group and flatten the group in shapeshifter
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 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, thanks!
Extremely helpful! Thanks
How can I change the size of the icon?
I try it but the animation is not works
file size is very big problem...i think not much scenario are applicable if the fileszie are not greatly reduced.
That's great tutorial, thank you men 😀😀
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.
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
Great video. Thank you so much
Welcome!
Dude! amazing tutorials ty!!!
we need more on SVG ICONS
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?
Awesome! Thank you for this video! You are king! :D
Wow. Great man
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
thanks for your help.
Great Sir... Thanks
Is there a way to use either spritesheet or any other export option for JavaFX?
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.
Is it possible to do the same animations using the SVG icons from the material-icons page?
Thanks, dude!
Why not delete the point with the pen tool, save you extra clicks :) Nice tut by the way!
great video! i want more! : )
You are awesome .
is there an option to save as one SVG file with animation without sprites?
great video thanks a lot
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 ?
Doesn't background-position cause repaints lowering performance?
Awesome
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.
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 .
Thanks bro.
Thanks for the video! Are there other application besides using Ai to accomplish this?
inkscape is a good one
@@jundeleon8704 I'll look into that, I appreciate the info :)
Where is another corse love this one..
Thanks for the Sheep 🐑 shifter lol great tut
can i use this for xml file i mea for android development im using android studio
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.
isn't it possible to animate it in Adobe itself?
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).
When I import my design it gets stuck halfway through, is there a fix to this?
th-cam.com/video/0YL6AxK7hWA/w-d-xo.html
Nice !!
Good stuff, I tell you!
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!
seems so cool, but for some reason it does not animate anything i am doing, not sure why
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
wow thanks!
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!)
does this work in figma?
LinkedIn Instructor 😱
How to reverse the animation when click on X
good question
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');
}
}
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
cool