Gradient Border Animation
I am trying to make a smoothish animation around this border, but cant really use an svg in the markup. Its almost right except at the 0deg and 180deg mark it gets very very small. is there any values i can adjust so that its about the same length all the way around, doenst have to be perfect .
Also im putting the pseudo elements on the parent because i had them on the anchor tag which was working until the 'hang" and hang-sink" animations ran on hover, then the z-index stopped keeping the pseudos behind the button and they were instead on top. <- this link shows the behaviour im getting with the pseudo elements on the <a> instead of the wrapper. i would like to be able to put the pseudo elements on the <a> itself and not the parent wrapper so it inherits the animation and the border radius but am not sure how to combat the z-index issue.
28 Replies
https://codepen.io/geomydas/pen/NWQNBJL maybe this
just add a wrapper as it messes with the z-index on hover
only 1 keyframe is enough for this
use transitions smh
the change in size of the conic gradient slice at the border has to do with the distance that the gradient's center point is away from the edge. The further away the border is from the center point the larger the slice gets. So potential solution maybe here is to dynamically change the
at position of the gradient's center instead of trying to change the stop size?
the z-index change on hover is probably the added transform creating a new stacking context. Maybe better here to include the gradient as a second background image and use background-clip on a solid color "gradient" to cover that covers the conic?Ita a clients site that uses a framework with the animations already written, which is why it’s redundant. Obviously one wouldn’t write the same keyframes twice and two of the animations run infinitely which you can’t do with a transition. With the framework you can’t add the “hang-sink” without adding the “hang” ; not sure why since they have the same keyframes but that’s just how it is.
And , as shown in the first codePen and written in the post, I did use the parent as a wrapper since I can’t adjust the markup . My post is asking how to combat the z-index issue.
I figured it had to be the transform and remembered there was some hack to combat it but could remember or find what that hack was.
Oh interesting re the slice , that makes sense. Would transform-origin be what adjusts the center point ? Like could I add it to the rotation animation keyframes that the transform origin changes at different points or will I have to use JavaScript ?
Not sure what you’re envisioning with the bg clip suggestion though
conic-gradients have an
at option that pairs with the from option you are using that lets you change the center point of the gradient: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient#off-centered_gradientMDN Web Docs
conic-gradient() - CSS: Cascading Style Sheets | MDN
The conic-gradient() CSS function creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center). Example conic gradients include pie charts and color wheels. The result of the conic-gradient() function is an object of the data type, which is a special kind of .
Oh I see
I’m terrible with conic (and all repeating) gradients
Ohhh I gotcha , yes I’ve used that pattern before. You can’t typically animate bg images and gradients but since I can animate the registered custom property this might work !
This will respect the border radius too because it’s not an actual border-image it’s a background-image right ?
yep, yep should work with border-radius. FYI, there's work going on in Safari tech preview that should make this easier in the future. There'll be a "border-area" option for background-clip so it'll be a bit less fiddly.
i think i got your implementation working! at least with the clip; trying to adjust the "at" value is giving me some wonky results.
https://codepen.io/Miss-Fox/pen/LYwNrKw?editors=1100
https://ryanmulligan.dev/blog/css-property-new-style/ Read this recently. This feels pretty similar.
CSS @property and the New Style
An exploration of the newly supported at-rule for explicitly defining and animating custom properties in CSS.
Thanks, what part of this are you suggesting though?
maybe gradient rotation is entirely the wrong way to go about this? What if
motion-path instead: https://codepen.io/jsnkuhn/pen/ZEgOOxwIs there a way to make it wrap around the corners though?
You can't actually curve the div in motion if that's what your asking but a
clip-path: inset(-3px); on the container will cut off the overflow and make it look closer to what you want i think.Gotcha. The solution with the background clip for the two gradients is working well, o wish I could figure out the
at values so the animated part doesn’t get so small but otherwise its what I’m looking for !
These offset-path and offset-distance properties are new to me and really good to know though!so my guess on the conic gradient method would be that you'd want no rotation while you're moving the gradient from left to right. Then only run half of the rotation when you hit the right side which would rotate the gradient to the bottom. Then stop the rotation again and move back to the left? If this makes any sense.
@clevermissfox
This is how i would do it
https://codepen.io/tok124/pen/qBeNXOa
How did you come up with those values ? The -40/320deg at 100% keyframe is breaking my brain a little. Why is that necessary versus 0deg/360deg?
Here you see the difference between 0deg and -40deg
80/2 = 40
thats how i came up with the number
you could ofc use calc and more custom properties and stuff if you wanna make it easier for yourself
So something like this
But where does 80 come from ? Oh I see the deg where the blue stop spans
the 80deg can be changed to any number, the more you increase it, the more of the blue you get
Very nice job , thanks so much, I will havr to play with this and see if I can adjust mine a little more. Can't set a fixed height but I can get the computed value with Javascript. Thanks so much both of you
Yeah exactly, use some JS for this
and no problem 🙂
Yeah I think I get your point bc if I shift the
at in my keyframes while the rotation is running , it causes the little worm border to run backwards for a bit. Tok124s solution is very smooth though having gotten more specific with the keyframes, im gonna see if I can use it with my current element and mashup your bg-clip solution with theirs 🌟
Ideally I would like the border "worm" to be the same length as it currently when it rounds the corners ; and ideally it doesn't have the angled ends like Toks has. I wish I could access the markup and just add a path to make this easier and add round line caps etc.
Love this server , everyone is so knowledgeable and most everyone is kind and doesn't make the OP feel like a dumdum 😆Bit late to the party and don't really have good suggestions other than what is mentioned, but...
if you're about to use JS anyway. You could also just alter the mark up and inject an svg. (just a thought)
My gradient guru!!! (You helped me ages ago with a bunch of gradient questions https://discord.com/channels/436251713830125568/1227716413267902535/1227716413267902535 )
Good point, that may be the way to go, although I’m so close to getting the desired behaviour from these guys suggestions , I’m also very far away 😆
I was also pondering if I could / should use a pseudo el with an SvG path as the content or bg img. Just injecting the svg sounds much easier tho