Can I Create This Simple CSS Hover Animation?
ฝัง
- เผยแพร่เมื่อ 22 ก.ค. 2024
- This simple split text animation seems really straightforward, but it is more complicated than it looks. In this video I will be attempting to create this animation live for the first time ever.
📚 Materials/References:
GitHub Code: github.com/WebDevSimplified/c...
Reference CodePen: codepen.io/bosworthco/pen/RjBvgw
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
01:08 - HTML
02:28 - Text CSS Attempt #1
11:40 - Text CSS Attempt #2
21:05 - Animation CSS
#CSSAnimation #WDS #CSS
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.
Fantastic content, big fan of the live sessions, really insightful for learners!
These series are super informative. Thanks a lot 👍
that was extremly great video. would watch more of this
Warning ⚠️⚠️⚠️ this is not Kyle 👆🏾
Superb stuff, Kyle - took me a while to understand how the split text::after was working with bottom and flex 💪
I love these videos! I've learned so much from you! Thanks!
Warning ⚠️⚠️⚠️ this is not kyle ☝🏾
that was really awesome
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
i love that you created re-created CSS creation.
these videos are great!
Well done!
This is the best!
I like this stuff. Awesome!
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.
THANK YOU!
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 this VDO
Wow stumbled on your channel a few days ago, great work, love how well you tell about what you are doing!
great tutorial ! :)
Thanks so much for the series :) can we get a "hmm hmm hmm"-counter for the next one xD
This is what I like about css. No one is perfect with it. :D
I love how many times he says "So nothing is changing which is exactly what we want"
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.
Wow lets gooo😍😍❤💚
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.
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
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?
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.
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.
Thanks 🙏🏼
⚠️⚠️⚠️ this is not Kyle 👆🏾
@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 ?
good vid
Thank you Kyle for this amazing video , it would be very helpful if you could make a video on redux
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
Please show how to make complex form with css like the Schengen visa application form.
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
Why would you give the li's and ul classes if you can just select the 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
Without line inside we can achieve the same by using clip-path in one single html element
Warning ⚠️⚠️⚠️ this is not Kyle 👆🏾
A video on responsive navbar using vanilla css, js
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.
Title: Simple Hover Animation
Video Intro: See how I approach complex problems
Could it work the first way if you use a transparent gradient? I think it would be easier 🤔
try it and send codepen link?
How do u find the motivation to continue when you do a project ?
Warning ⚠️⚠️⚠️⚠️ this is not Kyle 👆🏾
When I see all those cool things done in CSS I'm feeling like a beginner =))
Warning ⚠️⚠️⚠️ this is not Kyle 👆🏾
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.
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?
You lost me when you said css lol.
Was good watching to you try to figure it out on the fly 👌
Good to know that even an experienced dev still has no idea what's going to happen when they refresh the page
You actually sometimes have to add transition on the non hover and the hover state
Warning ⚠️⚠️⚠️ this is not Kyle 👆🏾
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
My background is white?
Please help me
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 👆🏾
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😂
@thenetninja this seems like it’s be your style.
How can i create unlimited growing object when i hover over cursor.
Kyle - "Now nothings changing that's exactly what we want".
Me - Huh?
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
How can I get hair as perfect as yours?
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
s1mple cs and simple css :) (Oleksandr "s1mple" Kostyliev)
19:26
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 ✔
Hmm hmm hmmmmm
bruh
animation-direction: both;
kanka bakmadan yap bi kere de be
Warning ⚠️⚠️⚠️ this is not Kyle 👆🏾
hmm hmm hmmmm
uh...
Warning ⚠️⚠️⚠️ this is not Kyle 👆🏾
This is so far beyond me... LOL
the result is far away from the original codepen
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.
You really used the word "simple"... yea...
How to create this SIMPLE animation, video length 40 minutes....
SIMPLE tutorials that shows us how to make SIMPLE animation is only showing us the SIMPLE code and we are just copying the SIMPLE code for SIMPLE uses. The reason why WDS videos is better than just a SIMPLE tutorial is because there are explanations for brainstorming, testing, optimizing, comparing, rethinking and much more for those who are not yet experienced or just simply curious how others think. If you are in need of SIMPLE codes and SIMPLE explanations, you should just check out the Codepen and copy the SIMPLE code to implement the SIMPLE animations to use them SIMPLY in SIMPLE projects instead of learning the process of coding instead of telling it in the comments how long the video was.
You can leave if you have more important things to do....
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