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
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
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
