QuickTip: Animate CSS Variables

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 …


This content originally appeared on Blog and was authored by Blog

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


This content originally appeared on Blog and was authored by Blog


Print Share Comment Cite Upload Translate Updates
APA

Blog | Sciencx (2018-03-12T13:45:00+00:00) QuickTip: Animate CSS Variables. Retrieved from https://www.scien.cx/2018/03/12/quicktip-animate-css-variables/

MLA
" » QuickTip: Animate CSS Variables." Blog | Sciencx - Monday March 12, 2018, https://www.scien.cx/2018/03/12/quicktip-animate-css-variables/
HARVARD
Blog | Sciencx Monday March 12, 2018 » QuickTip: Animate CSS Variables., viewed ,<https://www.scien.cx/2018/03/12/quicktip-animate-css-variables/>
VANCOUVER
Blog | Sciencx - » QuickTip: Animate CSS Variables. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2018/03/12/quicktip-animate-css-variables/
CHICAGO
" » QuickTip: Animate CSS Variables." Blog | Sciencx - Accessed . https://www.scien.cx/2018/03/12/quicktip-animate-css-variables/
IEEE
" » QuickTip: Animate CSS Variables." Blog | Sciencx [Online]. Available: https://www.scien.cx/2018/03/12/quicktip-animate-css-variables/. [Accessed: ]
rf:citation
» QuickTip: Animate CSS Variables | Blog | Sciencx | https://www.scien.cx/2018/03/12/quicktip-animate-css-variables/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts