Generate CSS-only animations from anime.js animations
npm install nimes> Ship anime.js animations with 0 bytes of Javascript
_Nîmes_ is a command-line tool to turn anime.js animations from a javascript file into a CSS file, containing the appropriate ruleset to implement the same animation without any trace of javascript.
Features · Installation · Usage · Examples · Real-world usage
Obviously, anime.js features that are inherently javascript-dependent can't be implemented. Most of these limitations come from the fact that no DOM is available while generating the stylesheet.
- anime.timeline
- timeline offsets, including relative offsets
- overriding of parameters in timeline.add
- anime API
- keyframes
- Penner's easing functions (every easing function name that starts with easeIn or easeOut)
- anime.stagger
- default units for CSS transforms (you have to explicitly specify the unit right now)
- endDelay
- property-specific parameters
- a slightly different version of function-based parameters where the target argument hasn't been turned into a DOM node, but is still a selector string
- same goes for function-based values
- relative values
- from-to values
- SVG line drawing
- SVG morphing
_If you found a way to generate CSS that implements any of these, please open an issue with your idea or a pull request if you have an implementation ready_
- SVG motion path
- callbacks & promises (complete, begin, etc.)
- any target that isn't a CSS selector (Javascript objects, DOM Nodes)
- animating DOM attributes
- function-based parameters
- round
- controls
- all helpers
npm install nimes
1. Remove any DOM-related code (you'll be running this script with Node.js)
1. Append the following line at the start of your anime.js script:
``js`
const {anime} = require("nimes").default;
2. Add a call to .intoCSS (the method takes no parameters) on the anime.timeline object you want to convert.
The return value is a string containing the entire stylesheet.
You can either console.log it to then pipe the stdout of node your-script.js to a file, or you can use fs.writeFileSync to write it to a file (or anything else really, it's just a string).
1. Run the script
`sh-session``
$ node my-script.js
- I am currently using this for my portfolio's spinner that appears after clicking on a image to view it in full resolution.