In my About, I added the Zitch of Light effect around important sections. This animation is tied to mouse hover, but on mobile, the hover state isn’t reliable. So I connected it to page scroll instead. Then I realized — it actually looks good on desktop too. This led me to a point where I needed both behaviors. That means running two animations simultaneously and somehow combining their results — something like --angle = --a1 + --a2. I tried using @property and animated variables, but it turned into a mess. Too many definitions, too many places for errors.

Luckily, I found a much simpler approach.

If I run both animations but set them to paused (i.e., not removed the animation keyword), their current state is saved. Then I can combine them using animation-composition: accumulate; — natively 💫