It is appearing that using the methods in Figma from the video may have changed some for the output that is pasted into the html. I had a double set of values beginning with to with values inside. I commented the first set for testing and it works. So for anyone having an issue just examine your svg code and comment out the first set of code surrounded by . The second set beginning in path contains all letter paths. Good luck. And great video.
I am absolutely loving your channel. I am a new subscriber by the way. But I feel the need to recommend that you look at what is happening with exporting SVGs from Figma now. For me it is giving me a single which means that I can not select individual child paths. I tried to work around this by exporting the letters one by one after getting the whole size and placing the paths on top of each other. I know that Figma changing this is not your fault but your video unfortunately does not address this. I am still working on a fix but I have other things that I need to do for now. If you can update this it would be great. Thanks! Great idea though and got me inspired. Keep up the great content.
For those of you who get a single path after following this video, here is a solution I've found (I'm a complete noob at this, took me a full day to solve and wanted to share my workaround). Do not remove the fill color like he did, removing fill and adding strokes then outlining then copying as svg always gave me a single path. Something like this happens: Instead, 1. keep the fill color 2. don't add strokes (we will do it manually) 3. get outline stroke of filled text (no strokes!) 4. copy as svg you should get remove the fill property and add stroke="white" & stroke-width="5" to the path tags. The paths should look like It is important that you remove the fill property or else the fill animation at the end won't work. I hope this helps.
I like that I learn things you aren’t even trying to teach, like how to perfectly center the text (especially for times you don’t know the text width). Really enjoying your videos.
You can use stroke-dasharray and stroke-dashoffset properties with percentages to avoid javascript. Also you can use stroke-linecap with different values to remove gaps from edges of characters.
If you have problem applying the stroke-dasharray, just put the code at the bottom of the paths in the into the html file. It becomes: 1 2 to 8 And edit: #logo path to: #logo > path To not select paths into mask node. (If not you will get 16 path instead of 8). Into js and css file. Hope it helps!
I am really struggling with using Figma. I left a comment earlier in the pinned comment at the top of this video. It is the first time that I ever tried it and I am honestly less than impressed with it. That is not your fault I understand that and I also recognize that it is currently an industry standard but the fact is the more I try to figure out how to reproduce this tutorial using it I have seen strange choices that Figma made. When looking more closely at the way that Figma compiles it SVGs it seems that when dealing with text elements the stokes are not actually strokes but instead are fills. If you change the HTML from stroke to fill in what is supposed to be a stroke a strange grid-like pattern appears. I am new to a lot of these things but am learning very quickly from constant focus on JS and React. So, forgive my lack of knowledge in this particular instance. What I am wondering is, is there a way to cause the fill to render like you did with the stroke. I am trying to find a solution because I would love to use this effect in my current project but Figma's compiling of its SVGs has caused me to waste a day. But it is not a total loss because I have learned quite a lot about SVGs so thanks for the tutorial anyways. Anyone that wants to point me in the right direction I offer a thanks in advance. Thanks!
For those who are having problems with figma and have only a single path. For me worked this: 1) Write the text, WITHOUT adding the stroke. 2)Right click and select Outline Stroke 3)Copy as SVG You should have the right numbers of paths in this way :)
Jesus Christ, that's what I've been looking for like years. I just stumbled upon this video, and finally here it is. It's super cool, subscribed. Waiting for more videos to come, really hyped up. Your channel must blow up, this is some quality content. Now, need to watch your other videos, which I'm about to do. Sorry for my english, I am not a native speaker, not even a good speaker. Again, thanks for the video
I love how you explain this stuff. I’ve been watching so many web dev videos and this is by far the best. This is the first video of yours that I watched and instant subscribe. You deserve success.
Great video! I've been looking to learn how to do this for quite a bit but never found a resource as good as this one. Also, another way to center the content of the body using flexbox: body { width: 100%; height: 100vh; background-color: rgb(32, 35, 48); display: flex; justify-content: center; align-items: center; } This way you wouldn't need to style the SVG's position :)
Great video! An advice, you can do in a better way than do a js script to get te total length of the stroke: var logo = document.querySelectorAll("#logo path"); logo.forEach(function(i){ console.log(i); i.style.strokeDasharray = i.getTotalLength()+"px"; i.style.strokeDashoffset = i.getTotalLength()+"px"; i.style.animation = "anim 2s ease forwards"; }); that save a lot of time for a big amount of letters
To add time offset var logo = document.querySelectorAll("#logo path"); var t = 0.3; logo.forEach(function(i){ console.log(i); i.style.strokeDasharray = i.getTotalLength()+"px"; i.style.strokeDashoffset = i.getTotalLength()+"px"; i.style.animation = "anim 2s ease forwards"+" " + t +"s"; t = t+0.4; })
Amazing, I didn't quite get the 'no-fill' white outline right in figma, but I followed your code straight through....and it worked I am amazed that something that simple can look so classy! Thankyou my lovely friend on the internet. :)
we can set the pathlength="1" that way we don't have to every use JS to calculate the pathLength, because everytime it will be 1. so stroke-dasharray="1" stroke-dashoffset="1" is gonna disappear it, and to animate it turn the offfset to 0.
Hey very nice tutorial, just wanted to add that we can add those styles directly form javascript after DOM loads with for loop so it works for any text you add.
Subscribed, and I use Inkscape to create my SVG files, with the caveat that you have to save your final SVG as a standard SVG vs Inkscape’s native SVG which contains non-standard XML tags that Inkscape uses to store layers, groups, etc. that just clutters your in-line SVG in your HTML document.
Loved this video, your excitement alone throughout the video made me enjoy it even more. Thank you for this wonderful video! Going to use it for my landing page group project !
Hey dave ed. Thanks for this tutorial! I've often come across these and have often wondered how this little piece of magic works. I never really took the time to do the research, until one day this appeared in my feed. Thanks for unraveling the mystery in such a great format. Your enthusiasm for teaching and programming is really second to none. (:
That was really cool. As I am new to web designing, I really enjoy your content. It helps a lot to me in different aspects. Thanks for making such awesome tutorials.
Wow, this was an amazing video, I loved the effect! 🤩 It worked for me, Thank you so much! 😄👏 On the other hand, Figma is an Amazing tool for Web design 😱
Hi, if you choose "Center" instead of "Inside" or "Outside" in the stroke options, there is no issue with the mask. by: Frank Wauters (who has commented here this solution)
If you are having trouble implementing this (e.g. one long svg file, can't animate the outline, etc.), I may be able to help you. 1. In Figma, forget using the text stroke. You won't need it. Just create your text as normal. 2. Take the outline text from the text in Figma as normal. Copy as SVG as normal. Then paste it into your project. You should have filled in text. This is a good thing cause now all your text is an SVG and SVGs have a fill property that determines the color of the inside of the SVG and a stroke property which is the outline you need to affect. 3. Within each path element, of the SVG file you just pasted, set the fill attribute to transparent (fill="transparent") 4. If you don't already have a stroke color, set you stroke's color by appending a stroke (stroke="#141414") to the end. 5. Set your preferred stroke width by appending a stroke width at the end (strokeWidth={2} or stroke-width="2") 6. Follow his instructions as normal. 7. If I was able to help you, let me know with a like or a comment. I want to know how many people I was able to help with this 💚
Hello, FYI when you use console.log, String interpolation is not necessary to get it readable. You can use (with your example) console.log('Letter', i, 'is', logo[i].getTotalLength()) and have the same result :D
You can also write: #logo{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #logo { stroke-dasharray: 0 2000; animation: signature 12s linear forwards; } @keyframes signature { from { stroke-dasharray: 0 2000; } to { stroke-dasharray: 2000 0; } } in CSS (this is right after the step he finalizes at 7:53) then manipulate the 12 seconds (after - animation: signature) and/or the stroke values (after - stroke-dasharray:) to fit the style your looking to achieve, this is a similar end result.
For those who gets one only path in the svg when making the copy/past. You have to right-click on the text and press 'Flatten' (Ctr + E in Windows). Then you can copy as svg.
It is appearing that using the methods in Figma from the video may have changed some for the output that is pasted into the html. I had a double set of values beginning with to with values inside. I commented the first set for testing and it works. So for anyone having an issue just examine your svg code and comment out the first set of code surrounded by . The second set beginning in path contains all letter paths. Good luck. And great video.
Thanks for the update! Figma is constantly changing so I appreciate you writing the fix!
You are a lifesaver!! I was just about to give up thinking @DevEd doesnt know what he is talking about lol. Glad I looked at the comments first!!
I am absolutely loving your channel. I am a new subscriber by the way.
But I feel the need to recommend that you look at what is happening with exporting SVGs from Figma now. For me it is giving me a single which means that I can not select individual child paths. I tried to work around this by exporting the letters one by one after getting the whole size and placing the paths on top of each other. I know that Figma changing this is not your fault but your video unfortunately does not address this. I am still working on a fix but I have other things that I need to do for now. If you can update this it would be great. Thanks!
Great idea though and got me inspired. Keep up the great content.
Hi, if you choose "Center" instead of "Inside" or "Outside" in the stroke options, there is no issue with the mask.
Thank you
For those of you who get a single path after following this video, here is a solution I've found (I'm a complete noob at this, took me a full day to solve and wanted to share my workaround).
Do not remove the fill color like he did, removing fill and adding strokes then outlining then copying as svg always gave me a single path. Something like this happens:
Instead,
1. keep the fill color
2. don't add strokes (we will do it manually)
3. get outline stroke of filled text (no strokes!)
4. copy as svg
you should get
remove the fill property and add stroke="white" & stroke-width="5" to the path tags. The paths should look like
It is important that you remove the fill property or else the fill animation at the end won't work. I hope this helps.
Thanks for saving my time, yes methods in figma changed
Thank you so much for sharing!!! That's exactly what I was looking for.
thanks
i was losing my brain dude thanks
THANKS A LOT DUDE YOU SAVED MY DAY
Love this guy - so humble and excited about what he shares - so dope!
definitely!
Ikr!
Hello, I don’t see much chance, but could you upload the good files somewhere?
Whatever i do is no good…
Thank you!
I like that I learn things you aren’t even trying to teach, like how to perfectly center the text (especially for times you don’t know the text width). Really enjoying your videos.
Hey man, your enthusiasm / smile / excitement on the start of the video is contagious! I came here tensed but left with a smile!
You can use stroke-dasharray and stroke-dashoffset properties with percentages to avoid javascript. Also you can use stroke-linecap with different values to remove gaps from edges of characters.
you just saved me 🥲🥲🥲
Appreciate it a lot. And changing the stroke linecap and linejoine worked perfect for me...
stroke-linecap="round"
stroke-linejoin="round"
If you have problem applying the stroke-dasharray, just put the code at the bottom of the paths in the into the html file.
It becomes:
1
2
to 8
And edit:
#logo path
to:
#logo > path
To not select paths into mask node. (If not you will get 16 path instead of 8).
Into js and css file.
Hope it helps!
ty
Wow how you can find it? Btw thank you very much!
THANKS!!!! finally it works!!!
Thanks!
But i didnt find animation
This took a while to process sorry about that! But this was really fun to make!
I am really struggling with using Figma. I left a comment earlier in the pinned comment at the top of this video. It is the first time that I ever tried it and I am honestly less than impressed with it. That is not your fault I understand that and I also recognize that it is currently an industry standard but the fact is the more I try to figure out how to reproduce this tutorial using it I have seen strange choices that Figma made.
When looking more closely at the way that Figma compiles it SVGs it seems that when dealing with text elements the stokes are not actually strokes but instead are fills. If you change the HTML from stroke to fill in what is supposed to be a stroke a strange grid-like pattern appears. I am new to a lot of these things but am learning very quickly from constant focus on JS and React. So, forgive my lack of knowledge in this particular instance. What I am wondering is, is there a way to cause the fill to render like you did with the stroke. I am trying to find a solution because I would love to use this effect in my current project but Figma's compiling of its SVGs has caused me to waste a day. But it is not a total loss because I have learned quite a lot about SVGs so thanks for the tutorial anyways. Anyone that wants to point me in the right direction I offer a thanks in advance. Thanks!
Iam having trouble with the fill property.its not filling the svg as you did in the video pls help.
@@mustafaaur4019 same problem here
3d image hover css
ua-cam.com/video/yyDey1Iid0c/v-deo.html
I write every single code and it didn't work can you help me sir ??
For those who are having problems with figma and have only a single path. For me worked this:
1) Write the text, WITHOUT adding the stroke.
2)Right click and select Outline Stroke
3)Copy as SVG
You should have the right numbers of paths in this way :)
Yes but whats the point of doing that if we dont get stroke for animation.?..is there another way to get stroke?
I loved the simplicity of your explanations. Will check out more of your videos for sure!
It’s very nice of these guys to create videos for the viewer.
Jesus Christ, that's what I've been looking for like years. I just stumbled upon this video, and finally here it is.
It's super cool, subscribed. Waiting for more videos to come, really hyped up. Your channel must blow up, this is some quality content. Now, need to watch your other videos, which I'm about to do. Sorry for my english, I am not a native speaker, not even a good speaker. Again, thanks for the video
thanks for the lovely comment! Will do my best to post alot of videos! Feel free to share the video!
@@developedbyed how to make it responsive
Yaseen Shaik set width for svg in media-queries but I’m not sure will the amount of dots will stay the same
@@vladfreishmidt2707 & Yaseen Shaik : Setting width to a percentage (50%) makes it responsive without changing anything else.
@@wolfgangr.3268 That works!
Your tuts are always worth watching
What you do and what you did, for us, is just a miracle ! Thank you very very much ! Best regards from Paris
Time flies so fast with you, you explain so easily, 👍the truth with Js is not very clear for me, but still, thank you🙏🌹🇺🇦
To all having just one path, write click and flatten your text before copying as svg. Good work anyway Dex Ed.
I love the way you explain and make everything look so easy, excellent video!
I really can't get enough if your tutorials
little effort, big result - like watching your videos
Hello, I'm from Brazil and I'm addicted to your videos, I'm already a new subscriber. Thank you.
I love how you explain this stuff. I’ve been watching so many web dev videos and this is by far the best. This is the first video of yours that I watched and instant subscribe. You deserve success.
so much inspiration and excitement!
I'm not only inspired but I also lost my fear to these svg types of animations.
Tysm! Keep it up. Much love
Great video! I've been looking to learn how to do this for quite a bit but never found a resource as good as this one. Also, another way to center the content of the body using flexbox:
body {
width: 100%;
height: 100vh;
background-color: rgb(32, 35, 48);
display: flex;
justify-content: center;
align-items: center;
}
This way you wouldn't need to style the SVG's position :)
i've been trying so hard to learn svg and this amazing dude just made it so easy omg thank you so much
I clicked few ads just for this guy!
The first video to watch on your channel. Great one. Keep it up.
AAAAAAAAAAAAAAAAAAACKmed
Awesome tuturial. Simple, effective, creative, and useful.
I’m so glad I found your channel!
bro. I love you so much. After struggling with Gsap draw svg plugin, i was trying to find easy way out.. then i found you .. damn this is cool.
Great video!
An advice, you can do in a better way than do a js script to get te total length of the stroke:
var logo = document.querySelectorAll("#logo path");
logo.forEach(function(i){
console.log(i);
i.style.strokeDasharray = i.getTotalLength()+"px";
i.style.strokeDashoffset = i.getTotalLength()+"px";
i.style.animation = "anim 2s ease forwards";
});
that save a lot of time for a big amount of letters
To add time offset
var logo = document.querySelectorAll("#logo path");
var t = 0.3;
logo.forEach(function(i){
console.log(i);
i.style.strokeDasharray = i.getTotalLength()+"px";
i.style.strokeDashoffset = i.getTotalLength()+"px";
i.style.animation = "anim 2s ease forwards"+" " + t +"s";
t = t+0.4;
})
@@Surya-vj4yn this doesn't work please help
Thanks a lot man!
@@adnanhakim is it working for you
@@samuelrajasingh506 yup!
Amazing, I didn't quite get the 'no-fill' white outline right in figma, but I followed your code straight through....and it worked I am amazed that something that simple can look so classy! Thankyou my lovely friend on the internet. :)
YOU'RE THE BEST WEB DEV IN THE WORLDDDDDDD !!
I love your enthusiasm. Keep doing a great job! Thanks for the tutorial
I really love your enthousiasm and humor. Very useful video with lots of information. Thank you very much for posting this!
we can set the pathlength="1" that way we don't have to every use JS to calculate the pathLength, because everytime it will be 1. so stroke-dasharray="1" stroke-dashoffset="1" is gonna disappear it, and to animate it turn the offfset to 0.
awesome it worked for me
I've been confused about SVG animation forever, using hacks here and there. This is a very nice tutorial!
You are my programming motivation 👨💻
Interesting video. Your collab with web dev simplified got you a new viewer
Quality content. Really enjoying your videos.
Thanks Ed, this is really great. So many posibilities!
Hey very nice tutorial, just wanted to add that we can add those styles directly form javascript after DOM loads with for loop so it works for any text you add.
This is a fantastic introduction to SVG manipulation. I really appreciated this lesson, thanks so much for sharing.
Finally even though I am a python dev I subscribed
Beautiful, absolutely beautiful
I love your energy! And the video was really helpful - imagine all the possibilities!
Keep making videos! And smiling too 😁 Great work, thank you!
That was amazing! Loved it.
I've been binging on your videos the last couple of days and have learned a ton! Thanks!
That looks so awesome! That’s for sharing!
Subscribed, and I use Inkscape to create my SVG files, with the caveat that you have to save your final SVG as a standard SVG vs Inkscape’s native SVG which contains non-standard XML tags that Inkscape uses to store layers, groups, etc. that just clutters your in-line SVG in your HTML document.
Its amazing you made such complex skill feels understandable, thank you so much !
more css and js effects please. Great work on this tutorial. I just subbed to your channel.
Wow, your tutorial is really smooth and your reaction is so friendly,
Loved this video, your excitement alone throughout the video made me enjoy it even more. Thank you for this wonderful video! Going to use it for my landing page group project !
It was a very simple way yet cool result to animate a text. thumbs up :)
Its'cool, that's exactly i've been looking for
Hey dave ed. Thanks for this tutorial! I've often come across these and have often wondered how this little piece of magic works. I never really took the time to do the research, until one day this appeared in my feed. Thanks for unraveling the mystery in such a great format. Your enthusiasm for teaching and programming is really second to none. (:
Hey Yo....Yours Is the most perfect understandable video i have seen. Please continue making such videos
That is really amazing, thanks for bringing such great content, love your creativity :)
my man, always on point
Amazing video! Really elegant and easy to implement design idea!
Awesome animation effect! Thank you!
I really enjoyed how you made everything fun, thanks for making this tutorial been looking for something like this
Thanks Ed, you're the best!
saved myy dayyy buddy !!!!!!!!!!!!!!!!!!!!!!!!!!! mayy the forceee bee withhh youuuuuuuuuuuuuuuuuuuuuuu
Well sir you’ve just won a subscriber for life!
Thankyou so much, did the figma bit slightly different(newbie), absolutely amazing tho! did the code and boom! it worked. thankyou
Delete ... if you want to apply stroke-dasharray, then change paths stroke width to 4
Finally!! This is how it's made.
Thank you so much!
Man i love the way you talk with video .. 💙
Excellent tutorial, and very creative idea. Thanks!
this guy is a CSS god.
this guy is so fucking happy, I can't watch this it always lend you to the wrong direction.
thank you friend! Thanks to your video, I made an epic loader based on the company logo :)
That was really cool. As I am new to web designing, I really enjoy your content. It helps a lot to me in different aspects. Thanks for making such awesome tutorials.
I really enjoyed it . keep it going man! thumbs-up!!
Love your tutorials! keep it up please!
Wow, this was an amazing video, I loved the effect! 🤩 It worked for me, Thank you so much! 😄👏
On the other hand, Figma is an Amazing tool for Web design 😱
10:55 "I was garbage ok" hahahah the best, loved the tutorial btw! :)
Hi, if you choose "Center" instead of "Inside" or "Outside" in the stroke options, there is no issue with the mask.
by: Frank Wauters (who has commented here this solution)
If you are having trouble implementing this (e.g. one long svg file, can't animate the outline, etc.), I may be able to help you.
1. In Figma, forget using the text stroke. You won't need it. Just create your text as normal.
2. Take the outline text from the text in Figma as normal. Copy as SVG as normal. Then paste it into your project. You should have filled in text. This is a good thing cause now all your text is an SVG and SVGs have a fill property that determines the color of the inside of the SVG and a stroke property which is the outline you need to affect.
3. Within each path element, of the SVG file you just pasted, set the fill attribute to transparent (fill="transparent")
4. If you don't already have a stroke color, set you stroke's color by appending a stroke (stroke="#141414") to the end.
5. Set your preferred stroke width by appending a stroke width at the end (strokeWidth={2} or stroke-width="2")
6. Follow his instructions as normal.
7. If I was able to help you, let me know with a like or a comment. I want to know how many people I was able to help with this 💚
Love your videos .. its super helpful being a starter into web designing and development.. superb bro loads of love .. ❤️
Always thank you for your great tutorials.
I Love your videos Dev Ed. Thank You so much.. Really appreciate your creativity.
Thank you Dev Ed... You are amazing💥
I looooveeeee youuuu boyyyy.... I love your coding and and your face when coding with love ❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️
Hello, FYI when you use console.log, String interpolation is not necessary to get it readable.
You can use (with your example) console.log('Letter', i, 'is', logo[i].getTotalLength()) and have the same result :D
Oh man, thank you so much!
thank man been the whole day to find this . god bless
Thank you!
This guy looks so happy
You can also write:
#logo{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#logo {
stroke-dasharray: 0 2000;
animation: signature 12s linear forwards;
}
@keyframes signature {
from {
stroke-dasharray: 0 2000;
}
to {
stroke-dasharray: 2000 0;
}
}
in CSS (this is right after the step he finalizes at 7:53) then manipulate the 12 seconds (after - animation: signature) and/or the stroke values (after - stroke-dasharray:) to fit the style your looking to achieve, this is a similar end result.
thanks mate
awesome... you clearly explain whats actually hapening.
You, sir, are a legend.
I want to see more complex animations!
=D
Thank you, works perfectly
For those who gets one only path in the svg when making the copy/past. You have to right-click on the text and press 'Flatten' (Ctr + E in Windows). Then you can copy as svg.
thx
Beautiful work man! Thank You
Bro u are sick 🔥🔥🔥
I got lost halfway! I subscribe to continue tomorrow (the lord of the sleepy is the one who is giving orders here).
Hat mir gut gefallen, auch deine Art der Präsentation. Endlich versteh ich auch den größten Teil vom English. Ich komm wieder.
You are the absolute BEST!!!