Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

QuickTip: Animate CSS Variables
Sign in to follow this  


| GreenSock
9007

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

TweenMax.to("html", 1, {"--myColor":"orange", yoyo:true, repeat:20});

Demo

See the Pen CSS Variables Demo by GreenSock (@GreenSock) on CodePen.

Support for CSS variables was added in GSAP 1.20.0

Get an all-access pass to premium plugins, offers, and more!

Join the Club

With great power comes great responsibility. Tween wisely.

- Team GreenSock
Sign in to follow this  


User Feedback

Recommended Comments

There are no comments to display.



Guest
This is now closed for further comments

×