Vanilla Javascript Text Animation Tutorial

[@flannelbeard4621]

No joke, great tutorial, was just trying to figure this out last month! 👍 It's great to hear you talk the code out, like "this does this and because this is a this it needs a this". Shows me how to think about it next time!

[@adityaray9415]

Thanks For Your Support and Education...We Really Appreciate a Teacher like You.. Happy New Year

[@bruce7012]

Happy new year my gorgeous teacher on the internet

[@mikethegamedev]

Hello im from 2021

[@bioheater]

For everyone who's trying to seperate the words from each other: just insert '&nbsp' (without qotation marks) wherever you want the space to be in your html document.

[@someguy6076]

Thanks for that !! What I don't understand is why the spaces were showing for me early in the tutorial, but then they disappeared for the final product. Even in Ed's example at the end, sometimes the spaces are displaying, but then they are gone in the next cut.

[@fonncatalina6464]

I research on w3school and found a short way to write the setInterval code: let char = 0; let timer = setInterval(onTick, 50); function onTick(){ const span = text.querySelectorAll('span') [char]; if (char === splitText.length){ clearInterval(timer) }else{ char++ span.classList.add('fade'); } } I am noob and new to JS but I tried this , it works!

[@SteeveHoward]

thaaaaaaanks !!!!! you great !

[@CosminSerbanDesign]

You've killed it in 2019, see you in 2020! Happy New Year man!

[@zakariyamohamed6388]

Time Flies we are close end of 2020.

[@ijokerwalker]

I love the way you said : Who need that?

[@ferdousnishan7652]

congrats on 500k sub

[@adrbroadcast]

Hi Ed! This is simply amazing. The way you create these front-end lessons with a practical approach is really inspiring. Keep sharing, my friend!

[@minstreet_studio6265]

I don't know if you gonna see this comment, i only wanna thank you for teaching me Coding i was blank but with you i have now some knowledge........May God give you more years so we can learn more from the tutor.........Happy New Year ED...

[@_tanzil_]

I never get bored watching your videos 😊❤️

[@LocdnessMomster]

You are hilarious; I love when teachers are vibrant.

[@biswajitsaha7862]

Good tutorial Ed, at 11:40 adding display: inline-block; removes the space between two word.

[@Accou25]

I came up with a quick fix of using min-width on inline-block'ed span.

[@biswajitsaha7862]

Yes that is very good, but in case we change the font size then maybe we have to change again the min width, also all letters have no same width unless the font is a mono space font. I think more universal approach would be converting the the space character to the HTML entity   using javascript. char = (char === " ") ? " " : char;

[@alimertc]

Fix => if (textSplitted[i] === " ") { text.innerHTML += "" + "&nbsp" + ""; continue; }

[@alimertc]

@@Nimgimli ops, didn't see yours

[@mhasancoder]

@@Nimgimli Thanks, it works !

[@vanrajrathod08]

I would like to donate 1000 Likes for this tiny but quite creative project. That's the knowledge in our soul that how we use javaScript in creative way. Thank you Ed.

[@ianrelosa2198]

I love how enthusiastic you are. Thanks man great tuts.

[@dharmang]

Damn i had known html for years but i only typed in the tags and was boring when i first tried using it. Now i got to learn css and javascript. BOOO! 🔥 a vast new world of web development has been opened up for me... Thank you so much for making this kind of videos and please keep it coming (especially would appreciate if its tagged with javascript based content). :D

[@kellyc4866]

When it comes to your videos, I usually click the "like" button first before watching. :D

[@DavronFrontedDeveloper-]

Thank you bro i will do this it amazing bro : )

[@ladyafize5689]

How can you be so funny and productive at the same time ? 😅😅😅😅😅 Legendary man hahaha

[@curtism7302]

Your ending was great....

[@Stoney_Eagle]

This is something on my todo list so thank you for this. I wish you a great 2020!

[@muhd.aidilsyazwanhamdan6815]

6:09 - Since splitText is an array, you can also use splitText.forEach((letter, index) => { // some actions });

[@milleniummoses]

I was thinking about that too. How would that look with the "forEach()"?

[@guddetiajaymanikanta]

With use of inline-block..The space has been lost between the names..!!! Very very good content..!! Lots of love from india..!! 😍😍😍😍

[@patricia7149]

"The knowledge in our soul. What?" Hilarious!

[@aprodan5245]

I missheard tech channel to pet channel. I got so excited..

[@dummyaccount6902]

Happy holidays Ed! Ty for all of your tuts! 🎉🎉

[@FlorinPop]

Happy New Year our gorgeous friend!! 🤩 See you in 2020!

[@ademottoman962]

thanks for making more javascript tutorials

[@robertobaez2053]

Amazingly helpful video! This was well worth 14 minutes; the explanations were brief, but thorough and the main example was easy to follow. Hope to see more from you soon!

[@yassinemaataoui5672]

10:06 " Compiler error : an expecting ; is missing x) ", thank you for the explanation you are the best

[@空白-o9q5z]

いつも日本から観てます。 thank you！！

[@besmabensadoune7966]

This is AMAZING !! Thank you so much for the great fun content ❤️

[@farlight6044]

Great video as always! Thanks, and happy new year!

[@letsfilipino]

Happy New Year Ed! Keep up the good work.

[@Armins007]

I'm learning to code and the same time learning English with you haha Gracias por tus clases Thank you for everything Happy New Year

[@balasubramaniam5516]

YES I DID WATCH YOUR COURSE YES I DID BUY YOUR TUTORIAL AND YES IT IS AWESOME. ZHANK you. Happy new year!!!!! We are real tech. Get this thing going my man!

[@bradyward5741]

That was gorgeous :3

[@satya4866]

Awesome video... When it comes to css we need to constantly watch and practice and keep these projects in shelf

[@devlab_academy]

best notification...

[@josephwong2832]

nice short practical tutorial ed my georgous friend

[@priyanshudas2033]

Happy holidays and happy New year to you , Sir.

[@AnonymousUser-vd2st]

Thank you so much! Happy New Year Fancy Teacher! 🙏

[@wherami]

Happy New Year. Look forward to more shenanigans

[@dejankorac7120]

ED you are amazing. All the best in New Year, happy holiday and I cant w8 for new video.

[@vain_za]

My Christmas presents were empty too... until you posted this video :)

[@babayaga6871]

I always love your tutorial! Thank you very much. You're a great developer

[@msvmanikantasrivishnu7788]

Nice hair style deved..👌

[@developedbyed]

thanks! I washed!

[@yogendramaarisetty]

You really made an impressive work man! Keep doing bud. Happy new year!

[@TakamakA88]

You are a very good teacher and i love all of your videos =) Happy New Year and best wishes from my little island, Reunion Island in Indian Ocean =)

[@abe10]

Wish you a very happy new year Ed and thanks for making 2018 so exciting by creating these videos. Love you man!

[@henrikasteberg1218]

Great tutorial, thank you for this! I implemented it on my portfolio website.

[@jazzdestructor]

Well happy New year to you too mate hope it's a blast for you🎉🎊

[@juliamurschel1120]

i am a new fan! Love your videos!

[@ervanprasetyo1233]

happy holiday ed and thank you for your education, it really help me to understand about web design.. keep going mate

[@thomasfields2082]

Flipping awesome.

[@abolfazljamshidi4628]

You're a role model♥️❤️♥️❤️♥️

[@kskswu5652]

Happy New Year , my friend

[@s11o-4]

If for some reason the animation doesn't work, use this line in your code .fade:not(.show) { opacity: 1; } i wish that help someone! pd: Thank for share this knowledge Dev Ed

[@vishaldas5692]

Thanks buddy it hepled me😁😃🌝

[@dannypacheco4425]

tks, very helpfull, i have the same issue. I dont know why, so im very pleased if someone explains me that.

[@xuanhuynh5952]

Thank you very much ! You are magician ! I love putting animation effect on my website.

[@ryanbiztech9181]

Short & Sweet

[@tylermorales9043]

working on a project will this will fit in so perfectly! Thanks!!!

[@samnmeje3486]

on my, you make complicated things very easy, thank you so much. You are awesome.

[@pioleonardo]

This is really great Ed. Thank you so much for the time!

[@chethannp5981]

Happy new year bro... thank you so much for everything 🥳🎉 love the way you speak...feels like Jim Carrey teaching Javascript lol 😀

[@aliyatursynzhanova5611]

wow, it was super interesting! thank you for all your tutorials!

[@patrickc.6183]

Awesome effect!

[@abirbhattacharya3308]

I am watching this today and I got a new year wish :))

[@keithanphilander3630]

Love the wolverine hairstyle

[@agamurat3019]

perfect explanation

[@syedacodes]

🔥👏🏻thank you for all the cool tutorials!

[@martinmclean5985]

Would love to see more videos like this. See you in 2020!

[@yashsolanki069]

You are just simply Superb✌Great work🙌

[@xuqianzhang5554]

I’m astonished that you can type code while talking without any breaks and mistakes. How did you do that?🤩

[@200300646]

Practice

[@b1mind]

I'm in love with gsap, but this is way cool. Happy New Year friend, new sub looking forward to your work into 2020.

[@aingealgleannin]

Thanks so much. I learnt a lot from this tutorial.

[@phatnguyenxuan5570]

Beautiful

[@ridaazzabi3233]

give the span a min-width to 2px for the space between words to remain intact

[@gandalfsnowgrey7037]

GREAT TUTORIAL! I loved every second of it! :) :) Anyone knows how to put spaces between the words??

[@ladyafize5689]

The best thing to start the morning. Thank you :)

[@bhaveshkumarguntuka2078]

Thanks, Happy New year

[@javascriptwar9525]

Always Awesome

[@ashtonblignaut4565]

Thanks for the Inspiration! Legendary videos!

[@tomershechner]

Hey Ed. I really like your style and videos. But, like, I don't know how skillful you are in JS, because you used *3* different variables in order to get the into an array of chars.... you could literally just do it all on the same variable: const splitedText = document.querySelector('.fancy').textContent.split(''); It may be a little verbose, but it's actually way easier and more efficient. Anyways, I love your videos - looking forward for 2020!! Tomer.

[@karlmalks3787]

Not sure about your proficiency as well. You need to have your code reusable and readable In this particular example your approach will work, however it’s not really the recommended one.

[@tomershechner]

@@karlmalks3787 How come? My code works, and it's way more concise and efficient..

[@karlmalks3787]

Tomer Shechner working does not necessarily mean it’s readable and reusable. if(var.toString().len() == 4) { return true;} This will check the Boolean true, it’s working Is it good though ? :)

[@tomershechner]

@@karlmalks3787 No, because you could've just do: return var.toString().len() === 4;

[@karlmalks3787]

Tomer Shechner haha You could if(var) and that’s it.

[@gustavopacheco919]

That's really cool.

[@niharikaniharika6426]

thanks dude it's really worked :)

[@suparnobhattacharya6345]

I was following this tutorial very carefully but at the end when you said "fill it in baby", I just lost it then. 😂

[@쎄쌤독일어]

Vielen Dank für deine tollen Videos. Your passion and devotion are contagious and your awesome videos and they are sooo very helpful =D

[@ojoksimonstephen3555]

This is Awesome

[@ManojSingh-of5ep]

You are the best.. Love your videos

[@sebi4769]

Thank you It Helped me a lot

[@jeminiloco2080]

Fancy Schemnzy!

[@jonahs28]

Thank you for this tutorial!

[@tyrrelldavis9919]

I think alot of those small ui demo channels (channels that walk through simple html css and don't say anything) I think some of those ui demo channels are astroturfed. There's no way a regular person could start and grow a ui demo channel. Not at the scale the gate kept ones do it at, which is Inherently unfair but w/e

[@scnix]

He needs a t-shirt with a "y u do tis" quote

[@sylviacastro2282]

Ok, its awkward. LMAOOOO Omg I love it

[@richyrose99]

this was great thank you so much!!

[@fsniraj]

Cool bro

[@alberto.polini]

Great, i was looking for some nice text animation effect😊

[@osmanhamashool6396]

creative dude

[@amnesia3490]

how cool is that