Another great use for an animation with forwards is when you add a class with JS to make an element go from display: none; to display: block;. A transition won’t work here since the display value changes however an animation using forwards will kick in nicely. Great for a dropdown of any kind. 👌
03:34 here is my attempt solving (assuming not allowed to edit javascript): .hover-box::before{ /*offset-path can be simpler if allowed to edit javascript*/ offset-path:polygon(50% 50%,calc(var(--x,0px) + 50%) calc(var(--y,0px) + 50%)); offset-rotate:0rad; offset-distance:0%; transition:offset-distance 500ms; } .hover-box:hover::before{ offset-distance:50%; }
That's so interesting! What's also cool is that if you move your mouse in a line at a constant speed, and it enters the box, the dot traces out a quadratic curve. Because the CSS animation linearly interpolates between (0, 0) and (--x, --y), and you moving the mouse is also a linear motion
Great solution! To simplify further, I think you can omit both "translate: 0 0" since they represent the default state. Just include an "enter" to and an "exit" from.
pretty clever solution! css animations are awesome 1:40 my first thought here was to add a selector without the hover to set the transition off, meaning the transition works one way when there's a :hover and another way when there's not. I already did some things that way, so I know it could work. but i'm not sure it would work for this problem exactly.
This is a pretty neat technique, thanks for sharing! This might be nitpicky, but unfortunately the animation still jumps if you exit the hover state before the enter animation has finished playing. You can see this if you quickly move your mouse in and out of the square in the "Hover follow finished version" codepen. In most cases this probably won't be noticeable, but it would still be cool to figure out a solution to this.
Yeah I know. I don't think there's a solution to that though, at least with this technique. Like you said, in most actual use cases you wouldn't notice this.
Just used this, great trick for basically any reversible animation. Thank goodness I saw this video, or I'd have to make a mess of the css to actually make things work otherwise.
Cool. This is actually slightly broken - it's obvious if you slow down the animation to 1000ms. If you enter, exit, enter before the animation is fully finished, you'll see some jumping. I think you need to save the last x,y of the circle upon exit via js and upon entry enter animation from last x y, to current x y exit animation from last x y to 0 0
CSS animations are great for things like animated appearance of elements. In order to use transitions one need add an element to DOM with initial state, and then change it properties in the next moment, so that there would be a transition between states. Animations help to avoid that extra step - they just play from the start. However, there is one caveat with them: I don't recommend to mix animations with transitions - Safari starts flickering in that case. Use only one approach on the same element or nested elements.
A really nice animation effet. The only issue with this code is when you move very quickly in and out of the hover box. Instead of moving back to the edge from where it was when it was returning, it will instead jump back to 0,0 then move to the edge again. So a quick move in and out of the box cause some glitching.
Yeah, I don't think there's a way around that with this method, but for more subtle versions it's okay. If you need it to be more like I did here, some more JS would be needed, I think
Hm... Transition would still be preferred, if you move your mouse outside the boxy before the animation finished playing, the exit animation will always begin with the mouse position. So after a short hover, it jumps from its current position to your mouse, then animates back to the center/starting position. That's why we use js animation since css doesn't retain state. Better solution: Have the naive implementation of a transition translate 500ms. on the before element. And --x, --y on the :hover state. To get rid of the transition/lag once the ball reached your mouse, aka the durtation of the transition. Make the "enter" animation, animation to transition 0ms. You're welcome.
pretty good timing. i'm working on an app that uses canvas (fabric.js) that is a specific editor to load background and transparent foreground images. This part could be used to augment the current "eraserbrush circle" that follows the cursor when active. Once i get all the bugs out... I might sweeten the UX with this tidbit. thx.
Very cool! A funny thing, though, is that the original solution (the one the guy "stole" it from from whom you "stole" it from) says in its code "do not share this!" and in its title it's a "secret" ;-)
Can you use a transition to drive animation-delay? If so, it might be possible to have the “playhead” between 0 and var(--x) be smoothly interpolated when you hover and leave. Not sure if this can work.
Interesting solution, might be useful for me, I thought about applying transition on non ::hover and then unset it on ::hover but then it jumps when u hover in but does not jump when u hover out, so yours is better.
Hi Kevin! I have a question regarding CSS layout. I have a card element with overflow: hidden. However, a rounded close icon within this card is partially cut off. How can I solve this issue?
.hover-box:not(:hover)::before { transition: translate 250ms ease; translate: 0; } This works for me. Is this correct or am I missing something? This feels simpler than adding keyframes.
Cool stuff. I would assume that variables would be replaced with their current values at the start of the animation and the animation would stay at those numbers, and not continue to be connected with the variables
What I'd like to know is. what happens under the hood, when you use "forward". Does CSS just replay that last frame over and over again or does it only replay it, if one of the variables change.
Is it possible to avoid the glitchiness when briefly running the cursor across the corner of the box? The ball begins animating to the xy coordinates but doesn't complete it in time. So then when the animation completes it instantly jumps to those coordinates so that it can animate back to the zero position. I can't quick think of a way to make this possible.
Kevin why the coordinates of X and Y is change (its not working like its when I remove display:grid? I want to know why its giving correct axis only in display:flex and display:grid?
Wouldn’t “backwards” work? I mean you demonstrated forwards and compared it with reverse but they are not the same, forwards is fill mode and reverse is direction. I think even reverse with forwards could work or simply just backwards (full mode)
There's only one type of situation that makes the dot jump: If you leave the square before the dot has reached the mouse pointer, the dot jumps to the edge of the square to then return to the middle via the animatíon. Would there be a CSS-only way of eliminating that effect? (I know it's a very small edge case :) )
I tried my hand at this and ended up with a totally different solution. I basically made an intermediate "cursor influence" property that I then can transition. But, it needs additional math, plus @property. @property --cursor-influence { syntax: ""; inherits: true; initial-value: 0; } .hover-box { transition: --cursor-influence 500ms; &:hover { --cursor-influence: 1; } } .hover-box::before { translate: calc((var(--x) * var(--cursor-influence))) calc((var(--y) * var(--cursor-influence)));; }
Sir, i am a beginner in Css and html, i am only 40-50 days in css and html after my boards exams. So i am having trouble with Css Focus selector, i have tried searching about this topic distinctively on youtube, but only your guide on Css focus, i have got. So i request you to make a full video on Css focus selector with its real life application to animations and stuffs like that.
In this case, the element is a div with the blue border on it, and the red thing in the middle is the pseudo-element that I created with ::before, so the animation in on the thing I'm animating :)
I'm new to HTML/CSS, so this might be a dumb question, but I'm wondering if there is a way to make it so that the animated element will follow the mouse, but only within a certain radius, say 50px or something like that, and once the mouse pointer moves outside the radius from where it "picked up" the animated element, the element will then return to its starting position? Hopefully I explained that correctly. Thanks!
You'd probably have to do most, if not all of that, through JS.... So yes, it's possible, but with CSS, :hover is :hover, so it's either on or off and we can't have thresholds like you're describing. We can use clamp() to prevent it from "escaping" beyond a certain point, but it won't reset when the mouse goes beyond that point without the help of more JavaScript (here's an example of using clamp() - codepen.io/kevinpowell/pen/oNOVjgE )
@@KevinPowell Thanks for the reply. I'm trying to do a parallax effect-type thing, but not using scrolling. Anyways, your videos are very helpful and I just realized I wasn't subbed, so I corrected that. Cheers!
Kevin, when I remove the display grid it's not getting the correct coordinates why? I mean only display:flex; or display:grid is working I want to know why? Why not the default display:block works?
It's how I set it up, since I've got it to be working from the center. If you don't have it centered (which it won't be if you take off grid), then you probably have to update the JS to remove the /2 stuff
@@KevinPowell I'm struggling to find out the reasons why its working for only grid and flex? like whats the difference between in calculation if we use flex or grid and if we use block there is probably a difference in calculating the offsetWidth or offsetX
I'm probably missing something obvious here, but can't you just constantly have translate: var(--x) var(--y); and then set --x and --y to 0 when the element isn't hovered? As you're already using js to update the vars
what is your greeting at the beginning of the videos, I can't understand the words, "hi there my friend and friends?" It is beginning to get on my nerves. Please help me 😮
Please don't use hyphens and underscores in names. It's ugly, confusing for noobs, and just bad style. I recommend just going PascalCase for everything. Cool trick though.
@@miguelcabaero5843 It's best to use the same convention for all names. Rather than: thisForOneThing ThisForAnother _thenThis _AndThis _or-even-this and-this-too Just messy and ridiculous.
Another great use for an animation with forwards is when you add a class with JS to make an element go from display: none; to display: block;. A transition won’t work here since the display value changes however an animation using forwards will kick in nicely. Great for a dropdown of any kind. 👌
03:34 here is my attempt solving (assuming not allowed to edit javascript):
.hover-box::before{
/*offset-path can be simpler if allowed to edit javascript*/
offset-path:polygon(50% 50%,calc(var(--x,0px) + 50%) calc(var(--y,0px) + 50%));
offset-rotate:0rad;
offset-distance:0%;
transition:offset-distance 500ms;
}
.hover-box:hover::before{
offset-distance:50%;
}
How elegant!! 🤩 I love it! ⭐
Creative!
That's so interesting! What's also cool is that if you move your mouse in a line at a constant speed, and it enters the box, the dot traces out a quadratic curve. Because the CSS animation linearly interpolates between (0, 0) and (--x, --y), and you moving the mouse is also a linear motion
are you sure that's a quadratic??
Great solution! To simplify further, I think you can omit both "translate: 0 0" since they represent the default state. Just include an "enter" to and an "exit" from.
Yup, definitely could have :)
pretty clever solution! css animations are awesome
1:40 my first thought here was to add a selector without the hover to set the transition off, meaning the transition works one way when there's a :hover and another way when there's not. I already did some things that way, so I know it could work. but i'm not sure it would work for this problem exactly.
Awesome! You never cease to amaze me with your elegant solutions. ❤
I love this video! Is all I was needing to improve my animations skills
This is a pretty neat technique, thanks for sharing!
This might be nitpicky, but unfortunately the animation still jumps if you exit the hover state before the enter animation has finished playing. You can see this if you quickly move your mouse in and out of the square in the "Hover follow finished version" codepen.
In most cases this probably won't be noticeable, but it would still be cool to figure out a solution to this.
Yeah I know. I don't think there's a solution to that though, at least with this technique. Like you said, in most actual use cases you wouldn't notice this.
So, in the end, should we care about that? Or leave it as it is because it's not noticeable? or it depends?
@@goodshiro10 I don't think there's a good solution outside of JS for now, so if it matters then using JS animations is probably the way to go.
@RandomGeometryDashStuff 's answer doesn't have this issue 😲
Just used this, great trick for basically any reversible animation. Thank goodness I saw this video, or I'd have to make a mess of the css to actually make things work otherwise.
looks grate, thank you for this example
Kevin is a combination of a calm pleasant voice + great explanation + vast extensive knowledge of the subject
You are such a good educator, dude.
i fell like i leveled up with a really powerful technique, thanks kevin!
8:22 this got me bang my head against the wall out of frustration
Yeah, definitely one of those animation gotchas, to go along with 0 requiring a unit for the timing, unlike in most use cases in CSS
thats beautiful. never fully understood css animations (still dont), but this gave me a bit more insight
This is a useful concept! Thanks!
Cool. This is actually slightly broken - it's obvious if you slow down the animation to 1000ms. If you enter, exit, enter before the animation is fully finished, you'll see some jumping. I think you need to save the last x,y of the circle upon exit via js and upon entry
enter animation
from last x y,
to current x y
exit animation
from last x y
to 0 0
CSS animations are great for things like animated appearance of elements. In order to use transitions one need add an element to DOM with initial state, and then change it properties in the next moment, so that there would be a transition between states. Animations help to avoid that extra step - they just play from the start.
However, there is one caveat with them: I don't recommend to mix animations with transitions - Safari starts flickering in that case. Use only one approach on the same element or nested elements.
So much potential with this one!
Ohh, Imma do a cyberpunk style one. Thanks for the video! Really interesting effect with an elegant solution ❤
only those with notifications on know the thumbnail originally said "animtion" lol
oops!
Yea, saw the idea for the solution in the thumbnail, so it wasn't really that much of a challenge :p
I had notification but didn't nice it lol
well, and those who read your comment, i guess.
Very interesting concept.
Thanks Kevin!
A really nice animation effet. The only issue with this code is when you move very quickly in and out of the hover box. Instead of moving back to the edge from where it was when it was returning, it will instead jump back to 0,0 then move to the edge again. So a quick move in and out of the box cause some glitching.
Yeah, I don't think there's a way around that with this method, but for more subtle versions it's okay. If you need it to be more like I did here, some more JS would be needed, I think
That's was awesome, I didn't know about "forward/reverse"😍
Thank you, Kevin!
Hm... Transition would still be preferred, if you move your mouse outside the boxy before the animation finished playing, the exit animation will always begin with the mouse position.
So after a short hover, it jumps from its current position to your mouse, then animates back to the center/starting position.
That's why we use js animation since css doesn't retain state.
Better solution:
Have the naive implementation of a transition translate 500ms. on the before element.
And --x, --y on the :hover state.
To get rid of the transition/lag once the ball reached your mouse, aka the durtation of the transition.
Make the "enter" animation, animation to transition 0ms.
You're welcome.
This is very cool! Definitely going to use this
This is extremely handy to know thank you!
pretty good timing. i'm working on an app that uses canvas (fabric.js) that is a specific editor to load background and transparent foreground images. This part could be used to augment the current "eraserbrush circle" that follows the cursor when active. Once i get all the bugs out... I might sweeten the UX with this tidbit. thx.
Very cool! A funny thing, though, is that the original solution (the one the guy "stole" it from from whom you "stole" it from) says in its code "do not share this!" and in its title it's a "secret" ;-)
Really cool animation! Only one little thing: You don't need the "forwards" key on the exit animation
Kevin, very nice! Thanks
This is a fantastic technique!
Eventhough I recently learned that you are saying "Hello my frontend friends", I still can't unhear "Hello my friend and friends" lol
Very cool. Thanks!
You are my css master❤
Wow what a great solution! Might be very useful for me thank you 🙏🏼
3:40 I would've used the Animation web API to handle the behavior, I have no idea on how to do it in CSS lol
that's pretty cool and interesting
You should really check out more of Ana Tudor stuff. She's a CSS wizard.
I've followed her for a long time ☺️
So dang nice!
Can you use a transition to drive animation-delay? If so, it might be possible to have the “playhead” between 0 and var(--x) be smoothly interpolated when you hover and leave. Not sure if this can work.
Brilliant!
I wonder what the reason for other styles being placed within @layer?
I’m more intrigued with these variable values. Can css vars be updated directly with js???
U Can Do anything with js
If it was css only, it would be incredible. Love when css replace js in some popular cases😊)
Learned something new today
Interesting solution, might be useful for me, I thought about applying transition on non ::hover and then unset it on ::hover but then it jumps when u hover in but does not jump when u hover out, so yours is better.
Beautiful
I was trying to solve this with js and didn't even know how to google this type of thing😅Thanks!!
Hi Kevin! I have a question regarding CSS layout. I have a card element with overflow: hidden. However, a rounded close icon within this card is partially cut off. How can I solve this issue?
Reminds me of the tunnel bear login page :)
Wouldn’t a simple transition as exit work instead of an extra exit animation?
.hover-box:not(:hover)::before {
transition: translate 250ms ease;
translate: 0;
}
This works for me. Is this correct or am I missing something? This feels simpler than adding keyframes.
the solution was always 'forward' ..
thank you very much for the video
Cool stuff. I would assume that variables would be replaced with their current values at the start of the animation and the animation would stay at those numbers, and not continue to be connected with the variables
What I'd like to know is. what happens under the hood, when you use "forward".
Does CSS just replay that last frame over and over again or does it only replay it, if one of the variables change.
Very cool trick.
Is it possible to avoid the glitchiness when briefly running the cursor across the corner of the box? The ball begins animating to the xy coordinates but doesn't complete it in time. So then when the animation completes it instantly jumps to those coordinates so that it can animate back to the zero position. I can't quick think of a way to make this possible.
Forwards, nice.
sooo satisfying
Amazing ❤❤
Kevin why the coordinates of X and Y is change (its not working like its when I remove display:grid? I want to know why its giving correct axis only in display:flex and display:grid?
Wouldn’t “backwards” work? I mean you demonstrated forwards and compared it with reverse but they are not the same, forwards is fill mode and reverse is direction. I think even reverse with forwards could work or simply just backwards (full mode)
But I haven’t checked, just top of my head
If you don't change the name of the animation, it won't run again, sadly. Or well, I don't think so, that's off the top of my head too ☺️
I just did something similar a few days ago!
i LOVE your shirt
There's only one type of situation that makes the dot jump: If you leave the square before the dot has reached the mouse pointer, the dot jumps to the edge of the square to then return to the middle via the animatíon.
Would there be a CSS-only way of eliminating that effect? (I know it's a very small edge case :) )
There is no way to do it completely without JS right? I.e. css doesn't have a crazy hidden mouse pointer var right?
you are A GEM
I tried my hand at this and ended up with a totally different solution. I basically made an intermediate "cursor influence" property that I then can transition. But, it needs additional math, plus @property.
@property --cursor-influence {
syntax: "";
inherits: true;
initial-value: 0;
}
.hover-box {
transition: --cursor-influence 500ms;
&:hover {
--cursor-influence: 1;
}
}
.hover-box::before {
translate: calc((var(--x) * var(--cursor-influence))) calc((var(--y) * var(--cursor-influence)));;
}
thank you
Sir, i am a beginner in Css and html, i am only 40-50 days in css and html after my boards exams.
So i am having trouble with Css Focus selector, i have tried searching about this topic distinctively on youtube, but only your guide on Css focus, i have got.
So i request you to make a full video on Css focus selector with its real life application to animations and stuffs like that.
Why use :before for the animation instead of the element itself? Is there a reason or was this an implementation thing?
I was wondering about this as well.
In this case, the element is a div with the blue border on it, and the red thing in the middle is the pseudo-element that I created with ::before, so the animation in on the thing I'm animating :)
I'm new to HTML/CSS, so this might be a dumb question, but I'm wondering if there is a way to make it so that the animated element will follow the mouse, but only within a certain radius, say 50px or something like that, and once the mouse pointer moves outside the radius from where it "picked up" the animated element, the element will then return to its starting position? Hopefully I explained that correctly. Thanks!
You'd probably have to do most, if not all of that, through JS.... So yes, it's possible, but with CSS, :hover is :hover, so it's either on or off and we can't have thresholds like you're describing. We can use clamp() to prevent it from "escaping" beyond a certain point, but it won't reset when the mouse goes beyond that point without the help of more JavaScript (here's an example of using clamp() - codepen.io/kevinpowell/pen/oNOVjgE )
@@KevinPowell Thanks for the reply. I'm trying to do a parallax effect-type thing, but not using scrolling. Anyways, your videos are very helpful and I just realized I wasn't subbed, so I corrected that. Cheers!
Kevin, when I remove the display grid it's not getting the correct coordinates why? I mean only display:flex; or display:grid is working I want to know why? Why not the default display:block works?
It's how I set it up, since I've got it to be working from the center. If you don't have it centered (which it won't be if you take off grid), then you probably have to update the JS to remove the /2 stuff
@@KevinPowell Its still not working.
I removed the display:grid; and in js remove the /2; Its like:
const centerX = hoverBox.offsetWidth;
const centerY = hoverBox.offsetHeight;
and css:
.hover-box {
/* display: grid; */
width: min(600px, 70%);
margin: auto;
aspect-ratio: 1;
border: 3px solid hsl(200, 100%, 50%);
border-radius: 0.5rem;
box-shadow: 0 0 0.5rem hsl(200, 100%, 70%),
inset 0 0 0.5rem hsl(200, 100%, 70%);
overflow: hidden;
}
@@KevinPowell I'm struggling to find out the reasons why its working for only grid and flex? like whats the difference between in calculation if we use flex or grid and if we use block there is probably a difference in calculating the offsetWidth or offsetX
I'm probably missing something obvious here, but can't you just constantly have translate: var(--x) var(--y); and then set --x and --y to 0 when the element isn't hovered? As you're already using js to update the vars
.animate() and fill: forwards makes this easy
Great .. very Cool
At the risk of sounding lamen, what software are you using for coding Kevin. I don't recognise that terminal
Its on codepen
very nice
I learned this in a meta front-end professional course
Especially in the html & css indebt , thanks for refreshing my memories
I gave this a Power Like by pressing my mouse button really hard while clicking the Like button.
Wow
Cool
whoa:0
what is your greeting at the beginning of the videos, I can't understand the words, "hi there my friend and friends?" It is beginning to get on my nerves. Please help me 😮
Frontend friends
@@seanthesheep Thank you so much!!!
lol, css has signals when all around only trying to implement them
cAn i learn cSS In 1 month can you give me a PlAylsit
That playlist doesn't exist.
You learn by doing, and every day you'll learn something new.
I'm curious - what did your face add to this video? Why is any meaningful fraction of the video?
I agree, I don't understand what the point is
Weird thing to say.
the moment you said java-script I lost interest. Obviously with java-script you can do anything
Please don't use hyphens and underscores in names. It's ugly, confusing for noobs, and just bad style. I recommend just going PascalCase for everything. Cool trick though.
PascalCase is usually for class names thats why underscores and dashes are used
Either way it doesnt really matter
@@miguelcabaero5843 It's best to use the same convention for all names. Rather than:
thisForOneThing
ThisForAnother
_thenThis
_AndThis
_or-even-this
and-this-too
Just messy and ridiculous.
Man, i am just learning css for now.
Not easy.
Next will learn js.
How you gonna learn all these advance stuff?
It is overwhelming.