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 😎
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.
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..
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
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.
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.
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?
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
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)
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.
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/
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 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
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.
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?
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.
@@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 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
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
*Top 10 anime frameworks*
Damn right
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 😎
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 ?
AdobeXD/inkscape .... i have problem with svg code...do crazy things that animation but i dont know how to fix export svg's code.
Really cool. What was the issue that you had to fix? The part where you fast forwarded.
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.
Would be super nice if you made a video comparing different svg animation tools, as animejs, svgsnap, greensock etc
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.
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
I use gravit designer .io , it's probably the most amazing free vector graphics software out there
Inkscape FTW the open-source power
I know that I'm late xD
I love to have this effect on my wordpress elementor pro site... is there a more easyer way to do this these days?
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.
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.
Merci pour ce bon tuto !
I use adobe illustrator and I love to use anime.js
Thanks for the help!
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?
Hairs grown in a "blip"! Haha.
Great videos by the way, keep it up.
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
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)
please make a tutorial just like this. Page Transitions but using After Effects like in your past tutorials.
Hey Gary,
Did you make a video that demonstrates this effect with Reac?
INKSCAPE for SVG design, it's an awesome free software .
what do you think about skillshare? is it worth teaching there?
G'day, love anime.js... would you share any links of examples of how to use bg video under animations?
thanks i learned a lot
Exactly what I was reading up on last night. Thanks.. Are the source files available?
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.
my SVG crashes the second time any idea why it works the first time but crashes the second time
i got the same problem
Inkscape FTW!
sickk! thats what im talkin about
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 video like this page transition for nextjs and framer motion
Hey Gary, do you know how this anchor point morphing work on a mobile phone?
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
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
Witch editor php you use?
Hi, i think you can do this with Gsap Morph ?
Just a random question which not related to this topic.. "what plugins you are using" want to know about that too.
Hey bro, great content love it.....!!
pretty interesting, thank you
AI or Sketch to create SVG's, however Nucleo to organize or for library use 👍
Awesome
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.
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???
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
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 used the Mac preview software 😎
I don't care what anybody says, anime.js will always be weeb code in my mind and I love it OwO
I use also adobe Illustrator and I love anime.js
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.
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
Is the tutorial for react out?
awesome
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 use both corelDraw & illustrator
I create SVGs with Figma 😄
Inkscape. It supports Cricut paper cutting technologies.
Okay I used Figma because it is free, web-browser based and no plugins required just rightclick and copy as SVG
👍👏
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
The one that I use is Illustrator
Affinity Designer for SVG
Inkscape 🐣🐣🐣
I use inkscape for svg
Morphing don't work, then press button Go back.(
Fucking Gooooooood
Affinity Designer
I use Inkscape
Figma because it's free :))
not working for me
I use Ai for SVGs than play with the code in Sublime Text
can't really call it vanilla if you're importing a js library
I use Adobe xd
Please disregard my question. Sorted.
Figma
Adobe Illustrator
Did he ever get around to doing this in React?
Paint
Adobe XD
Always use figma
Adobe illustrator
No, u
figma
666th like! I am the devil
dislike 6 too damn!
i dont like his face lol