nimes

Nîmes

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

Features

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.

Implemented

• anime.timeline
• timeline offsets, including relative offsets

Planned

• 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

Out-of-scope / impossible to implement

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

Installation

npm install nimes

Usage

1. Remove any DOM-related code (you'll be running this script with Node.js)

2. Append the following line at the start of your anime.js script:

   const {anime} = require("nimes").default;

3. 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).

4. Run the script

   $ node my-script.js

Real-world usage

• I am currently using this for my portfolio's spinner that appears after clicking on a image to view it in full resolution.