<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 elements.</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: 14px;
  margin-right: 10px;
}

 h2, strong {
  color: var(--myColor);
}

.cool {
  display: inline-block;
  padding: 10px;
  color: white;
  border-radius: 8px;
  background-color: var(--myColor);
}

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