Anime.js is an excellent JavaScript animation library that’s easy to use and easy to read. Documentation lists accepted values for properties as unit-less, specific unit, relative, colors, from-to, and function based. Anime.js might not accept SASS directly, but does accept JavaScript variables.
Oh! Of Course!
If a value for a CSS property in anime.js can be a simple variable, the question becomes: How to Pass SCSS into a JavaScript Variable.
Good News! There’s a package for that! css-loader
npm install --save-dev css-loader
Ok, Now What?
Export your variable directly from the .scss file using the css-loader syntax and then import your .scss into your JavaScript!
// variables.scss
$white-color: #ffffff;
:export {
whitecolor: $white-color;
}
//your js file
import variables from variables.scss
anime ({
...
color: variables.whitecolor;
...
})
And Finally
You have a JavaScript variable that can be added as a value for your css properties in your anime.js animations!
Top comments (0)