SVG Animation With Text Tutorial

No video

SVG Animation With Text Tutorial | HTML CSS

Рет қаралды 579,609

Күн бұрын

Check out my courses and become more creative!
developedbyed.com
Today we are going to create an SVG animation using stroke dash array and stroke dash offset to create some really cool effects.
We only need HTML and CSS for this effect. You can create the shapes and texts with Figma, Adobe XD or Adobe Illustrator.
Let me know if you want to see more complex SVG animations with tools like bodymoving/lottie.
Try to get creative and apply the path animations to different kinds of texts, shapes,etc.
Microphones I Use
Audio-Technica AT2020 - geni.us/Re78 (Amazon)
Deity V-Mic D3 Pro - geni.us/y0HjQbz (Amazon)
BEHRINGER Audio Interface - geni.us/AcbCpd9 (Amazon)
Camera Gear
Fujifilm X-T3 - geni.us/7IM1 (Amazon)
Fujinon XF18-55mmF2.8-4 - geni.us/sztaN (Amazon)
PC Specs
Kingston SQ500S37/480G 480GB - geni.us/s7HWm (Amazon)
Gigabyte GeForce RTX 2070 - geni.us/uRw71gN (Amazon)
AMD Ryzen 7 2700X - geni.us/NaBSC (Amazon)
Corsair Vengeance LPX 16GB - geni.us/JDqK1KK (Amazon)
ASRock B450M PRO4 - geni.us/YAtI (Amazon)
DeepCool ATX Mid Tower - geni.us/U8xJY (Amazon)
Dell Ultrasharp U2718Q 27-Inch 4K - geni.us/kXHE (Amazon)
Dell Ultra Sharp LED-Lit Monitor 25 2k - geni.us/bilekX (Amazon)
Logitech G305 - geni.us/PIjyn (Amazon)
Logitech MX Keys Advanced - geni.us/YBsCVX0 (Amazon)
DISCLAIMERS:
I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.
~-~~-~~~-~~-~
Follow my Twitter:
/ deved94
Please watch: "Should You Become A Software Engineer?"
• Video
~-~~-~~~-~~-~

Пікірлер: 818

@tomcatbuzz 5 жыл бұрын

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.

@developedbyed 5 жыл бұрын

Thanks for the update! Figma is constantly changing so I appreciate you writing the fix!

@austinlynum7112 5 жыл бұрын

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!!

@jaygreg6329 5 жыл бұрын

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.

@FrankWauters 5 жыл бұрын

Hi, if you choose "Center" instead of "Inside" or "Outside" in the stroke options, there is no issue with the mask.

@ekechkeidze745 5 жыл бұрын

Thank you

@rajivonarx5958 5 жыл бұрын

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.

@VIKASSAINI007 5 жыл бұрын

Thanks for saving my time, yes methods in figma changed

@virginietrubiano3062 4 жыл бұрын

Thank you so much for sharing!!! That's exactly what I was looking for.

@umitatak5396 4 жыл бұрын

thanks

@Raspace 4 жыл бұрын

i was losing my brain dude thanks

@sriramrepaka7003 4 жыл бұрын

THANKS A LOT DUDE YOU SAVED MY DAY

@chrismauerer 4 жыл бұрын

Love this guy - so humble and excited about what he shares - so dope!

@djsargex7777 4 жыл бұрын

definitely!

@andytataw5466 4 жыл бұрын

Ikr!

@renatokardos5953 6 ай бұрын

Hello, I don’t see much chance, but could you upload the good files somewhere? Whatever i do is no good… Thank you!

@AkashsinghSisodiya 4 жыл бұрын

Hey man, your enthusiasm / smile / excitement on the start of the video is contagious! I came here tensed but left with a smile!

@silverdaymon8786 5 жыл бұрын

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!

@Banditik55 4 жыл бұрын

@bayufajariyanto 4 жыл бұрын

Wow how you can find it? Btw thank you very much!

@kimmiekim8783 4 жыл бұрын

THANKS!!!! finally it works!!!

@machsunssr2257 4 жыл бұрын

Great, i have same problem too

@Art_and_Flavour 4 жыл бұрын

Thanks!

@user-qj1wu4jt3r 4 жыл бұрын

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.

@opeyemialatishe1944 2 жыл бұрын

you just saved me 🥲🥲🥲

@asdf09er 4 жыл бұрын

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.

@developedbyed 5 жыл бұрын

This took a while to process sorry about that! But this was really fun to make!

@jaygreg6329 5 жыл бұрын

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!

@mustafaaur4019 5 жыл бұрын

Iam having trouble with the fill property.its not filling the svg as you did in the video pls help.

@kovevideo 5 жыл бұрын

@@mustafaaur4019 same problem here

@suzamuidesign 4 жыл бұрын

3d image hover css kzfaq.info/get/bejne/r990mNxirs_IYJc.html

@DebasishDas-vp5dg 4 жыл бұрын

I write every single code and it didn't work can you help me sir ??

@joyahmed_007 4 жыл бұрын

Appreciate it a lot. And changing the stroke linecap and linejoine worked perfect for me... stroke-linecap="round" stroke-linejoin="round"

@emanuelamaviglia7919 3 жыл бұрын

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 :)

@nitinkanhurkar3450 Жыл бұрын

Yes but whats the point of doing that if we dont get stroke for animation.?..is there another way to get stroke?

@evakuator8118 5 жыл бұрын

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

@developedbyed 5 жыл бұрын

thanks for the lovely comment! Will do my best to post alot of videos! Feel free to share the video!

@yaseenshaik2682 5 жыл бұрын

@@developedbyed how to make it responsive

@vladfreishmidt2707 5 жыл бұрын

Yaseen Shaik set width for svg in media-queries but I’m not sure will the amount of dots will stay the same

@wolfgangr.3268 4 жыл бұрын

@@vladfreishmidt2707 & Yaseen Shaik : Setting width to a percentage (50%) makes it responsive without changing anything else.

@paulsonstechpoint773 4 жыл бұрын

@@wolfgangr.3268 That works!

@josantiago109 5 жыл бұрын

I loved the simplicity of your explanations. Will check out more of your videos for sure!

@DanielRodriguez-iv5rw 3 ай бұрын

I love the way you explain and make everything look so easy, excellent video!

@ammarahmed84 4 жыл бұрын

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.

@stn3042 5 жыл бұрын

little effort, big result - like watching your videos

@Ponk_80 6 ай бұрын

It’s very nice of these guys to create videos for the viewer.

@alex.graywolf 5 жыл бұрын

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

@Surya-vj4yn 5 жыл бұрын

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; })

@samuelrajasingh506 5 жыл бұрын

@@Surya-vj4yn this doesn't work please help

@adnanhakim 5 жыл бұрын

Thanks a lot man!

@samuelrajasingh506 5 жыл бұрын

@@adnanhakim is it working for you

@adnanhakim 5 жыл бұрын

@@samuelrajasingh506 yup!

@japsimransingh9933 4 жыл бұрын

Your tuts are always worth watching

@ob7349 3 жыл бұрын

Time flies so fast with you, you explain so easily, 👍the truth with Js is not very clear for me, but still, thank you🙏🌹🇺🇦

@KeshavAneja 8 ай бұрын

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.

@pauloabraga2 2 жыл бұрын

What you do and what you did, for us, is just a miracle ! Thank you very very much ! Best regards from Paris

@4MXW 2 жыл бұрын

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

@agk2011 5 жыл бұрын

The first video to watch on your channel. Great one. Keep it up.

@TestAccount-uu9vp 5 жыл бұрын

AAAAAAAAAAAAAAAAAAACKmed

@AndresRodriguez-wu6nj 5 жыл бұрын

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 :)

@surpriseclub305 4 жыл бұрын

To all having just one path, write click and flatten your text before copying as svg. Good work anyway Dex Ed.

@marianagrnk 4 жыл бұрын

10:55 "I was garbage ok" hahahah the best, loved the tutorial btw! :)

@d3v431 2 жыл бұрын

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.

@alistaw1866 3 жыл бұрын

I really can't get enough if your tutorials

@welingtonwel8799 3 жыл бұрын

Hello, I'm from Brazil and I'm addicted to your videos, I'm already a new subscriber. Thank you.

@klesk44 5 жыл бұрын

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

@motheomolokwane6769 4 жыл бұрын

Oh man, thank you so much!

@officialsky5430 2 жыл бұрын

thank man been the whole day to find this . god bless

@dreamsage 2 жыл бұрын

Thank you!

@zygimantasjasiunas5240 5 жыл бұрын

I love your enthusiasm. Keep doing a great job! Thanks for the tutorial

@heavenprado2538 3 жыл бұрын

i've been trying so hard to learn svg and this amazing dude just made it so easy omg thank you so much

@nicksparks3543 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. :)

@DDoesT 4 жыл бұрын

I’m so glad I found your channel!

@shikhershukla7650 2 жыл бұрын

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.

@allagligora5534 10 ай бұрын

Thanks Ed, you're the best!

@maresolaris 4 жыл бұрын

I really love your enthousiasm and humor. Very useful video with lots of information. Thank you very much for posting this!

@blasebeg 6 ай бұрын

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 💚

@lachnr0ll 2 жыл бұрын

Awesome tuturial. Simple, effective, creative, and useful.

@wpbites6722 5 жыл бұрын

That was amazing! Loved it.

@isaacdaniel9180 3 жыл бұрын

Quality content. Really enjoying your videos.

@Sausty 3 жыл бұрын

Thanks Ed, this is really great. So many posibilities!

@vanjacvetkovic3788 5 жыл бұрын

Keep making videos! And smiling too 😁 Great work, thank you!

@kendalljones99 4 жыл бұрын

I've been binging on your videos the last couple of days and have learned a ton! Thanks!

@anmolsekhon3865 4 жыл бұрын

I clicked few ads just for this guy!

@m75172 4 жыл бұрын

I love your energy! And the video was really helpful - imagine all the possibilities!

@avashurov 2 жыл бұрын

That looks so awesome! That’s for sharing!

@tom5890 4 жыл бұрын

I've been confused about SVG animation forever, using hacks here and there. This is a very nice tutorial!

@tam2000k2 4 жыл бұрын

Beautiful, absolutely beautiful

@IshchenkoVitaliy 2 жыл бұрын

thank you friend! Thanks to your video, I made an epic loader based on the company logo :)

@jonahbutler9079 4 жыл бұрын

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. (:

@karmahchannel 5 жыл бұрын

Its'cool, that's exactly i've been looking for

@dragosdesign4563 5 жыл бұрын

more css and js effects please. Great work on this tutorial. I just subbed to your channel.

@r.gtz.4521 4 жыл бұрын

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.

@brx_error2350 4 жыл бұрын

thanks mate

@pranavchandra1662 5 жыл бұрын

That is really amazing, thanks for bringing such great content, love your creativity :)

@pabloenina 10 ай бұрын

Thank you, works perfectly

@resty1672 3 жыл бұрын

Its amazing you made such complex skill feels understandable, thank you so much !

@Drzfinest929 4 жыл бұрын

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 !

@RC-bl2pm 4 жыл бұрын

This is a fantastic introduction to SVG manipulation. I really appreciated this lesson, thanks so much for sharing.

@AymanLkhawa 4 жыл бұрын

YOU'RE THE BEST WEB DEV IN THE WORLDDDDDDD !!

@jaysenb 2 жыл бұрын

my man, always on point

@abhishek_k7 5 жыл бұрын

Awesome animation effect! Thank you!

@breckiam 2 жыл бұрын

Aweomse tutorial, thank you!

@goranmaras5216 4 жыл бұрын

Delete ... if you want to apply stroke-dasharray, then change paths stroke width to 4

@juliamovsisyan593 2 жыл бұрын

You are my programming motivation 👨‍💻

@reedbrousseau5884 5 жыл бұрын

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.

@gazzzou 5 жыл бұрын

Love your tutorials! keep it up please!

@trustjamin3023 4 жыл бұрын

I really enjoyed how you made everything fun, thanks for making this tutorial been looking for something like this

@devwhoisstuck 11 ай бұрын

saved myy dayyy buddy !!!!!!!!!!!!!!!!!!!!!!!!!!! mayy the forceee bee withhh youuuuuuuuuuuuuuuuuuuuuuu

@unknown_channel_name 4 жыл бұрын

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.

@Al_Gonzo 4 жыл бұрын

Interesting video. Your collab with web dev simplified got you a new viewer

@23Miniatures 4 жыл бұрын

Wow, your tutorial is really smooth and your reaction is so friendly,

@alanchen4257 Жыл бұрын

I just love it😍

@nocturno7887 3 жыл бұрын

Thank you Ed!

@anasyunus3389 4 жыл бұрын

Hey Yo....Yours Is the most perfect understandable video i have seen. Please continue making such videos

@luis96xd 3 жыл бұрын

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 😱

@khaledoghli1894 5 жыл бұрын

Man i love the way you talk with video .. 💙

@chans9055 5 жыл бұрын

Always thank you for your great tutorials.

@kermitthefrog5885 4 жыл бұрын

It was a very simple way yet cool result to animate a text. thumbs up :)

@shahbokhari 5 жыл бұрын

Beautiful work man! Thank You

@suryanath8150 3 жыл бұрын

Finally even though I am a python dev I subscribed

@stylesg7818 5 жыл бұрын

Finally!! This is how it's made. Thank you so much!

@alexlegoG 2 жыл бұрын

Amazing video! Really elegant and easy to implement design idea!

@Chocokaylarobin 4 жыл бұрын

You are the absolute BEST!!!

@oleersoy6547 2 жыл бұрын

Such a cool video!!

@nihaltiwari2479 4 жыл бұрын

you are so cool i just love your videos keep going.

@milosleng1175 3 жыл бұрын

this guy is a CSS god.

@mohammedmuizz4825 5 жыл бұрын

Love your videos .. its super helpful being a starter into web designing and development.. superb bro loads of love .. ❤️

@mahdiazizi6342 5 жыл бұрын

Bro u are sick 🔥🔥🔥

@RazerCrick 4 жыл бұрын

Exporting multiple path is painful in FIGMA. I had to do it for each letter. Don't know what went wrong. Anyone else facing the same issue!?!

@jugaltiwari5908 5 жыл бұрын

I Love your videos Dev Ed. Thank You so much.. Really appreciate your creativity.

@johnyacoub2290 4 жыл бұрын

I really enjoyed it . keep it going man! thumbs-up!!

@luisvargas7525 4 жыл бұрын

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)

@cintron3d 4 жыл бұрын

Excellent tutorial, and very creative idea. Thanks!

@sparrowestes962 2 жыл бұрын

Excellent. So fun!

@necrobahamut 3 жыл бұрын

This was awesome!

@saumyashukla5013 4 жыл бұрын

Thank you Dev Ed... You are amazing💥

@juanignaciolandolfi3673 2 жыл бұрын

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.

@samitmanjunath9043 2 жыл бұрын

thx