bro, i'm not english speaker, but your video is the only one that i really learn how to do this effect. sorry for my bad english. good job bro ! keep going the job
Nowrap is not put, cursor denotes as border right 5 px assign while minimize ur screen... Border puts entire line... Nowrap necessary for this animation
This is for one line but what about a whole section in which we have ul, h tags , p tags etc I was adding but I didn’t get it I want to add anumatuon effect to whole of a section
how to make an animation of typing and deleting, then there is writing. example type: my hobby is fishing. and deleting fishing. then add to it playing football. like that, if you can please make it
how do i make it work with a paragraph ? I thought about having each line separated and copy past the css for each of them but idk how to delay the animation for each line so they do not happen at the same time
Para los que quieran mejorarlo y poder crear textos de diferentes tamaños sin perder el efecto: - En tu codigo CSS escribe: :root { --typing-steps: 0; } - Modifica dentro de .text{}: .text{ animation: typing 2s steps(var(--typing-steps)), cursor .4s step-end infinite alternate; } - Por ejemplo, dentro de tu index.html puedes crear diferentes textos usando: Hola Hola gente :D Obviamente el numero de pasos debe ser el equivalente al numero de caracteres que tiene la oración (Contando caracteres en blanco)
When I put the steps part, the animation doesn't work. I rmeove the steps and it does work. But I'd really like to make the steps animation. What would be the problem?
I asked the Bing AI and it gave me this and it seems to work. just replace this for everything after line 11 animation: typing 6s steps(15, end) infinite, cursor .4s step-end infinite alternate; } /* cursor blinking */ @keyframes cursor { 50% { border-color: transparent } } /* typing effect */ @keyframes typing { 0% { width: 0 } 33.33% { width: 100% } /* typing ends */ 100% { width: 100% } /* pause for remaining time (4s) */ }
do you guys have any idea about how can i turn this animation into a hover? .giroscopio{ width:100%; white-space: nowrap; overflow: hidden; border-right: solid 2px; animation: typing 2s steps(18), cursor .4s step-end infinite alternate; } @keyframes cursor { 50% {border-color:transparent} } @keyframes typing { from { width:0 } } i want to add something like: father-element:hover .giroscopio {execute the animation}
This is for one line but what about a whole section in which we have ul, h tags , p tags etc I was adding but I didn’t get it I want to add anumatuon effect to whole of a section
Brilliant. Simple, and straight to the point. Thanks
bro, i'm not english speaker, but your video is the only one that i really learn how to do this effect. sorry for my bad english. good job bro ! keep going the job
This is such a creative way to do it! Thanks for sharing!
Beautiful and way easier than I thought. Thank you! :)
Brilliant. Simple and easily done.
this like is for the cat
and this heart
top-tier content, really glad i found this gem.
thanks! thats exacly what i was looking for! very simple
hello, what about if text wraps and you have more lines of text??
he just made a one line solution lol
Nowrap is not put, cursor denotes as border right 5 px assign while minimize ur screen... Border puts entire line... Nowrap necessary for this animation
Thanks so much, I appreciate the work that you do. I love you bro
this works like a charm, thx man!
We can actually use a library for it like typed js which makes it more smoother and responsive
That last line is amazing😂
Terrific! I could not get the typing bar, but that is what I wanted. Thanks for the video!
Simple, Straightforward and easy to understand, Thankss for the info. Btw I liked, how's the cat
he got the finest tuna available on amazon , thx for asking
Brotha you are legend.
This is for one line but what about a whole section in which we have ul, h tags , p tags etc
I was adding but I didn’t get it
I want to add anumatuon effect to whole of a section
How can i add delay to it like after this much time you start ..?
Why doesn't the animation work?
What a cool way to teach
You very good, men !!!
how to make it write 3 words without js ??
How to loop it?
how to make an animation of typing and deleting, then there is writing. example type: my hobby is fishing. and deleting fishing. then add to it playing football. like that, if you can please make it
.typing-animation::after {
content: '';
animation: typing 5s steps(40) forwards, deleting 2s steps(40) 5s forwards;
overflow: hidden;
display: inline-block;
vertical-align: bottom;
}
@keyframes typing {
from {
width: 0;
}
to {
width: 100%;
}
}
@keyframes deleting {
from {
width: 100%;
}
to {
width: 0;
}
}
document.addEventListener('DOMContentLoaded', function () {
var div = document.querySelector('.typing-animation');
var newText = 'playing football.';
setTimeout(function () {
div.setAttribute('data-text', newText);
div.style.animation = 'typing 5s steps(40) forwards';
}, 7000); // Adjust the timing according to your need
});
cool,but I can,t center this animated text.
Any idea how to make this responsive after the animation?
amm.. why does the cursor goes to the right side side of the screen??
brilliant
Thank you very much!
is there any way I could make it work in 2 rows?
I have problème with key frames typing
is there a way to remove the cursor after it completes going over the intended text?
Did you figure this out?
how do i make it work with a paragraph ? I thought about having each line separated and copy past the css for each of them but idk how to delay the animation for each line so they do not happen at the same time
Ehhh it isn't perfect but what i done is i removed the white-space in the css
thank you!
Para los que quieran mejorarlo y poder crear textos de diferentes tamaños sin perder el efecto:
- En tu codigo CSS escribe:
:root {
--typing-steps: 0;
}
- Modifica dentro de .text{}:
.text{
animation:
typing 2s steps(var(--typing-steps)),
cursor .4s step-end infinite alternate;
}
- Por ejemplo, dentro de tu index.html puedes crear diferentes textos usando:
Hola
Hola gente :D
Obviamente el numero de pasos debe ser el equivalente al numero de caracteres que tiene la oración (Contando caracteres en blanco)
I love your video
i am doing the same way. but it's not working!
kalau dibuat looping tapi delay dulu bisa ga mas? caranya gimana?
You asked like? Imma give you a wholeass subscribe
Is there any way I can convert this to an animated gif?
When I put the steps part, the animation doesn't work. I rmeove the steps and it does work. But I'd really like to make the steps animation. What would be the problem?
can you elaborate that more? Maybe you misspelled the animation names or something with the width
@@cluelessexpert I already fixed it. Thanks!!
how did you achieve the fix for this?
@@bw0ns4mdi35
Cool but is it possible to make it responsive?
Hope your cat is well
bro, is there a way to put a delay like 4s then loop again from the start?
I asked the Bing AI and it gave me this and it seems to work. just replace this for everything after line 11
animation:
typing 6s steps(15, end) infinite,
cursor .4s step-end infinite alternate;
}
/* cursor blinking */
@keyframes cursor {
50% { border-color: transparent }
}
/* typing effect */
@keyframes typing {
0% { width: 0 }
33.33% { width: 100% } /* typing ends */
100% { width: 100% } /* pause for remaining time (4s) */
}
@@cluelessexpert thanks bro its working now =)
Its not working for me... What mistakes i made i dont know
do you guys have any idea about how can i turn this animation into a hover?
.giroscopio{
width:100%;
white-space: nowrap;
overflow: hidden;
border-right: solid 2px;
animation:
typing 2s steps(18),
cursor .4s step-end infinite alternate;
}
@keyframes cursor {
50% {border-color:transparent}
}
@keyframes typing {
from { width:0 }
}
i want to add something like:
father-element:hover .giroscopio {execute the animation}
just put the animation property in hover state
good video, but not working infinite property, thanks
Liked for your cat.
How about changing text after typing
if you don't mind using scss try maybe try this codepen.io/geoffgraham/pen/MWVmxQp
wow so simple
is it any way to do this without the typing bar?
You mean the line on the right side?
@@cluelessexpert yeah, i mean that bar that acts like a cursor while typing
Yeah, just don’t add it or make the color transparent
redid everything like you did in the video, the animation doesn't happen at all :(
can you give more details my g, maybe we'll solve it
you sound like vector from arcane
Lmao wish I could donate 1000 likes to feed that stronk cat
source code pls
This is a styled-components version:
const cursor = keyframes`
50% {
border-color: transparent;
}
`;
const typing = keyframes`
from {
width: 0;
}
`;
const typeWriterAnimation = (props) =>
css`
${typing} 4s steps(${props.steps}), ${cursor} 4s step-end infinite alternate;
`;
const TypeWriterWrapper = styled.p`
font-size: 1rem;
letter-spacing: 0.05rem;
font-family: monospace;
border-right: 6px solid;
width: 100%;
white-space: nowrap;
overflow: hidden;
animation: ${typeWriterAnimation};
`;
must donate a like to feed cat
I did one comment too, feed your cat
Only print one line
I wish i could like this vid multiple times to feed your cat, but youtube onyl allows 1 like....
Edit:- i made some typo...
I didn't get it can anybody explain?
Get gud
Just copy🤐
DI MUGAnA HOY YAWA
I am gonna feed your cat with 100 likes
I thought bro said kindly donate 1 lac
What’s that
1 lac means 100k in Hindi@@cluelessexpert
That’s also appreciated
test comment
This is for one line but what about a whole section in which we have ul, h tags , p tags etc
I was adding but I didn’t get it
I want to add anumatuon effect to whole of a section