Customizable typewriter animation with CSS

No video

Customizable typewriter animation with CSS

Рет қаралды 346,097

Kevin Powell

Күн бұрын

Пікірлер: 354

@primalscream40 3 жыл бұрын

I’m totally new to html/ css. The stuff that you create with css just totally makes me keep pushing myself to learn more. Your an inspiration to me. Keep up the awesome work.

@KevinPowell 3 жыл бұрын

Thanks so much, and keep at it!

@kaustubha7371 3 жыл бұрын

I am down on the same path and its true it helps me keep pushing myself to learn more.

@daleryanaldover6545 3 жыл бұрын

keep it up guys, the same reason why I started learning css 7 years ago

@primalscream40 3 жыл бұрын

@@daleryanaldover6545 I’ve got a question. When I’m in html/css and have live server open. How can I make my browser scale to adjust without having to release the window to see the changes take effect. Make sense.

@daleryanaldover6545 3 жыл бұрын

@@primalscream40 if you mean the same as in Kevin's videos where he saves the file and browser automatically updates the saved changes. Then, try searching for the term "Hot reloading or Live reloading". You need to install some dependency depending on what framework you are working on. If you are using VS Code, you can install Live Server extension as it features live reloading out of the box.

@MrMeszaros 2 жыл бұрын

Hey, to get a better bink cursor: change to steps(2, start) - with infinite, this will cycle through the two end-states use visibility: hidden instead of background: transparent - this will ensure no transparency blending occurs.

@gykonik 2 жыл бұрын

Wow, really improves the look. Thanks! :)

@alysonsantos4686 2 жыл бұрын

Thank you! It got better.

@govindptl Жыл бұрын

well, this kills the practical typing animation.

@ujjawalmaru8048 Жыл бұрын

@@gykonik hvhgbhj

@captainray7465 3 жыл бұрын

That steps function is really cool.

@MrSupdup 3 жыл бұрын

I just wanted to say that after watching your Neon video I instantly subscribed, and now seeing this video I'm a permanent fan. You're showing me really cool CSS tricks that I can actually imagine using in my projects (this one I'll actually be using in my next project, so thank-you for that!), in a way that is extremely digestible. The way you work through your logic out loud is exactly how my brain thinks, you have an excellent educational style and I'm really appreciative of the content and the effort!

@KevinPowell 3 жыл бұрын

Thanks :)

@charusharma7872 Жыл бұрын

animated Box With CSS kzfaq.info/get/bejne/naidq5aD0rrMdHk.html

@Gloom-Grave 3 жыл бұрын

The icing on the cake would be if you can make cursor movements from one position to the next fluid. That's what I really enjoy about MS Office :)

@mariocamspam72 2 жыл бұрын

exactly! thats called a smooth caret

@dawatcherz 2 жыл бұрын

for the speed of the cursor you could use calc( var(--typewriterspeed) / var(--typewriterCharacters)) , i think

@RondellKB 2 жыл бұрын

This is actually easy, a little cumbersome but very straightforward. Instead of using the step function, you can manually enter fixed points in the animation, and for each one, add to the left position, the width of one character. Example. Say your word has 10 characters in it, instead of doing step(10), you can add animation points: 10%, 20%, 30%, and so on up to 100%. Since the font is monospaced, each character will have the same width, find the width of one character, and in each animation point, add the width of the character to the current value of left. the result is a smooth transition from one character to the next.

@fruitygranulizer540 2 жыл бұрын

ive always found that super annoying, the cursor feels like its lagging behind when you type quickly ( i type 120 - 140 wpm )

@deathstarhz3426 3 жыл бұрын

Pro Tip: If you want to find out how many characters are in any given amount of text, highlight it in vs code, and look at the bottom bar, it should say "Ln ##, Col ## ( [number-of-characters] selected)

@b3nj4m1nyt Жыл бұрын

I already knew it but somehow I forgot it, so I actually opened notepad because I remembered that it has the same feature 😆

@AbdicateDotNet 3 жыл бұрын

Wow!! I've been "playing" in HTML/CSS since their inception (revealing my age) and I am so happy for CSS 3! What a difference! Thank you for teaching an old dog new tricks! I am going to WOW folks now! 👍🙌❤😊😷

@emmanuelibuaka4118 3 жыл бұрын

The first sign of a good tutor is that he's not afraid to refer you to persons or resources that he knows can help in your learning journey. Much ❤️ Kevin

@Reloko369 3 жыл бұрын

Thanks, men. What you do is gold to me. I'm 36 years old and learning from 0 HTML, CSS, and JS. You make me realize the power of CSS in all this. I love the passion you put into it. Also, I have to say, your English is crystalline for me (Argentinian). I reconnect to learn this language with your videos.

@mimoduocss 3 жыл бұрын

Dang clever trick and nice explanation! Clip-path would help remove the dependency on the background color ;)

@xXYourShadowDaniXx 3 жыл бұрын

Good episode, I made the clip path version here: codepen.io/Event_Horizon/pen/RwpQNyB?editors=1100

@_AverageGuy 2 жыл бұрын

I know it's late but can you explain how to use clip path cuz I have an image as background

@unnervingibet117 2 жыл бұрын

I’m learning python but watching this on CSS was such a blast, I think I’m just obsessed with code, it’s so fun to watch and learn and to make matters better, you’re very entertaining

@charusharma7872 Жыл бұрын

animated Box With CSS kzfaq.info/get/bejne/naidq5aD0rrMdHk.html

@soumyajitdey5720 3 жыл бұрын

I love Kevin so much. A CSS guru! I used to hate CSS so much because I didn't understand it properly and now after knowing the basics what he is doing in each line absolutely makes sense. I will surely integrate this in one of my projects.

@zneverending3585 3 жыл бұрын

You are the reason of why i still can't start learning JS after Html and Css

@zachjensz 3 жыл бұрын

OMG I didn't notice the headphones until you said

@0x007A 2 жыл бұрын

This technique might add a subtle bit of bling to my portfolio website that I am developing.

@Victor_Marius 3 жыл бұрын

Yet again I learned something new from you. Didn't knew about steps() for animation

@charusharma7872 Жыл бұрын

animated Box With CSS kzfaq.info/get/bejne/naidq5aD0rrMdHk.html

@alicianunez7801 3 жыл бұрын

Thank you so much for this! I had trouble with my cursor going past my text but the display: grid and the width: max-content completely fixed it! You're the only person on the internet that was able to solve it!

@xrgiok 2 жыл бұрын

I'm 33 year old and just start to learn html/css , and you inspire me! Thanks Kevin, you're really really good teacher!

@codehal Жыл бұрын

Amazing tutorial sir!

@Ana-hc1cf 3 жыл бұрын

Ugh, I needed this so badly two weeks ago, I just wanted to add this animation to my website and didn't find any good tutorials, I am happy now

@calin-andreipantis-simut6241 2 жыл бұрын

Man, your videos are so inspiring, I am following you since the beginning where I didn't know what CSS even is. Now I am a developer and still find your videos to be so amazing. Keep going, you're doing a great job. I really appreciate your work! Congratulations!

@johndoggett4657 3 жыл бұрын

Dood Kevin you are a mind reader. I wanted to learn this effect for work and my portfolio.

@plejra Жыл бұрын

Wow I thought i will be simple. 20 minutes for so simple effect

@shaheerkhan_khawjikzai Жыл бұрын

I try this on my portfolio ,great work Kevin

@AshishKumar-rq8gb 3 жыл бұрын

Man. Thankyou so much. I have been working as a front end dev for 1 year and I was so afraid of using animations. Rather I should say, I never tried them. And you taught them through this so easily. Thanks a ton. I am going to follow all your tuts now and see how well I can do. :-)

@charusharma7872 Жыл бұрын

animated Box With CSS kzfaq.info/get/bejne/naidq5aD0rrMdHk.html

@UniqueBots 3 жыл бұрын

Dude this is PURE GENUISNESS! Loved the tricks.

@commentmyideas4523 3 жыл бұрын

Hair cut done 😂😂 styling looks good css

@ibrahimkedir2280 2 жыл бұрын

You are the best mate, cheers really; sometimes I just hit the like buttons of your videos with out even watching them.

@mmaismma 3 жыл бұрын

What would have been more clever would be adding a border-left to :before instead of going with :after.

@advanceringnewholder 3 жыл бұрын

this is probably the channel i need to finish my project

@__matthi 3 жыл бұрын

You're brilliant at explaining things. Thank you so much!

@soyaiburrahman3806 3 жыл бұрын

only one of your videos solves many of my problems.thanks boss

@CloudBroadcasts 3 жыл бұрын

Thanks for the content - I’ve learned a lot from you. Keep ‘em coming!

@Pierregouchet 2 жыл бұрын

It would be interesting to pause the blinking while it's "typing", as a normal caret acts when you type something, and then blink only when it's idling. I guess you could do it by adding a few steps to the keyframes, but that would require a lot of maths to have it right ! :D I might try it anyway.

@AJman14 2 жыл бұрын

And there shouldn't be a fading animation. Just a blink. On/Off.

@Pierregouchet 2 жыл бұрын

@@AJman14 yup !

@Morrile1 3 жыл бұрын

I love tips like this, straightforward and simple.

@i_am_pasindu 3 жыл бұрын

For a moment I checked the video playback speed. it felt like I was watching at 1.25 or 1.5 🙄 BTW nice tutorial

@vin-kry 3 жыл бұрын

Thanks a lot KP for this Tutorial!!! Actually, As a React developer I was using tract Typical for such typewriter effects. But wanted to create it with Css but unable to create. Now I can create easily... Thanks a lot!!!!

@charusharma7872 Жыл бұрын

animated Box With CSS kzfaq.info/get/bejne/naidq5aD0rrMdHk.html

@JaskSkull1991 2 жыл бұрын

Bro! Thank you! I am building my website to showcase my blockchain and cybersecurity projects and was looking to add a typewriter effect and nothing worked, but yours solution did! Thank you!

@ankurc 3 жыл бұрын

Very fun might have to try in my portfolio page

@codecruz 2 жыл бұрын

Now add the codename kids next door typing sound and we have a banger

@cwang9945 3 жыл бұрын

So amazing. Thank you sir. I really love this typing effect.

@waseem_498 2 жыл бұрын

Are we not going to talk about the Chicago accent at 1:07 “javascript” lol great videos I learn so much

@KevinPowell 2 жыл бұрын

Haha, first time I get someone saying I have a Chicago accent, but I definitely hear it there, lol. I'm in Montreal, Canada, so not a common accent to sneak in, lol

@waseem_498 2 жыл бұрын

@@KevinPowell I just got back from Chicago so I heard it immediately 😂

@theshowwatcher3414 3 жыл бұрын

In your every video I learn something new.

@softvibes1602 3 жыл бұрын

dude, you are a pro in CSS, I'm subbing to you right now!

@AA-oi9ru 3 жыл бұрын

dear sir one piece of advice when you are trying to connect over codepen to see this amazing video it is saying refuse to connect to fix this you can use TARGET inside the link

@emmanuelrf 3 жыл бұрын

No sooner had I finished the video than I started fixing the hardcoded characters length via JavaScript. Here's my solution: document.addEventListener('DOMContentLoaded', () => { // add typewriter class to any elements you want to animate. const elements = document.querySelectorAll('.typewriter'); elements.forEach(element => { const { length } = element.textContent; element.style.setProperty('--typewriterCharacters', length); }); });

@prithwimanmazumdar4706 3 жыл бұрын

You know you could actually get the caret without using a pseudo element, just set the left border of the covering div to 2px solid black. It would give the same effect without the need of a pseudo element, but great work man, totally loved this.

@mataca9 2 жыл бұрын

Cool trick! Another way to do this, is if you are using sass, you can split a word in letters and then use a for to create the steps of animation putting the letters as an acumulation on the content property. Using flex and before in the main div and inside this div the cursor, as the cursor and the before are children, the cursor will move as the content is incremented. :D

@dylancam812 2 жыл бұрын

How do you use sass to split up the word. I’m trying to do it this way but I’m having some trouble

@charusharma7872 Жыл бұрын

animated Box With CSS kzfaq.info/get/bejne/naidq5aD0rrMdHk.html

@SuatBarlak 2 жыл бұрын

With the @Keyframes blink like this, you get a shorter transformation from transparent to black and back, which in my opinion looks a bit better @keyframes blink { 20% { background: black; } 25% { background: transparent; } 75% { background: transparent; } 80% { background: black; } }

@arunsp767 2 жыл бұрын

Thanks for the lovely tutorial. I have observed that while we are typing something, the blinking isn't there. The blinking kicks in once the typing is done. So maybe we should've had the blinking effect only before and after the typing animation. Also, the fade-blink is looking weird. Can make it abrupt using steps I guess.

@gamersdestiny403 3 жыл бұрын

😮 I thought it was a old video. This video is just right on time 😯😯😯😯

@rezarahman1782 3 жыл бұрын

CSS animation is really really strong.🥰

@teal4069 3 жыл бұрын

Amazing tutorial... not only the content but also your explanations are so on point

@charusharma7872 Жыл бұрын

animated Box With CSS kzfaq.info/get/bejne/naidq5aD0rrMdHk.html

@skalexshanghai Жыл бұрын

Awesome!!! Thanks for the class!!

@AdityaDhungana 3 жыл бұрын

You're great Kevin.

@baharhussain6308 3 жыл бұрын

very amazing idea i am so excited from this.

@bobrobertsNotUrBob 3 жыл бұрын

Very smart, if I knew about "steps" then I guess I could have figured it out...the more you know

@yutaishere 3 жыл бұрын

This is very helpful! Thanks so much Kevin!

@whoman0385 2 жыл бұрын

Thanks so much i can finally make my own website!

@Baljeettest 3 жыл бұрын

Super idea, hats off Kevin..... ✌️

@yauhenisafronau9302 2 жыл бұрын

Great work. Learning from the greatest masters.

@brunomocellin 2 жыл бұрын

I'm just entering the world of programing but i already understand the logic behind it. Your video is so cool as you add steps to it. I'm willing to make an Alert (StreamElements) with that effect, just need to think how the variables of text, text size and names will fit.

@lyckagennie6039 3 жыл бұрын

Yay! New Learning Thanks Mr. From a Grade 12 student😊

@raigallino 2 жыл бұрын

I hated css and you make me love it. Thank you kevin!

@CarlosHernandez-tg3vj 3 жыл бұрын

Alright alright, I'll subscribe that's pretty cool

@dancehalllyrics1303 3 жыл бұрын

Quick tip: Instead of having to add the font to all elements individually, you can simply add it to the universal selector.

@KevinPowell 3 жыл бұрын

fonts are inherited, so if you put it on the body or html, everything will get it, no need for a universal selector :) - I had two different fonts here, so I applied a different one to each element specifically.

@dancehalllyrics1303 3 жыл бұрын

@@KevinPowell Alrighty! I’ve just experienced that elements’ text that isn’t directly on the body (e.g. some text on a button, because the button itself is between the body and the text), doesn’t get the font family, if I just go ahead and add it on the body without I then also go ahead an add it to the element itself (if all of that makes sense)? That’s why I always add my font to the universal selector amongst my other reset/default stylings.

@ChrisPirillo147 3 жыл бұрын

I was thinking about this a few days ago, and it finally popped up :)

@wolfrust0 2 жыл бұрын

“To make the ease easier “ tug tuh

@habibthekhan 3 жыл бұрын

wow this was cool I didn't know about this steps animation thank you soo much

@Tiger1AuasfE 2 жыл бұрын

Nice, thnx for uploading.

@bunnydevx 3 жыл бұрын

awesome vid keep it up man i also use typing animation on my website and it looks nice

@sanjibchanda21 3 жыл бұрын

What a tricky animation 😅 awesome 👌

@dave6012 3 жыл бұрын

Steps! i had no idea. Thank you.

@witheredgroup 3 жыл бұрын

Is there any way to do it *without* a monospace font?

@SothearithKONGMrMuyKhmer 3 жыл бұрын

Thanks Kevin; that’s awesome! 👍😍

@danielcir8675 3 жыл бұрын

Thank you, Dr. CSS

@MrStefanica 3 жыл бұрын

Very nice ! Thank you Kevin !

@sanmeetsingh4 3 жыл бұрын

Another super cool video 😎

@binitdemta3793 3 жыл бұрын

Really great. Thanks for the wonderful videos.

@TungNguyen-dr3ue 3 жыл бұрын

Great content. You're my inspiration for learning more and more. Thank you very much!!! Hope you have a beautiful day. P/s: I think it will look really amazed if there is an intro for your video

@GeorgeNorberg 2 жыл бұрын

Love your videos!

@devc_ 3 жыл бұрын

Great explanation, love your videos

@himalmevada7989 3 жыл бұрын

I Just dive in animation and it's really Fun. the video is awesome nicely explained

@UnlucksMcGee 3 жыл бұрын

I think the text cursor/caret shouldn't blink while currently typing. Since in real life, it only blinks when it's idle.

@KevinPowell 3 жыл бұрын

That's true! Some tweaks to the animation would make it work :)

@jpzro3158 3 жыл бұрын

This is pretty cool!

@dawatcherz 2 жыл бұрын

for the speed of the cursor you could use calc( var(--typewriterspeed) / var(--typewriterCharacters))

@charusharma7872 Жыл бұрын

animated Box With CSS kzfaq.info/get/bejne/naidq5aD0rrMdHk.html

@cintron3d 3 жыл бұрын

lol I feel naked without my headphones on and will wear them whenever I'm at my desk, music or not.

@cameronhumphries2377 3 жыл бұрын

im the opposite, if no music is playing i feel weird with headphones in

@codedynamics1 2 жыл бұрын

Lol

@BrunoMussoi 3 жыл бұрын

I guess it can also work by shrinking the h1 to 0, and animate it back to its normal size. This way you would not need to cover the letters with the background color.

@Victor_Marius 3 жыл бұрын

And use the right border for the caret. But if you have anything to the right of the element it would be moved around, but maybe this side effect is the target result.

@KevinPowell 3 жыл бұрын

The issue here is you can't animate to `max-content` (same with auto). If you had a fixed final size it would work, but I wanted to make it easy to update :) - You could use JS to figure that out too, if you really wanted to use that approach, but it seems like more work than using an extra pseudo-element :)

@Victor_Marius 3 жыл бұрын

@@KevinPowell what if you set width to 24ch or same number as the custom property used for the animation steps?

@koen8928 3 жыл бұрын

Hey, is there a way to put after this the animation in a gif.. I very like it when it could be in a gif for anything else to make with

@Patrick-ev5ye 3 жыл бұрын

Screen record it with obs and convert it to a gif

@mdazizulislam2498 3 жыл бұрын

wow nice explanation. thank you so much

@anjor3206 3 жыл бұрын

CSS guru 🙌

@marketinginhouse 2 жыл бұрын

What good videos, greetings from Peru

@youtub4444 3 жыл бұрын

Nice Anim!

@howabadworld 3 жыл бұрын

Nice video, Good Job!

@angelocina5914 3 жыл бұрын

Thka mate!! you are a master!!!

@sametkuIa 3 жыл бұрын

nice work thanks

@susityy2030 2 жыл бұрын

Thank you!

@cameronhumphries2377 3 жыл бұрын

You should of also made it not blink when typing as thats realistic and also had a delay after typing Hello, i feel as though that would of made it more realistic, might not look as cool though but dont know till you try