21:55 feels For SVGs, I like to use Two.js. Its easy for making or manipulating shapes relative to its parent container. I like making SVG flowers from the rhodonea curve function to make flowers
Tbh i don't mind wasting time since I'm learning and I'll be glad to see you not worrying about time in explaining in details 😉 Also, the longer the video is the more view time it will get on youtube, so it's a win-win 😎
To solve animations that are not smooth, you must set the number of points first. If path 1 has 6 points, then path 2 must have 6 points too. in my case I wanted to change the rectangle to a hexagon so I had to change the rectangle which initially had 4 points, I changed it to 6. I hope this will help you
Hello Gary, im really into this svg thing for a couple of days. i have the same issue with the vector points 19:18 , i tried with illustrator and XD but i can't find the issue there. Also i tried to be really accurate with the vector points and it just keep doing wieird morphing, can you help me?? please or maybe some tip anything you could tell me would be great
I have the same issue, too. As I haven't got Adobe XD, I got SVG code by Figma/(AI+SVGOMG). Unfortunately, both tried of them failed. If you succeed on it, please let me know. Thank you.
not working well ! it supposed to move from path 1 to 2 to 3 and the reverse it but ... 1 2 3 3 2 1 1 3 1 2 3 i mean when i click on buttons they dont work as they should do
Will be interesting to see how you deal with doing this as a page transition with one of the major frameworks, what with their routers effectively replacing the current html with new html I wonder how you get the SVG to "stick around" long enough to finish the animation. I use Affinity Designer for all my visuals including SVG
unfortunately you didn't show how to fix the problem with ankor points; I have the same issue the animation doesn't work smoothly I have these weird angles appearing before it takes the full shape ... don't know how to fix it
Enjoying your videos on SVG animations very much. Still I need advise on how to animate SVG lines. How can I draw a SVG line with full screen width and/or height? All examples I found are with lines with fixed length. In my case I need to draw and animate line that go across the full viewport. In addition it has to be a responsive animation. Can you help me out with this?
Search for 'svg dash offset' to find a tutorial on how to animate the drawing of a line. Setting your svg's width="100%" should stretch your line and the dash offset math.
Affinity Designer for SVG's and Greensock for Animation :) Gonna look into Anime.js, but Gsap can do morph effects too, with the MorphSVG plugin! hmm..
Your kids must not watch enough cartoons, it's an-eh-MAY. I use Illustrator - not sure if Inkscape or Figma has the SVG save options that AI has. It gives paths and SVG elements the names of your layers, allows you to choose: where your styles go (with attributes, with inline styles or with a stylesheet), how your fonts are used (and can convert to outlines if you want) how many decimal places your paths have, etc. And I'll usually run the completed SVG through an optimizing tool like SVGOMG too.
This is example for Morphing Page Transition By Mary Lou tympanus.net/codrops/2017/08/08/morphing-page-transition/ There are also many examples here with CSS freefrontend.com/css-page-transitions/
If you want cool morphing, then your first and last points in top line should be higher, than others. Make sure in Illustrator, that first and last point are upper.
i just want to understand something, you can do this in animate as well. why opt for straight coding over exporting vector from animate, is this because animate would not generate a piece of code as clean, and maybe not fully vector as well, as what you are writing here? this question applies to other css animation cool tutorials you have been uploading. thank you
For some reason the reverse() is not working for me. The btn2 event works, removes the classes but the animation does not reverse. If i leave it at restart() it restarts the original animation, just not the reverse(). Any idea why that would be?
Thanks for video, but it seems not to be Page transition, but more like modal/menu etc. animation. If i want to use it with, for example, WP, is there simple way to use this as transition between pages or i will need to load page content via ajax to make this work? and how to deal with loading assets on different pages? Thank you and sorry if i asking for stupid things)
There needs to be the same number of anchor points, and something about XD messes it up. GSAP handles morphing different amounts of points very well, but it is a pro (paid) library. Illustrator seems to save the svg path properly.
If it doesn't work than this is because your svg is using a relative path you can convert it into absolute path with this codepen converter codepen.io/thednp/pen/EgVqLw or you can set the settings in inkscape to convert svg with an absolute path i couldn't find this in illustrator or other tools and this thing really got me a headache until I found the solution and make sure that you have the same number of anchor points and they are aligned correctly if you know how to export a svg with absolute path from adobe xd or illustrator than tell me in the comment
This seems like a logical solution. But when i convert my svg code from Adobe XD to absolute code and paste into my VScode it doesn't work anymore. When i use the relative path it works but its very buggy just like in the video. I can't really tell what Gary does in the video to make it better.
@@CashewDemi wasn't able to link to the separate comment but here's what it has: I think the main issue causing the malformed morph animations is when you have paths with relative coordinates (lowercase letters) instead of absolute coordinates (uppercase letters). I haven't found out a way force or transform them in Illustrator but I've used svgo github.com/svg/svgo to do it. There's also this little app on Codepen for it codepen.io/thednp/pen/EgVqLw
anyone know of a more economical way for us to try this tutorial without an Adobe suite product? I've never really worked with SVG files, where can I go to experiment with something in the public domain or royalty free?
I think the main issue causing the malformed morph animations is when you have paths with relative coordinates (lowercase letters) instead of absolute coordinates (uppercase letters). I haven't found out a way force or transform them in Illustrator but I've used svgo github.com/svg/svgo to do it. There's also this little app on Codepen for it codepen.io/thednp/pen/EgVqLw
You imported different version of anime for css and js. Also I would suggest not name ids and classes with same name. It works, but IMO may be super confusing to beginners.
Make sure to subscribe! Adobe Illustrator is usually my go-to for SVG animations, but I used XD today. You?
There's an Android app INFINITE DESIGN for svg
inkscape
Is there a quick way to export the coordinates in Illustrator like you did in XD?
a tip: watch movies on Flixzone. Been using it for watching loads of movies these days.
@Adriel Ismael yea, I've been using Flixzone for months myself :)
21:55 feels
For SVGs, I like to use Two.js. Its easy for making or manipulating shapes relative to its parent container. I like making SVG flowers from the rhodonea curve function to make flowers
Tbh i don't mind wasting time since I'm learning and I'll be glad to see you not worrying about time in explaining in details 😉
Also, the longer the video is the more view time it will get on youtube, so it's a win-win 😎
*Top 10 anime frameworks*
Damn right
I tried Anime.js with angular7 and its great. Thanks for the Tutorial.
IS there a video out for anime.js and angular? Can we add this animation to routeTransitions ?
To solve animations that are not smooth, you must set the number of points first. If path 1 has 6 points, then path 2 must have 6 points too. in my case I wanted to change the rectangle to a hexagon so I had to change the rectangle which initially had 4 points, I changed it to 6. I hope this will help you
Really cool. What was the issue that you had to fix? The part where you fast forwarded.
I use gravit designer .io , it's probably the most amazing free vector graphics software out there
Thanks for the help!
Would be super nice if you made a video comparing different svg animation tools, as animejs, svgsnap, greensock etc
I love to have this effect on my wordpress elementor pro site... is there a more easyer way to do this these days?
Hello Gary, im really into this svg thing for a couple of days. i have the same issue with the vector points 19:18 , i tried with illustrator and XD but i can't find the issue there. Also i tried to be really accurate with the vector points and it just keep doing wieird morphing, can you help me?? please or maybe some tip anything you could tell me would be great
were you able to find any solutions to this?
I have the same issue, too. As I haven't got Adobe XD, I got SVG code by Figma/(AI+SVGOMG). Unfortunately, both tried of them failed. If you succeed on it, please let me know. Thank you.
Merci pour ce bon tuto !
AdobeXD/inkscape .... i have problem with svg code...do crazy things that animation but i dont know how to fix export svg's code.
please make a video like this page transition for nextjs and framer motion
Hairs grown in a "blip"! Haha.
Great videos by the way, keep it up.
thanks i learned a lot
I use adobe illustrator and I love to use anime.js
not working well !
it supposed to move from path 1 to 2 to 3 and the reverse it but ...
1 2 3
3 2 1
1 3
1 2 3
i mean when i click on buttons they dont work as they should do
Will be interesting to see how you deal with doing this as a page transition with one of the major frameworks, what with their routers effectively replacing the current html with new html I wonder how you get the SVG to "stick around" long enough to finish the animation. I use Affinity Designer for all my visuals including SVG
Have you managed to find a solution to this? I'd like to do page transitions with React Router
Witch editor php you use?
I use adobe illustrator and a JS library named Snap to dynamically generate SVG markup.
unfortunately you didn't show how to fix the problem with ankor points; I have the same issue the animation doesn't work smoothly I have these weird angles appearing before it takes the full shape ... don't know how to fix it
I have the same problem i use adobe xd and i fixed the anchor points and still not working !!!!
i also still got the same problem. I would still like to fix it, but unfortunately i don’t know how
INKSCAPE for SVG design, it's an awesome free software .
my SVG crashes the second time any idea why it works the first time but crashes the second time
i got the same problem
Enjoying your videos on SVG animations very much. Still I need advise on how to animate SVG lines. How can I draw a SVG line with full screen width and/or height? All examples I found are with lines with fixed length. In my case I need to draw and animate line that go across the full viewport. In addition it has to be a responsive animation. Can you help me out with this?
Search for 'svg dash offset' to find a tutorial on how to animate the drawing of a line. Setting your svg's width="100%" should stretch your line and the dash offset math.
Affinity Designer for SVG's and Greensock for Animation :) Gonna look into Anime.js, but Gsap can do morph effects too, with the MorphSVG plugin! hmm..
But its paid.
Your kids must not watch enough cartoons, it's an-eh-MAY.
I use Illustrator - not sure if Inkscape or Figma has the SVG save options that AI has. It gives paths and SVG elements the names of your layers, allows you to choose: where your styles go (with attributes, with inline styles or with a stylesheet), how your fonts are used (and can convert to outlines if you want) how many decimal places your paths have, etc. And I'll usually run the completed SVG through an optimizing tool like SVGOMG too.
Hey can you make a video with actual transitions from one page to another using svg animations?
This is example for Morphing Page Transition By Mary Lou tympanus.net/codrops/2017/08/08/morphing-page-transition/
There are also many examples here with CSS freefrontend.com/css-page-transitions/
please make a tutorial just like this. Page Transitions but using After Effects like in your past tutorials.
If you want cool morphing, then your first and last points in top line should be higher, than others. Make sure in Illustrator, that first and last point are upper.
Hi, i think you can do this with Gsap Morph ?
i use both corelDraw & illustrator
Awesome
G'day, love anime.js... would you share any links of examples of how to use bg video under animations?
Inkscape FTW!
i just want to understand something, you can do this in animate as well. why opt for straight coding over exporting vector from animate, is this because animate would not generate a piece of code as clean, and maybe not fully vector as well, as what you are writing here? this question applies to other css animation cool tutorials you have been uploading. thank you
Hey Gary,
Did you make a video that demonstrates this effect with Reac?
For some reason the reverse() is not working for me. The btn2 event works, removes the classes but the animation does not reverse. If i leave it at restart() it restarts the original animation, just not the reverse(). Any idea why that would be?
AI or Sketch to create SVG's, however Nucleo to organize or for library use 👍
what do you think about skillshare? is it worth teaching there?
Thanks for video, but it seems not to be Page transition, but more like modal/menu etc. animation.
If i want to use it with, for example, WP, is there simple way to use this as transition between pages or i will need to load page content via ajax to make this work? and how to deal with loading assets on different pages?
Thank you and sorry if i asking for stupid things)
sickk! thats what im talkin about
pretty interesting, thank you
Just a random question which not related to this topic.. "what plugins you are using" want to know about that too.
How do you solve your problem with the svg on the video ? Is there some tool or a plugin ?
There needs to be the same number of anchor points, and something about XD messes it up. GSAP handles morphing different amounts of points very well, but it is a pro (paid) library. Illustrator seems to save the svg path properly.
If it doesn't work than this is because your svg is using a relative path you can convert it into absolute path with this codepen converter codepen.io/thednp/pen/EgVqLw or you can set the settings in inkscape to convert svg with an absolute path i couldn't find this in illustrator or other tools and this thing really got me a headache until I found the solution and make sure that you have the same number of anchor points and they are aligned correctly if you know how to export a svg with absolute path from adobe xd or illustrator than tell me in the comment
This seems like a logical solution. But when i convert my svg code from Adobe XD to absolute code and paste into my VScode it doesn't work anymore. When i use the relative path it works but its very buggy just like in the video. I can't really tell what Gary does in the video to make it better.
Thank you for being friend friend
Hey bro, great content love it.....!!
Hey Gary, do you know how this anchor point morphing work on a mobile phone?
Exactly what I was reading up on last night. Thanks.. Are the source files available?
Inkscape FTW the open-source power
I know that I'm late xD
I had the same problem with you that the animation doesn't work how it was supposed to be but u just fast forward that part and now I'm lost.
Check out my comment, maybe that will fix the issue for you
@@peksipatongeis where is your comment ?
@@CashewDemi wasn't able to link to the separate comment but here's what it has: I think the main issue causing the malformed morph animations is when you have paths with relative coordinates (lowercase letters) instead of absolute coordinates (uppercase letters). I haven't found out a way force or transform them in Illustrator but I've used svgo github.com/svg/svgo to do it. There's also this little app on Codepen for it codepen.io/thednp/pen/EgVqLw
I used the Mac preview software 😎
Is the tutorial for react out?
i'm using illustrator when i try to save svg it gives me three paths with three d codes how am i supposed to do it now???
anyone know of a more economical way for us to try this tutorial without an Adobe suite product? I've never really worked with SVG files, where can I go to experiment with something in the public domain or royalty free?
Adobe XD is free for use. You can follow this tut easily.
Adobe XD is free
Affinity Designer, Gravity Designer, Inkscape = Adobe Free SVG creation :)
I don't care what anybody says, anime.js will always be weeb code in my mind and I love it OwO
Inkscape. It supports Cricut paper cutting technologies.
Affinity Designer for SVG
The one that I use is Illustrator
I use also adobe Illustrator and I love anime.js
I use inkscape for svg
I use Affinity Designer most of time, also use Adobe Illustrator when need to, AI is becoming obsolete for me.
Is that AANIM.js or animea.js how should i pronounce??
I honestly don't even know. 😂
@@DesignCourse 😅😅😅
An-nim-ay. As in japanese anime
Okay I used Figma because it is free, web-browser based and no plugins required just rightclick and copy as SVG
👍👏
Affinity Designer
I use Inkscape
I think the main issue causing the malformed morph animations is when you have paths with relative coordinates (lowercase letters) instead of absolute coordinates (uppercase letters). I haven't found out a way force or transform them in Illustrator but I've used svgo github.com/svg/svgo to do it. There's also this little app on Codepen for it codepen.io/thednp/pen/EgVqLw
thank you!!! this fixed my morph issues
You imported different version of anime for css and js. Also I would suggest not name ids and classes with same name. It works, but IMO may be super confusing to beginners.
awesome
not working for me
Morphing don't work, then press button Go back.(
I create SVGs with Figma 😄
Inkscape 🐣🐣🐣
Adobe XD
Paint
I use Ai for SVGs than play with the code in Sublime Text
I use Adobe xd
can't really call it vanilla if you're importing a js library
Adobe Illustrator
Adobe illustrator
No, u
Fucking Gooooooood
Figma because it's free :))
Did he ever get around to doing this in React?
Always use figma
Figma
Please disregard my question. Sorted.
666th like! I am the devil
dislike 6 too damn!
figma
i dont like his face lol