7:11 if you wonder why you need to make it like this. It is because your rotation dot is pointed to the peak (top) of your dashed circle that's why you need to put coordinates to half (half of diameter = radius) of the circle and get the middle point as the rotation dot (so the circle will spin 360° around that dot),
Your teaching style is great. You also don't talk a mile a minute, and explain things well. Not too much 'blah blah blah' but just enough critical information. And the pausing and jumping back in was done so seamlessly, if you hadn't said you paused nobody would ever have known (but thanks for the mention; it made you more human and hilarious)....I felt like you were a real person I could have a coffee with and talk shop with about design. And not be drinking coffee with a pretentious asshole. :D Your humanity and ability to describe things well without 'word clutter'...while also not leaving out critical information is what made me subscribe to your channel. Thanks for this. Hope you're still running design courses....this vid is nearly 4 years old. :D Thanks again. Made my day.
Thank you for this quick , great , in-depth explanation for SVG file extension, basically another language only that it's not usable with all browsers yet (it's been 3 years since you posted this tutorial :)) so it's importent to embad the actual code just like you did in this tutorial and not just placing an imageName.svg in the html ,hope it will get there soon , SVG's are great time and space savers.
To fix the problem of the dashed lines close to each other in Illustrator, simple go over to the stroke settings popup, and switch the mode by clicking on one of the buttons next to the checkbox "Dashed Line".
If anyone wants to do the animation through css, use this: @-webkit-keyframes rotation { 0% { transform: rotate(0deg); transform-origin: center center;
} 100% { transform: rotate(359deg); transform-origin: center center; } }
This is pretty useful. It would be nice if you explained things a little more though. also, I think you need you need to use java to do the animation when hovering over it (have the HTML attribute call the javascript with the onmouseover or whatever you choose). if this is not true, please tell me.
Thanks a lot buddy , really helped 😄 , just a quick question .. Can i get a full list of "type" animations ... For example rotate .. I am sure there will be so many more ... If you cld help out thanks 😄
Thanks a lot dude, this worked perfect. I just have a question since I want to make a sequence, like a red rectangle fade in the first second, then a yellow rectangle that was behind fade in second 2, then a blue rectangle that was behind the yellow one fade in the second 3 and finally make the first red rectangle reappear in the second 4. Please, how could I make all these sequence loop?
In case someone is interested, I did it with keyTimes (not sure it's the best way, but it worked). I couldn't exactly wrap the animations but I was able to set an specific value for each point in a period of time, that in each animation, so they made a sequence =)
Looks like you're going to lose your animation code when you re-save the SVG. Is there a way to not lose all the edits you made in the SVG file? After you adjusted the dashed lines at the end of the tutorial and re-saved the SVG file, did you loose all the animation code in the text file? Do you have to save out the file as a different name, and then cut and paste your old animation code from the first file into the newly saved SVG?
"You know what? I don't care about the id" Hahaha.. first time I hear that.. that was funny. Very good tutorial! Thank you very much for this information because It was clear and easy to understand. Video as well.
Thank you for this tutorial, I have one question about this : How did you communicate with each element on the SVG ? I'm using Edge Animate and I didn't find how to do that beside saving each element as a independent SVG so I can animate it !
you can name each path/element of your SVG in the illustrator file and the name will show up as a id/class in the code. helps to find out the exact element you wanna work with. I'm a bit too late tho hope you're doing well in these tough times
very interesting, but why the hell did you write "with Adobe Illustrator" in the title, this is useless and confusing, you are creating the animation by hand and in sublime text after all. I was searching for a video explaining how to animate FROM Adobe Illustrator (using attributes maker directly in Illustrator and using css3 animations instructions would be the best, do you know where I can find such a tutorial ?). cheers
***** ***** as the title says "create an svg ... with adobe illustrator" as the app can create a graphic and save it as a svg format from there you can edit the svg with a text file editor to make adjustments.
Valentin is correct, the title is misleading af. I suspect it's a clickbait title aiming to reel in people who are looking for a way to visually create animated SVG.
Saulo Padilha I'm looking on my code but I don't see a "begin" parameter and all of my are whole numbers, not decimals anyway. I still can't get my bars to animate in Firefox but the circles rotate just fine.
Superb tutorial.. Really.. BUT i couldn't understand how to translate objects horizontally instead of moving them vertically.. This thing is really bugging me.. CAN ANYONE HELP PLEASE!!
Sandeep A in the values section values="0,6;0,-6;0,6" the 0 is x value which is the horizontal movement and 6 is y value which is the vertical movement just adjust values and experiment
I actually thought he was hilariously normal. How many times have all of us had to stop designing to go take care of something, and then have to get back into 'flow'...and it pisses us off a little? He's normal. Drunkard or not, you didn't have a bad attitude, video guy. :)
That was great. The pace was good. No extra explanations. Great English. Well done.
7:11 if you wonder why you need to make it like this. It is because your rotation dot is pointed to the peak (top) of your dashed circle that's why you need to put coordinates to half (half of diameter = radius) of the circle and get the middle point as the rotation dot (so the circle will spin 360° around that dot),
was just about to say the same, easier fix
Your teaching style is great. You also don't talk a mile a minute, and explain things well. Not too much 'blah blah blah' but just enough critical information. And the pausing and jumping back in was done so seamlessly, if you hadn't said you paused nobody would ever have known (but thanks for the mention; it made you more human and hilarious)....I felt like you were a real person I could have a coffee with and talk shop with about design. And not be drinking coffee with a pretentious asshole. :D Your humanity and ability to describe things well without 'word clutter'...while also not leaving out critical information is what made me subscribe to your channel. Thanks for this. Hope you're still running design courses....this vid is nearly 4 years old. :D Thanks again. Made my day.
Thank you dear.
I was in need of differentiated gauges and I didn't know how SVGs were made.
You gave great ideas to create them!
Thanks!
Thank you for this quick , great , in-depth explanation for SVG file extension, basically another language only that it's not usable with all browsers yet (it's been 3 years since you posted this tutorial :)) so it's importent to embad the actual code just like you did in this tutorial and not just placing an imageName.svg in the html ,hope it will get there soon , SVG's are great time and space savers.
To fix the problem of the dashed lines close to each other in Illustrator, simple go over to the stroke settings popup, and switch the mode by clicking on one of the buttons next to the checkbox "Dashed Line".
Really helped my out trying SVG animation for the first time today.
Thanks, dude.
I guess it's quite off topic but does anyone know a good site to watch new movies online ?
@Randy Fisher Flixportal :)
@Nikolai Archie Thanks, I went there and it seems like a nice service :) I appreciate it !!
@Randy Fisher you are welcome :)
Talk about Nerd-gasm... I will be lost for a couple of days playing with this!
"SVG's SMIL animations (, , etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead." - jQuery
Well...
"Okay bye jquery" - youmightnotneedjquery.com
A clear explanation, extremely rare!
Very well presented video. You explained every single step throroughtly. Thank you!
I like your videos
I have started learning SVG.
Great thanks to you people
Great as an introduction to SVG animation, I'm very fresh in this area and it seems really neat!
Thank you for the lesson. Good work! :)
If anyone wants to do the animation through css, use this:
@-webkit-keyframes rotation {
0% {
transform: rotate(0deg);
transform-origin: center center;
}
100% {
transform: rotate(359deg);
transform-origin: center center;
}
}
This is pretty useful. It would be nice if you explained things a little more though.
also, I think you need you need to use java to do the animation when hovering over it (have the HTML attribute call the javascript with the onmouseover or whatever you choose). if this is not true, please tell me.
Your code is not working on Firefox. You need to include "0" at the "begin" parameter. i.e. begin=".2" => begin="0.2"
+Saulo Padilha
does it work on all platforms?
What is the HTML editor you are using?
Thanks a lot buddy , really helped 😄 , just a quick question .. Can i get a full list of "type" animations ... For example rotate .. I am sure there will be so many more ... If you cld help out thanks 😄
Pretty cool stuff!
You should look into the align window.
Thanks for tutorial!
Question, is it working for mobile and desktop applications?
Awesome and to the point, subbed.
Great tutorial - many thanks!
Is this SMIL animation? What do you think about going with Snap.js? Thanks a lot, great tutorial.
Great tutorial! Subscribed for sure!
Great Tutorial ... Dobra robota ...
Very nice video. Just subscribed!
Thanks a lot dude, this worked perfect. I just have a question since I want to make a sequence, like a red rectangle fade in the first second, then a yellow rectangle that was behind fade in second 2, then a blue rectangle that was behind the yellow one fade in the second 3 and finally make the first red rectangle reappear in the second 4. Please, how could I make all these sequence loop?
In case someone is interested, I did it with keyTimes (not sure it's the best way, but it worked). I couldn't exactly wrap the animations but I was able to set an specific value for each point in a period of time, that in each animation, so they made a sequence =)
You're a legend
Super helpful. Thanks!
Cool! Thanks for sharing but really somebody really dislikes this..., why?
Cool vid. I learned something. Thanks
thank you
It's incredible!! Thanks to share it!!! :D
had this request yesterday kinda made svg code than i placed css animations on elements via css works also
Very nice!
Thanks! It's stunning!:D
Wow! what a nice tutorial! very explicit!
totally agree, really good. subscribed
Cool, thanks for the great info!
Thanks
Perfect Tutorial!! Thanks =D
very nice, subscribed!
Ohh yeahh..! That's what I was looking for..! Thanks Mate :)
Gotcha!! Just one doubt why he used id if that isn't even matter?
I'm having trouble when rotating a circle it moved completely from its original place, I'm making my own now!
superb..
officially tired of wix commercials - great tut*
Looks like you're going to lose your animation code when you re-save the SVG. Is there a way to not lose all the edits you made in the SVG file? After you adjusted the dashed lines at the end of the tutorial and re-saved the SVG file, did you loose all the animation code in the text file? Do you have to save out the file as a different name, and then cut and paste your old animation code from the first file into the newly saved SVG?
He was just doing that for our benefit and to show us why it was being caused...he'd have to re-export the SVG for the changes to take effect.
I have a question, How you know like this tons of codes :)
"You know what? I don't care about the id" Hahaha.. first time I hear that.. that was funny. Very good tutorial! Thank you very much for this information because It was clear and easy to understand. Video as well.
Prolly one of my favorite moments here. :D LOL...
awesome tutorial 1no
Hey can i do this using INKSCAPE....?
I realy liked it. thx
How can I make the paths movement's up and down to ease in for .5 second
you are awesome dude! =)
Thanx for video!
would be nice if there was a similar video with js interaction.
What used to write the codes I do not know how to open the page codes on MacBook Thank you
iAhmad SA ツ Use sublime text editor found here www.sublimetext.com/
Not Working Your Code My SVG File
haha landed back to you again after a google search :d thanks for the vid.
super cool
can this be applied to an e-mail ....signoff let say ??
thank you!!!
Great...
So I am not able to edit the code inside the Illustrator?
Thank you for this tutorial, I have one question about this : How did you communicate with each element on the SVG ? I'm using Edge Animate and I didn't find how to do that beside saving each element as a independent SVG so I can animate it !
you can name each path/element of your SVG in the illustrator file and the name will show up as a id/class in the code. helps to find out the exact element you wanna work with.
I'm a bit too late tho
hope you're doing well in these tough times
Very very cool! Thank you :D
Can I do this for Dreamweaver?
good ol days
very interesting, but why the hell did you write "with Adobe Illustrator" in the title, this is useless and confusing, you are creating the animation by hand and in sublime text after all. I was searching for a video explaining how to animate FROM Adobe Illustrator (using attributes maker directly in Illustrator and using css3 animations instructions would be the best, do you know where I can find such a tutorial ?). cheers
***** ***** as the title says "create an svg ... with adobe illustrator" as the app can create a graphic and save it as a svg format from there you can edit the svg with a text file editor to make adjustments.
+Paul Cavanagh but still you don't automate the animation directly in Illustrator, that's what I meant.
Dude..wth are you smokin.
Valentin is correct, the title is misleading af. I suspect it's a clickbait title aiming to reel in people who are looking for a way to visually create animated SVG.
thank you, very much.
nice!
how do i get the index file?
Hey thanks for the great tutorial. However I can't get it to work in firefox. The svg just stays static. Any idea why?
rjtkoh I've fixed the problem on Firefox by include add "0" at the "begin" parameter. Just change begin=".1" to begin="0.1" and so on.
Saulo Padilha good job!
Saulo Padilha I'm looking on my code but I don't see a "begin" parameter and all of my are whole numbers, not decimals anyway. I still can't get my bars to animate in Firefox but the circles rotate just fine.
Thanks for sharing .. thank you :)
thanks..
what's the title of the song at the end? :)
I cant thank you enough
there is no other way to animate svg's with out using code?
you can check out his video ua-cam.com/video/P35hQOsW0xU/v-deo.html
Superb tutorial.. Really.. BUT i couldn't understand how to translate objects horizontally instead of moving them vertically.. This thing is really bugging me.. CAN ANYONE HELP PLEASE!!
Sandeep A you just have to change the values, the first 0 its for x and the second value its for y
Sandeep A in the values section
values="0,6;0,-6;0,6"
the 0 is x value which is the horizontal movement
and 6 is y value which is the vertical movement
just adjust values and experiment
Thanks Paul and Luis.. Now i got it..
coursetro.com/posts/code/141/Learn-how-to-Create-Vue-Router-Animations---Transitions-Between-Pages
Teşekkürler (Thanks)
please record this video in 4k
It sucks! Since the project-files are removed. Can't find the project files on given link.
this isn't showing how to do much with illustrator, just the text edit html
Dead link on the project files. Just takes you to the courses
Gary sure looks different
The title is completely misleading "Design in Illustrator and Code SVG Animations in Subllime" will be more apt.
If you just took the SVG code from the adobe file, your svg would have been 1K.
WOW😎👌✨
I can't log on site!!!
You're nice guy:P
My wiiiifee
can you give me source file svg
check the description
Cant make it work.. When I save the SVG i get insted of . And my animation doesn't start.
an svg file contains something like this
So the title is misleading. A Text editor aint illustrator.
круто)
41.444 views with 449 likes and 4 dislikes
wtffffffff
Bro, it can be done much easier in SVG tools. What are you doing seriously?
He looks like he never hit puberty
Dude, I was only 12 years old there.
Let me be brutal, your logo is bad. The outline is wonky and doesn't read well
This guy has a bad attitude.
I was a drunkard back then.
I actually thought he was hilariously normal. How many times have all of us had to stop designing to go take care of something, and then have to get back into 'flow'...and it pisses us off a little? He's normal.
Drunkard or not, you didn't have a bad attitude, video guy. :)
Thanks