ta

tailwindcss-animistacss

Adds Animista CSS as Tailwind CSS plugin to your project

Showing:

Popularity

Downloads/wk

15

GitHub Stars

12

Maintenance

Last Commit

2mos ago

Contributors

1

Package

Dependencies

2

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

Animista CSS - Tailwind CSS Plugin

Add Animista CSS as Tailwind CSS plugin to your project.

Installation

Pull it in through npm or yarn:

npm install tailwindcss-animistacss
yarn add tailwindcss-animistacss

Usage

const tailwindCSSAnimista =require("tailwindcss-animistacss")

plugins: [
  // Other plugins
  tailwindCSSAnimista({
        classes:['animate__tracking-in-expand'],
        settings:{
          'animate__tracking-in-expand':{
            duration:7000,
            delay:1000,
            iterationCounts:2,
            isInfinite:true,
          }
        },
        variants:["responsive"]
      }),
]

Pass a list of classes that you want to use to classes option

Setting isInfinite to true removes the IterationCounts value from generated animation css property as this library has given more priority to infinite over iteration-count. upon falsy, value for iterationCounts will be used.

You can find all available class names at Tail-Animista

Defining the classes is recommended to avoid to bloat your css with unused classes and keyframes.

const tailwindCSSAnimista =require("tailwindcss-animistacss")

plugins: [
  // Other plugins
  tailwindCSSAnimista({
        classes: ['animate__tracking-in-expand', 'animate__scale-up-center', ...],
        settings: {},
        variants: [],
      }),
]

If you want to prefix your CSS classes, use the tailwind prefix option:

// tailwind.config.js
module.exports = {
  prefix: 'tw-',
  // ...
}

Adjustable Settings under each class settings option

* duration: number (ms)

* delay: number (ms) //default: 0ms

* iterationCounts: number //default: 1

* isInfinite: boolean

* direction: string

* fillMode: string //default: both

* timingFunction: string

Variants

Generating different class variants is super easy, just add the desired variant to the variants array at the plugin options.

plugins: [
  // Other plugins
  require('tailwindcss-animistacss')({
        classes: [],
        settings: {},
        variants: ['responsive', 'hover', 'focus'],
      }),
]

Available variants

  • responsive
  • hover
  • focus

Credits

This package is based on awesome Animista.net.

License

This project is licensed under the MIT License.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100