Maaan these videos are addictive, great job mate. I think you should add a section where you go through the code of the original demo and show us how the person approach the problem different to you and again great video
These videos are very interesting because it shows your thought process in the making of the animations. The issue is you need to slow down 10x for most normal human beings.
In the beginning I had zero idea about how to make this animation. And when you said that we can use only one element my reaction was "wow!! but How!!"
Perhaps a thought for a video or future videos; You mentioned doing it all in CSS as a challenge, my first thought was how else would you approach it. So the video idea might be how to create that in various ways... just an idea. Awesome video! Thanks
I love these videos. This was 40 min well spent. I would suggest tho, maybe break it into 2 parts. Part 1 where you just make it work and part 2 where you refine the code so the videos arent so long. Just a thought.
At 25 and 36 min.. you can add transition on both the before and after cssquery.. It will then animate back and forth .. Btw thanks for a good tutorial
@Web Dev Simplified, at 7:00, is it possible that you have lesser than half of the text showing up bcoz your font-size was set to 1.5rem ( at 3:10 ), so half the height is actually 0.75rem and not 0.5em ?
in the original page, how does the bar that splits the text in half slows down as it reaches the end of it´s length? it´s not like it appears in the center of the text and expands to the end at a regular speed, but instead it is faster in the beginning and slower at the end.
I do not think this is a failed attempt cuz for navigation inside the list elements you would have still had to put the anchor tags so the navigation would point you somewhere sooo this is actually straight good for production... just replace spans with anchor tags :D.
How can you link to an URL when clicking one of the list items? I tried data-url inside the , doesn't seem to work, adding an tag breaks the animation.
Couldn't you have used clip-path to show the bottom half of before and top half of the element instead of messing around with the half height, and later creating another element?
To avoid having to change the HTML to add the split line, you could have used the background with a linear-gradient as the third element with both ::before and ::after ``` background: linear-gradient( to bottom, transparent 45%, var(--hover-color) 45% 55%, transparent 55% 100% ); color: transparent; ```
What about a clip path on the ::before, ::after and a text-decoration: line-through; on your li it would accomplish what you wanted without any extra html
simply you can achieve the same result by clip-path property and inset value on the text itself inset(0,0,50%,0) and on before that it's content is the data atrr clip-path: inset(50%,0,0,0) and then do the animation
how the hell is that second span not appearing on screen cause mine is. I got frustated with the main-text span, how is it you're isn't showing and mine is
also the main-text span is not visible once hovered, but how you're isn't showing before hovering, and the display flex on split-text is not affecting the before element but it is effecting the span main-text
ok, my bad. IF any one had the same problem, just check in html file if you have written home in split-text span, if yes remove that, we only need it in main-text
okaty i really need help its taking me hours to try to make it an acnhor and go to home and about pages , but the anchor link is only working on the higher half of the word home,about etc , and the lower half isnt working... idk what to do am so stuck , will be grateful if anyone helps
Please help Ukraine protect the sky from the Russians. Too many bombs have been dropped on our cities. We fight like lions, but we need your help. Please do something to ask NATO to protect our skies, save the lives of our women and children.
This is a great video, but i am really surprised to see you use Google Chrome for development tools, every developer knows Firefox is superior with this,.
love these series, the way you approach problems really creates a way for us to understand and tackle problem on our own
I love the CSS re-creation videos, don’t stop creating these! These are very fun to watch as a programmer and entertain me a lot
Warning ⚠️⚠️⚠️ this is not Kyle 👆🏾
Maaan these videos are addictive, great job mate. I think you should add a section where you go through the code of the original demo and show us how the person approach the problem different to you and again great video
great work, loved the way you've captured the implementation attempts.
i love that you created re-created CSS creation.
Useful content as always.. By the way we can type var by only typing -- instead of typing whole var. It's okay if you guys know already this
that was extremly great video. would watch more of this
Warning ⚠️⚠️⚠️ this is not Kyle 👆🏾
just wanna say I know nothing about web, CSS, javascript, or Html but I watched the whole video while not understanding anything and I enjoyed it
Well done!
Fantastic content, big fan of the live sessions, really insightful for learners!
These series are super informative. Thanks a lot 👍
Thanks so much for the series :) can we get a "hmm hmm hmm"-counter for the next one xD
These videos are very interesting because it shows your thought process in the making of the animations. The issue is you need to slow down 10x for most normal human beings.
In the beginning I had zero idea about how to make this animation. And when you said that we can use only one element my reaction was "wow!! but How!!"
I love these videos! I've learned so much from you! Thanks!
Warning ⚠️⚠️⚠️ this is not kyle ☝🏾
that was really awesome
I love how many times he says "So nothing is changing which is exactly what we want"
I like this stuff. Awesome!
This is what I like about css. No one is perfect with it. :D
these videos are great!
Perhaps a thought for a video or future videos; You mentioned doing it all in CSS as a challenge, my first thought was how else would you approach it. So the video idea might be how to create that in various ways... just an idea. Awesome video! Thanks
You could create a class in js. And do it with that.
Title: Simple Hover Animation
Video Intro: See how I approach complex problems
Superb stuff, Kyle - took me a while to understand how the split text::after was working with bottom and flex 💪
THANK YOU!
I love this VDO
I love these videos. This was 40 min well spent. I would suggest tho, maybe break it into 2 parts. Part 1 where you just make it work and part 2 where you refine the code so the videos arent so long. Just a thought.
Thanks 🙏🏼
⚠️⚠️⚠️ this is not Kyle 👆🏾
Wow lets gooo😍😍❤💚
This is the best!
great tutorial ! :)
Good to know that even an experienced dev still has no idea what's going to happen when they refresh the page
At 25 and 36 min.. you can add transition on both the before and after cssquery.. It will then animate back and forth ..
Btw thanks for a good tutorial
@Web Dev Simplified, at 7:00, is it possible that you have lesser than half of the text showing up bcoz your font-size was set to 1.5rem ( at 3:10 ), so half the height is actually 0.75rem and not 0.5em ?
in the original page, how does the bar that splits the text in half slows down as it reaches the end of it´s length? it´s not like it appears in the center of the text and expands to the end at a regular speed, but instead it is faster in the beginning and slower at the end.
What is the extension that brought animation attribute with its potential parameters names?
adding "alternate-reverse" to the animation would solve the reversing problem or save you the hustle sorta say right?
Without line inside we can achieve the same by using clip-path in one single html element
Warning ⚠️⚠️⚠️ this is not Kyle 👆🏾
How do u find the motivation to continue when you do a project ?
Warning ⚠️⚠️⚠️⚠️ this is not Kyle 👆🏾
Wow stumbled on your channel a few days ago, great work, love how well you tell about what you are doing!
I do not think this is a failed attempt cuz for navigation inside the list elements you would have still had to put the anchor tags so the navigation would point you somewhere sooo this is actually straight good for production... just replace spans with anchor tags :D.
How can you link to an URL when clicking one of the list items? I tried data-url inside the , doesn't seem to work, adding an tag breaks the animation.
After watching this, I’m going to change my CSS skill level on my resume from Intermediate back to beginner... Cos I obviously don’t know shit😂
Kyle - "Now nothings changing that's exactly what we want".
Me - Huh?
Couldn't you have used clip-path to show the bottom half of before and top half of the element instead of messing around with the half height, and later creating another element?
Another way to remove half of text is by using -webkit-mask. Not sure if that would make it easier but thats another way to do it atleast
Why would you give the li's and ul classes if you can just select the element?
Please show how to make complex form with css like the Schengen visa application form.
good vid
Could it work the first way if you use a transparent gradient? I think it would be easier 🤔
try it and send codepen link?
You actually sometimes have to add transition on the non hover and the hover state
Warning ⚠️⚠️⚠️ this is not Kyle 👆🏾
To avoid having to change the HTML to add the split line, you could have used the background with a linear-gradient as the third element with both ::before and ::after
```
background: linear-gradient(
to bottom,
transparent 45%,
var(--hover-color) 45% 55%,
transparent 55% 100%
);
color: transparent;
```
nerd
When I see all those cool things done in CSS I'm feeling like a beginner =))
Warning ⚠️⚠️⚠️ this is not Kyle 👆🏾
You lost me when you said css lol.
Was good watching to you try to figure it out on the fly 👌
What about a clip path on the ::before, ::after and a text-decoration: line-through; on your li it would accomplish what you wanted without any extra html
I agree about clip path, it's IMO much better, but line-through wouldn't permit the growing animation.
simply you can achieve the same result by clip-path property and inset value on the text itself inset(0,0,50%,0) and on before that it's content is the data atrr clip-path: inset(50%,0,0,0) and then do the animation
A video on responsive navbar using vanilla css, js
Thank you Kyle for this amazing video , it would be very helpful if you could make a video on redux
how the hell is that second span not appearing on screen cause mine is. I got frustated with the main-text span, how is it you're isn't showing and mine is
also the main-text span is not visible once hovered, but how you're isn't showing before hovering, and the display flex on split-text is not affecting the before element but it is effecting the span main-text
ok, my bad. IF any one had the same problem, just check in html file if you have written home in split-text span, if yes remove that, we only need it in main-text
okaty i really need help its taking me hours to try to make it an acnhor and go to home and about pages , but the anchor link is only working on the higher half of the word home,about etc , and the lower half isnt working... idk what to do am so stuck , will be grateful if anyone helps
Back in the day, the late 90's we would just use gif's as mouseover image to get to this result
cool
Warning ⚠️⚠️⚠️ this is not Kyle 👆🏾
My background is white?
Please help me
@thenetninja this seems like it’s be your style.
How can I get hair as perfect as yours?
19:26
How can i create unlimited growing object when i hover over cursor.
s1mple cs and simple css :) (Oleksandr "s1mple" Kostyliev)
Simple=40min video xD
i only get 50% of what's going on here, but interesting none-of-the-less
If you add "display:block" to the :before and :after elements, they will have an auto width/height.
✔
Warning ⚠️⚠️⚠️ this is not Kyle 👆🏾
@Whatsapp me
♰❶❸⓿❷❺❽❸⓿❻❻❹ thank , i`am 🎓
conects google Meet ✔
Please help Ukraine protect the sky from the Russians. Too many bombs have been dropped on our cities. We fight like lions, but we need your help. Please do something to ask NATO to protect our skies, save the lives of our women and children.
Hmm hmm hmmmmm
uh...
Warning ⚠️⚠️⚠️ this is not Kyle 👆🏾
kanka bakmadan yap bi kere de be
Warning ⚠️⚠️⚠️ this is not Kyle 👆🏾
How to create this SIMPLE animation, video length 40 minutes....
You can leave if you have more important things to do....
bruh
animation-direction: both;
the result is far away from the original codepen
This is so far beyond me... LOL
hmm hmm hmmmm
You really used the word "simple"... yea...
This is a great video, but i am really surprised to see you use Google Chrome for development tools, every developer knows Firefox is superior with this,.
Hmm hmm hmmmmm