When you animate the value of a CSS variable you can affect any element that uses that variable in any of its styles. Instead of having a DOM element as the target of your tween, you will use the rule that defines your CSS variable. Check out the video and demo below to see exactly how it works.
Video
Code
CSS
html { --myColor: green; } .wrapper { border: 1px solid var(--myColor); border-radius: 10px; margin-right:10px; } h2, strong { color:var(--myColor); } .cool { display:inline-block; padding:10px; color:white; border-radius:8px; background-color:var(--myColor); }
JavaScript
gsap.to("html", {"--myColor": "orange", duration: 1, yoyo: true, repeat: 20});
Demo
Support for CSS variables was added in GSAP 1.20.0
Recommended Comments
There are no comments to display.