Updating @property with JS for animation on load

https://codepen.io/Miss-Fox/pen/BabgmjK?editors=0110
hopefully the video explains better with the visuals than i can type out but basically i am trying to update the :root custom property so that its value is equal to the respective javascript variable (days, hours, minutes) and then update that on each "box" class of '.option' so that the angle on that box matches (if days is 24, angle is 24). Its actually written as a percent not an angle but im not sure if that matters here?

Elements involved:
+@property for dark-grade-angle, dark-grade-day, dark-grade-min;

--clr-bg-options has the conic gradient with the custom property as the angle/percentage
+.options is the class name of each box
+"angle" is the name of the @keyframes animation thats being triggered in the root.
+in the javascript are the variables "days", "hours", "minutes" that have the values i want to update each option to.

let me know if theres any clarification needed

curiousmissfoxOP•2/23/24, 10:47 PM

also ive been trying to find kPows video where he uses @property to update the angle of a gradient for aniamtion but cant seem to find it. anyone know?

EDIT: https://youtu.be/-VOUK-xFAyk?si=XIaJFglb8wE0vhnc

YouTubeKevin Powell

Create an animated, glowing, gradient border with CSS

Inspired by a codepen by Gayane Gasparyan - https://codepen.io/gayane-gasparyan/pen/jOmaBQK

I took my own attempt to create a rotating gradient border, including a nice soft glow.

o do it, I use @property, which doesn't have fantastic browser support, but near the end of the video I look at why that's not really a big deal

Links

My f...

missymae•2/23/24, 10:52 PM

nevermind, looks like you have that in your js already

curiousmissfoxOP•2/23/24, 11:18 PM

have also tried commenting out the @property for --dark-grade-day, --dark-grade-hour, and --dark-grade-minute within the css and just using JS to

curiousmissfoxOP•2/23/24, 11:25 PM

and then using that to setProperty on each .option but getting the error that its not able to register what already exists...even though i commented out the @property for each --dark-grade-day, etc. EDIT: getting this error because its within the setInterval so after the first time it registers, it already exists.

curiousmissfoxOP•2/24/24, 7:54 AM

None of my super brilliant dudes on here have any ideas? I got it working with a bunch of extra fluff (specific prop for days, hours, another for minutes; then a specific gradient w their respective specific props); I don’t get why my base custom property isn’t updating on the elements through css or js.

The registered @property is set to inherit?

curiousmissfoxOP•2/27/24, 6:39 PM

in case anyone comes across this (or to remind myself in the future), even if its inherited the first property has to be declared on the main selector itself, not as a custom prop

just using which references the --dark-grade-angle doesnt work. has to be declared directly within the selector. which at that point, might as well just use a different background on each :nth-child with the respective 'days, hours, minutes' property.