Introducing Socket Firewall: Free, Proactive Protection for Your Software Supply Chain.Learn More
Socket
Book a DemoInstallSign in
Socket

nimes

Package Overview
Dependencies
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

nimes

Generate CSS-only animations from anime.js animations

latest
Source
npmnpm
Version
0.1.1
Version published
Maintainers
1
Created
Source

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

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

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

    const {anime} = require("nimes").default;
    
  • 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).

  • 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.

Keywords

anime.js

FAQs

Package last updated on 19 May 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts