<link href='//fonts.googleapis.com/css?family=Signika+Negative:300,400' rel='stylesheet' type='text/css'>

<div class="wrapper">
<h2>Apply same --myColor variable to multiple css rules.</h2>
<p>Tweening the <strong> --myColor</strong> variable will update multiple elments.</p>

<div class="cool">this is cool </div>
</div>

body {
  margin:20px;
}

html {
  --myColor: green;
}

h2 {
  font-size:20px;
}

.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);
}

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

External CSS

  1. https://codepen.io/GreenSock/pen/JGaKdQ

External JavaScript

  1. //s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js