Using nth-child() ibn calc()
I think I saw one of Kevin
article--stagger-delay>:nth-of-type(1) { --wpe-animation-delay-x: var(--ph-animation-delay); }
article--stagger-delay>:nth-of-type(2) { --wpe-animation-delay-x: calc(var(--ph-stagger-step) + var(--ph-animation-delay)); }
article--stagger-delay>*:nth-of-type(3) { --wpe-animation-delay-x: calc(2 * var(--ph-stagger-step) + var(--ph-animation-delay)); }
to article--stagger-delay>*:nth-child(n) { --wpe-animation-delay-x: calc(n * var(--ph-stagger-step) + var(--ph-animation-delay)); } so trying to base the delay on n* the article I hope this makes sense
s videos using nth-child in calc operations ( I havent been able to find it) but I`m not sure of the syntax.
I have a list of articles with the same class specified via a custom property, and a calc based on the nth-of-child, but instead of hard coding for each article I want it more automated e.g.
from
article--stagger-delay>* {
animation-delay: var(--ph-animation-delay-x) !important;
animation-timing-function: var(--ph-animation-timing-function) !important;
}
article--stagger-delay>:nth-of-type(1) { --wpe-animation-delay-x: var(--ph-animation-delay); }
article--stagger-delay>:nth-of-type(2) { --wpe-animation-delay-x: calc(var(--ph-stagger-step) + var(--ph-animation-delay)); }
article--stagger-delay>*:nth-of-type(3) { --wpe-animation-delay-x: calc(2 * var(--ph-stagger-step) + var(--ph-animation-delay)); }
to article--stagger-delay>*:nth-child(n) { --wpe-animation-delay-x: calc(n * var(--ph-stagger-step) + var(--ph-animation-delay)); } so trying to base the delay on n* the article I hope this makes sense
0 Replies