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
3 Replies
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
Kevin Powell
YouTube
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.
To 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...
nevermind, looks like you have that in your js already
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
window.registerProperty
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.
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.
.option {
background: conic-gradient(colour1 0% var(--dark-grade-angle), colour2 0% 100%);
}
:nth-child(1 of .option) {
--dark-grade-angle: var(--days-angle);
}
:nth-child(2 of .option) {
--dark-grade-angle: var(--hours-angle);
}
:nth-child(3 of .option) {
--dark-grade-angle: var(--minutes-angle);
}
``
just using background: var(--bg-options) `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.