nimes

0.1.1 • Public • Published

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

Planned

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

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.

Package Sidebar

Install

npm i nimes

Weekly Downloads

1

Version

0.1.1

License

MIT

Unpacked Size

205 kB

Total Files

15

Last publish

Collaborators

  • ewen-lbh