Vanilla Javascript Text Animation Tutorial

Click on the link below to get 2 months FREE access to Skillshare premium
skl.sh/deved16
Today we are going to have some fun creating this javascript text animation effect that you can make it custom to do whatever you want. You can create a color shift animation or a text pop up animation.
From what I've searched, I only found this javascript effect being made using a library such as gsap, so I thought that we should do a vanilla javascript version for the funz!
Get My latest HTML and CSS Course Here:
developedbyed....
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 me on:
Twitch: / developedbyed
Twitter: / developedbyed
Instagram: / developedbyed
Github: github.com/dev...
#programming #javascript

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

[@bruce7012]

Happy new year my gorgeous teacher on the internet

[@mikethegamedev]

Hello im from 2021

[@adityaray9415]

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

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

[@CosminSerbanDesign]

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

[@zakariyamohamed6388]

Time Flies we are close end of 2020.

[@DavronFrontedDeveloper-]

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

[@kellyc4866]

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

[@ferdousnishan7652]

congrats on 500k sub

[@Stoney_Eagle]

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

[@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...

[@ladyafize5689]

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

[@_tanzil_]

I never get bored watching your videos 😊❤️

[@ijokerwalker]

I love the way you said : Who need that?

[@LocdnessMomster]

You are hilarious; I love when teachers are vibrant.

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

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

[@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.

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

[@patricia7149]

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

[@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.

[@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

[@abe10]

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

[@besmabensadoune7966]

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

[@dummyaccount6902]

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

[@clilianrelo2198]

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

[@dejankorac7120]

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

[@FlorinPop]

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

[@farlight6044]

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

[@letsfilipino]

Happy New Year Ed! Keep up the good work.

[@chethannp5981]

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

[@yogendramaarisetty]

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

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

[@ervanprasetyo1233]

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

[@priyanshudas2033]

Happy holidays and happy New year to you , Sir.

[@curtism7302]

Your ending was great....

[@aprodan5245]

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

[@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.

[@AnonymousUser-vd2st]

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

[@jazzdestructor]

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

[@vain_za]

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

[@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

[@babayaga6871]

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

[@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 =)

[@ademottoman962]

thanks for making more javascript tutorials

[@kskswu5652]

Happy New Year , my friend

[@satya4866]

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

[@juliamurschel1120]

i am a new fan! Love your videos!

[@josephwong2832]

nice short practical tutorial ed my georgous friend

[@bradyward5741]

That was gorgeous :3

[@suparnobhattacharya6345]

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

[@wherami]

Happy New Year. Look forward to more shenanigans

[@pioleonardo]

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

[@guddetiajaymanikanta]

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

[@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()"?

[@martinmclean5985]

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

[@xuanhuynh5952]

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

[@henrikasteberg1218]

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

[@abirbhattacharya3308]

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

[@空白-o9q5z]

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

[@samnmeje3486]

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

[@yassinemaataoui5672]

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

[@abolfazljamshidi4628]

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

[@thomasfields2082]

Flipping awesome.

[@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.

[@aliyatursynzhanova5611]

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

[@syedacodes]

🔥👏🏻thank you for all the cool tutorials!

[@쎄쌤독일어]

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

[@ladyafize5689]

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

[@scnix]

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

[@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.

[@bhaveshkumarguntuka2078]

Thanks, Happy New year

[@devlab_academy]

best notification...

[@patrickc.6183]

Awesome effect!

[@aingealgleannin]

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

[@sylviacastro2282]

Ok, its awkward. LMAOOOO Omg I love it

[@tylermorales9043]

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

[@niharikaniharika6426]

thanks dude it's really worked :)

[@ryanbiztech9181]

Short & Sweet

[@agamurat3019]

perfect explanation

[@ashtonblignaut4565]

Thanks for the Inspiration! Legendary videos!

[@yashsolanki069]

You are just simply Superb✌Great work🙌

[@phatnguyenxuan5570]

Beautiful

[@javascriptwar9525]

Always Awesome

[@gustavopacheco919]

That's really cool.

[@jonahs28]

Thank you for this tutorial!

[@alberto.polini]

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

[@msvmanikantasrivishnu7788]

Nice hair style deved..👌

[@developedbyed]

thanks! I washed!

[@usertmsl]

you are amazing and hilarious💙 jingle bells!

[@ManojSingh-of5ep]

You are the best.. Love your videos

[@richyrose99]

this was great thank you so much!!

[@sebi4769]

Thank you It Helped me a lot

[@keithanphilander3630]

Love the wolverine hairstyle

[@ojoksimonstephen3555]

This is Awesome

[@ridaazzabi3233]

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

[@aadimanchekar1032]

12:06 the whitespace between Fancy and Schemnzy disappeared. Any reason for it ??

[@ilan117]

Happy holidays Mr. Ed. Will you create a JS course in 2020 like you did the HTML and CSS course ? That would be awesome !

[@mirabbosmirsamiqov641]

thank bro, u saved my 2hours ))

[@iberryboi]

"fill it in baby, fill it right up"

[@amnesia3490]

how cool is that

[@osmanhamashool6396]

creative dude