loading...

How to Use SASS/SCSS in the Anime.js Animation Library

ameliaruzek profile image Amelia Ruzek ・1 min read

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!

Posted on by:

ameliaruzek profile

Amelia Ruzek

@ameliaruzek

designer, developer, and grad student of digital media design

Discussion

pic
Editor guide