Customizable typewriter animation with CSS
VloĆŸit
- Äas pĆidĂĄn 5. 08. 2024
- After seeing a tweet from Prantham on Twitter (make sure to give him a follow: / prathkum ) I wanted to make my own typewriter effect using only CSS!
My goal with this was to make it as customizable as possible, so if you changed the text you could update it as quickly as possible using custom properties.
đ Links
â The code from this video: codepen.io/kevinpowell/pen/Ex...
â If you're new to custom properties, watch this: âą CSS Custom Properties
â All about ::before and ::after : âą Before and After - CSS...
â min(), max(), and clamp(): âą min(), max(), and clam...
â Fun Glowing Neon Button effect: âą Create a neon button w...
â Other fun CSS effects: âą Fun CSS effects
â Follow Jhey on Twitter for incredible CSS stuff: / jh3yy
â Timestamps
00:00 - Introduction
01:41 - Use a monospace font
02:19 - Setting the stage with pseudo-elements
03:55 - Animation to reveal the text
05:45 - Improving the animation with steps()
07:16 - Using max-content for the width
09:18 - Making the text look like it's being revealed
09:46 - Adding the caret
11:48 - The blinking animation
14:48 - Making it easier to customize
16:01 - Animating the other text
#css
--
Come hang out with other dev's in my Discord Community
đŹ / discord
Keep up to date with everything I'm up to
â www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
đș / kevinpowellcss
---
Help support my channel
đšâđ Get a course: www.kevinpowell.co/courses
đ Buy a shirt: teespring.com/stores/making-t...
đ Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my CZcams channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
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.
Thanks so much, and keep at it!
I am down on the same path and its true it helps me keep pushing myself to learn more.
keep it up guys, the same reason why I started learning css 7 years ago
@@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.
@@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.
That steps function is really cool.
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!
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.
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!
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!
Thanks :)
animated Box With CSS
czcams.com/video/gBmx3RmThDE/video.html
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.
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
Dude this is PURE GENUISNESS! Loved the tricks.
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! đđâ€đđ·
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.
Wow, really improves the look. Thanks! :)
Thank you! It got better.
well, this kills the practical typing animation.
@@gykonik hvhgbhj
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
I love tips like this, straightforward and simple.
Thanks for the content - Iâve learned a lot from you. Keep âem coming!
I'm 33 year old and just start to learn html/css , and you inspire me! Thanks Kevin, you're really really good teacher!
You're brilliant at explaining things. Thank you so much!
Dood Kevin you are a mind reader. I wanted to learn this effect for work and my portfolio.
So amazing. Thank you sir. I really love this typing effect.
You are the best mate, cheers really; sometimes I just hit the like buttons of your videos with out even watching them.
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)
I already knew it but somehow I forgot it, so I actually opened notepad because I remembered that it has the same feature đ
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 :)
exactly! thats called a smooth caret
for the speed of the cursor you could use calc( var(--typewriterspeed) / var(--typewriterCharacters)) , i think
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.
ive always found that super annoying, the cursor feels like its lagging behind when you type quickly ( i type 120 - 140 wpm )
I try this on my portfolio ,great work Kevin
this is probably the channel i need to finish my project
I was thinking about this a few days ago, and it finally popped up :)
This is very helpful! Thanks so much Kevin!
dude, you are a pro in CSS, I'm subbing to you right now!
only one of your videos solves many of my problems.thanks boss
Great work. Learning from the greatest masters.
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
animated Box With CSS
czcams.com/video/gBmx3RmThDE/video.html
In your every video I learn something new.
Awesome!!! Thanks for the class!!
Amazing tutorial... not only the content but also your explanations are so on point
animated Box With CSS
czcams.com/video/gBmx3RmThDE/video.html
You are the reason of why i still can't start learning JS after Html and Css
Thanks Kevin; thatâs awesome! đđ
very amazing idea i am so excited from this.
Very nice ! Thank you Kevin !
Super idea, hats off Kevin..... âïž
Really great. Thanks for the wonderful videos.
Dang clever trick and nice explanation! Clip-path would help remove the dependency on the background color ;)
Good episode, I made the clip path version here: codepen.io/Event_Horizon/pen/RwpQNyB?editors=1100
I know it's late but can you explain how to use clip path cuz I have an image as background
I hated css and you make me love it. Thank you kevin!
wow this was cool I didn't know about this steps animation thank you soo much
đź I thought it was a old video. This video is just right on time đŻđŻđŻđŻ
This is pretty cool!
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. :-)
animated Box With CSS
czcams.com/video/gBmx3RmThDE/video.html
Great explanation, love your videos
OMG I didn't notice the headphones until you said
Love your videos!
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!
Thank you, Dr. CSS
Very fun might have to try in my portfolio page
Steps! i had no idea. Thank you.
Another super cool video đ
You're great Kevin.
awesome vid keep it up man i also use typing animation on my website and it looks nice
Alright alright, I'll subscribe that's pretty cool
What a tricky animation đ awesome đ
Amazing tutorial sir!
Nice, thnx for uploading.
CSS animation is really really strong.đ„°
Thank you very much for such a great content
Thka mate!! you are a master!!!
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!!!!
animated Box With CSS
czcams.com/video/gBmx3RmThDE/video.html
Nice video, Good Job!
wow nice explanation. thank you so much
Thanks so much i can finally make my own website!
Yay! New Learning Thanks Mr.
From a Grade 12 studentđ
Very cool
This technique might add a subtle bit of bling to my portfolio website that I am developing.
I Just dive in animation and it's really Fun. the video is awesome nicely explained
Thank you!
Thank you, very useful
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.
Excellent , Thank you man!
animated Box With CSS
czcams.com/video/gBmx3RmThDE/video.html
Thanks, you rock !
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
Clever boy!!!
Yet again I learned something new from you. Didn't knew about steps() for animation
animated Box With CSS
czcams.com/video/gBmx3RmThDE/video.html
nice work thanks
Wao this is incredible
CSS guru đ
really cool thanks, however when you are developing for smaller sized screens and the h1 content takes up 2 lines the "caret" reveals both words at the same time so it looks like its typing out 2 words which are on different lines at once ? How do you fix this
Wow I thought i will be simple. 20 minutes for so simple effect
Nice Anim!
Hilariously ingenious
Awesome
I am having background image so what should i put as background in the h1::before to get the typing effect?
What good videos, greetings from Peru
For a moment I checked the video playback speed. it felt like I was watching at 1.25 or 1.5 đ BTW nice tutorial
Thanks for the video.
for some reason I'm still getting issues animation, im still getting that choppy reveal even after following all the steps.. could it be because of the font im using?
Perfect, tutorial. Thank you!
animated Box With CSS
czcams.com/video/gBmx3RmThDE/video.html
The video is awesome
ok but, is there any reason to use css over a traditional animation? I feel like the load time would be pretty much exactly the same.
Hair cut done đđ styling looks good css
Super !!!
awesome
Is there any way to do it *without* a monospace font?
Very smart, if I knew about "steps" then I guess I could have figured it out...the more you know
what if the background is transparent? because I have a 3d animation video as my website background??? pls help
What if you wanted to make that cursor line instantly go transparent, instead of fading to transparent?