tailwindcss-animated - npm Package Compare versions

Comparing version 0.0.3 to 1.0.0

package.json

 {
     "name": "tailwindcss-animated",
-    "version": "0.0.3",
+    "version": "1.0.0",
     "description": "Extended animation utilities for Tailwind CSS",
@@ -20,17 +20,32 @@ "author": "new-data-services",
     ],
+    "files": [
+        "/src"
+    ],
     "main": "src/index.js",
     "scripts": {
-        "dev": "npx tailwindcss --config ./.build/tailwind.config.js --output ./demo/tailwind.css --jit",
-        "debug": "npx tailwindcss --config ./.build/tailwind.config.js --output ./demo/tailwind.css",
-        "watch": "npx tailwindcss --config ./.build/tailwind.config.js --output ./demo/tailwind.css --jit --watch",
-        "prod": "npx tailwindcss --config ./.build/tailwind.config.js --output ./demo/tailwind.css --jit --minify",
-        "eslint": "node node_modules/eslint/bin/eslint.js --config .build/.eslintrc.js src/**/*.js"
+        "dev": "vite --config ./website/vite.config.js",
+        "watch": "npm run dev",
+        "prod": "vite build --config ./website/vite.config.js",
+        "build": "npm run prod",
+        "preview": "vite preview --config ./website/vite.config.js",
+        "lint": "npm run eslint",
+        "eslint": "node node_modules/eslint/bin/eslint.js --config ./.build/cs/.eslintrc.js {src,website}/**/*.js"
     },
     "peerDependencies": {
-        "tailwindcss": ">=2.2.0"
+        "tailwindcss": ">=3.1.0"
     },
     "devDependencies": {
-        "eslint": "^7.32",
-        "tailwindcss": "^2.2"
-    }
+        "@alpinejs/collapse": "^3.10.3",
+        "@alpinejs/intersect": "^3.10.3",
+        "alpinejs": "^3.10.3",
+        "autoprefixer": "^10.4.8",
+        "eslint": "^8.21.0",
+        "postcss": "^8.4.16",
+        "postcss-discard-comments": "^5.1.2",
+        "postcss-import": "^14.1.0",
+        "tailwindcss": "^3.1.0",
+        "vite": "^3.0.4",
+        "vite-plugin-nunjucks": "^0.1.10"
+    },
+    "dependencies": {}
 }

README.md

 # Tailwind CSS Animated
 
-Extended animation utilities for Tailwind CSS
+Extended animation utilities for Tailwind CSS<br>
+https://tailwindcss-animated.com
 
+
+## Installation
+
+Install the plugin from npm:
+
+```sh
+npm i tailwindcss-animated
+```
+
+Then add the plugin to your tailwind.config.js file:
+
+```js
+// tailwind.config.js
+module.exports = {
+  // ...
+  plugins: [
+    require('tailwindcss-animated')
+  ],
+}
+```
+
+
+## Usage
+
+This plugin brings various utility classes as well as several ready-to-use CSS animations. Here are some simple examples:
+
+```html
+<button class="animate-wiggle">
+  Hej, look at me!
+</button>
+
+<button class="animate-jump-in animate-delay-300 animate-once">
+  Wait a bit, then jump right in.
+</button>
+```
+
+### Ready-to-use animations
+
+There are several animations that can be integrated with a single utility class. These extend the Spin, Ping and Pulse animations of Tailwind CSS.
+
+Open the configurator to see them in action:<br>
+https://tailwindcss-animated.com/configurator.html
+
+All animations can be customized with the utility classes below.
+
+### Duration
+
+| Class | Properties |
+|-----|-----|
+| animate-duration-75 | animation-duration: 75ms; |
+| animate-duration-100 | animation-duration: 100ms; |
+| animate-duration-150 | animation-duration: 150ms; |
+| animate-duration-200 | animation-duration: 200ms; |
+| animate-duration-300 | animation-duration: 300ms; |
+| animate-duration-500 | animation-duration: 500ms; |
+| animate-duration-700 | animation-duration: 700ms; |
+| animate-duration-1000 | animation-duration: 1000ms; |
+
+### Delay
+
+| Class | Properties |
+|-----|-----|
+| animate-delay-none | animation-delay: 0ms; |
+| animate-delay-75 | animation-delay: 75ms; |
+| animate-delay-100 | animation-delay: 100ms; |
+| animate-delay-150 | animation-delay: 150ms; |
+| animate-delay-200 | animation-delay: 200ms; |
+| animate-delay-300 | animation-delay: 300ms; |
+| animate-delay-500 | animation-delay: 500ms; |
+| animate-delay-700 | animation-delay: 700ms; |
+| animate-delay-1000 | animation-delay: 1000ms; |
+
+### Iteration Count
+
+| Class | Properties |
+|-----|-----|
+| animate-infinite | animation-iteration-count: infinite; |
+| animate-once | animation-iteration-count: 1; |
+| animate-twice | animation-iteration-count: 2; |
+| animate-thrice | animation-iteration-count: 3; |
+
+### Direction
+
+| Class | Properties |
+|-----|-----|
+| animate-normal | animation-direction: normal; |
+| animate-reverse | animation-direction: reverse; |
+| animate-alternate | animation-direction: alternate; |
+| animate-alternate-reverse | animation-direction: alternate-reverse; |
+
+### Timing Function
+
+| Class | Properties |
+|-----|-----|
+| animate-ease-linear | animation-timing-function: linear; |
+| animate-ease-in | animation-timing-function: cubic-bezier(0.4, 0, 1, 1); |
+| animate-ease-out | animation-timing-function: cubic-bezier(0, 0, 0.2, 1); |
+| animate-ease-in-out | animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); |
+
+### Fill Mode
+
+| Class | Properties |
+|-----|-----|
+| animate-fill-none | animation-fill-mode: normal; |
+| animate-fill-forwards | animation-fill-mode: forwards; |
+| animate-fill-backwards | animation-fill-mode: backwards; |
+| animate-fill-both | animation-fill-mode: both; |
+
+### Play State
+
+| Class | Properties |
+|-----|-----|
+| animate-run | animation-play-state: running; |
+| animate-play | animation-play-state: running; |
+| animate-stop | animation-play-state: paused; |
+| animate-pause | animation-play-state: paused; |
+
+## Variant modifiers and breakpoints
+
+All variants and breakpoints (hover, focus, lg, ...) work with animations und animation utility classes.
+
+```html
+<div class="lg:hover:animate-shake motion-reduce:animate-none">
+  <!-- ... -->
+</div>
+```
+
+## Arbitrary values
+
+You can create custom properies on the fly by using square brackets. This works for Delay and Durations values.
+
+```html
+<div class="animate-delay-[85ms] animate-duration-[2s]">
+  <!-- ... -->
+</div>
+```
+
+## Customizing your theme
+
+If you want to change some animations, extend your tailwind.config.js file:
+
+```js
+// tailwind.config.js
+module.exports = {
+  theme: {
+    extend: {
+      animationDelay: {
+        275: '275ms',
+        5000: '5s',
+      },
+      animationDuration: {
+        2000: '2s',
+        'long': '10s',
+        'very-long': '20s',
+      },
+    },
+  },
+  plugins: [
+    require('tailwindcss-animated')
+  ],
+}
+```
+
+Take a look at [src/theme.js](https://github.com/new-data-services/tailwindcss-animated/blob/main/src/theme.js) for the default settings.

src/index.js

 const plugin = require('tailwindcss/plugin');
 
-const animation = plugin(
-    function ({ addUtilities, theme, variants, e }) {
-        addUtilities(
-            [
-                Object.entries(theme('animationDelay')).map(([key, value]) => {
-                    return {
-                        [`.${e(`animate-delay-${key}`)}`]: { 'animation-delay': value },
-                    };
-                }),
-            ],
-            variants('animationDelay')
-        );
-
-        addUtilities(
-            [
-                Object.entries(theme('animationDuration')).map(([key, value]) => {
-                    return {
-                        [`.${e(`animate-duration-${key}`)}`]: { 'animation-duration': value },
-                    };
-                }),
-            ],
-            variants('animationDuration')
-        );
-
-        addUtilities({
-            '.animate-infinite': { 'animation-iteration-count': 'infinite' },
-            '.animate-once': { 'animation-iteration-count': '1' },
-            '.animate-twice': { 'animation-iteration-count': '2' },
-            '.animate-thrice': { 'animation-iteration-count': '3' },
-        });
-
-        addUtilities({
-            '.animate-run': { 'animation-play-state': 'running' },
-            '.animate-play': { 'animation-play-state': 'running' },
-            '.animate-stop': { 'animation-play-state': 'paused' },
-            '.animate-pause': { 'animation-play-state': 'paused' },
-        });
-
-        addUtilities({
-            '.animate-normal': { 'animation-direction': 'normal' },
-            '.animate-reverse': { 'animation-direction': 'reverse' },
-            '.animate-alternate': { 'animation-direction': 'alternate' },
-            '.animate-alternate-reverse': { 'animation-direction': 'alternate-reverse' },
-        });
-
-        addUtilities({
-            '.animate-fill-none': { 'animation-fill-mode': 'normal' },
-            '.animate-fill-forwards': { 'animation-fill-mode': 'forwards' },
-            '.animate-fill-backwards': { 'animation-fill-mode': 'backwards' },
-            '.animate-fill-both': { 'animation-fill-mode': 'both' },
-        });
-    },
-    {
-        theme: {
-            extend: {
-                keyframes: {
-                    'wiggle': {
-                        '0%, 100%': { transform: 'rotate(-3deg)' },
-                        '50%': { transform: 'rotate(3deg)' },
-                    },
-                    'wiggle-more': {
-                        '0%, 100%': { transform: 'rotate(-12deg)' },
-                        '50%': { transform: 'rotate(12deg)' },
-                    },
-                    'fade-down': {
-                        '0%': { opacity: '0', transform: 'translateY(-2rem)' },
-                        '100%': { opacity: '1', transform: 'translateY(0)' },
-                    },
-                    'fade-up': {
-                        '0%': { opacity: '0', transform: 'translateY(2rem)' },
-                        '100%': { opacity: '1', transform: 'translateY(0)' },
-                    },
-                    'fade-left': {
-                        '0%': { opacity: '0', transform: 'translateX(2rem)' },
-                        '100%': { opacity: '1', transform: 'translateX(0)' },
-                    },
-                    'fade-right': {
-                        '0%': { opacity: '0', transform: 'translateX(-2rem)' },
-                        '100%': { opacity: '1', transform: 'translateX(0)' },
-                    },
-                    'flip-y': {
-                        '0%': { transform: 'rotateY(900deg)' },
-                        '100%': { transform: 'rotateY(0)' },
-                    },
-                    'flip-x': {
-                        '0%': { transform: 'rotateX(900deg)' },
-                        '100%': { transform: 'rotateX(0)' },
-                    },
-                    'flip-up': {
-                        '0%': { transform: 'rotateX(90deg)', transformOrigin: 'bottom' },
-                        '100%': { transform: 'rotateX(0)' },
-                    },
-                    'flip-down': {
-                        '0%': { transform: 'rotateX(-90deg)', transformOrigin: 'top' },
-                        '100%': { transform: 'rotateX(0)' },
-                    },
-                    'jump': {
-                        '0%,100%': { transform: 'scale(100%)' },
-                        '10%': { transform: 'scale(80%)' },
-                        '50%': { transform: 'scale(120%)' },
-                    },
-                    'jump-in': {
-                        '0%': { transform: 'scale(0%) '},
-                        '80%': { transform: 'scale(120%)' },
-                        '100%': { transform: 'scale(100%)' },
-                    },
-                    'jump-out': {
-                        '0%': { transform: 'scale(100%)' },
-                        '20%': { transform: 'scale(120%)' },
-                        '100%': { transform: 'scale(0%)' },
-                    },
-                },
-                animation: {
-                    'wiggle': 'wiggle 1s ease-in-out infinite',
-                    'wiggle-more': 'wiggle-more 1s ease-in-out infinite',
-                    'fade-down': 'fade-down 1s ease-out both',
-                    'fade-up': 'fade-up 1s ease-out both',
-                    'fade-left': 'fade-left 1s ease-out both',
-                    'fade-right': 'fade-right 1s ease-out both',
-                    'flip-y': 'flip-y 1s ease-out',
-                    'flip-x': 'flip-x 1s ease-out',
-                    'flip-up': 'flip-up 1s ease-out',
-                    'flip-down': 'flip-down 1s ease-out',
-                    'jump': 'jump .5s ease-in-out',
-                    'jump-in': 'jump-in .5s ease-in-out',
-                    'jump-out': 'jump-out .5s ease-in-out',
-                },
-                animationDelay: {
-                    none: '0ms',
-                    0: '0ms',
-                    75: '75ms',
-                    100: '100ms',
-                    150: '150ms',
-                    200: '200ms',
-                    300: '300ms',
-                    500: '500ms',
-                    700: '700ms',
-                    1000: '1000ms',
-                },
-                animationDuration: {
-                    75: '75ms',
-                    100: '100ms',
-                    150: '150ms',
-                    200: '200ms',
-                    300: '300ms',
-                    500: '500ms',
-                    700: '700ms',
-                    1000: '1000ms',
-                    1500: '1500ms',
-                    2000: '2000ms',
-                    3000: '3000ms',
-                    5000: '5000ms',
-                },
-            },
-        },
-        variants: {
-            animationDelay: ['responsive'],
-            animationDuration: ['responsive'],
-        },
-    }
-);
-
-module.exports = animation;
+module.exports = plugin(api => {
+    require('./utilities/delay')(api);
+    require('./utilities/direction')(api);
+    require('./utilities/duration')(api);
+    require('./utilities/fillMode')(api);
+    require('./utilities/iterationCount')(api);
+    require('./utilities/playState')(api);
+    require('./utilities/timingFunction')(api);
+}, {
+    theme: require('./theme'),
+});

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of package files

11

increased by22.22%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

170

increased by3300%

Worsened metrics

Total package byte prevSize

14299

decreased by-21.65%

Dev dependency count

11

increased by450%

Lines of code

288

decreased by-9.43%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes