animate-css-grid - npm Package Compare versions

Comparing version 1.5.0 to 1.5.1

dist/index.d.ts

@@ -1,27 +0,5 @@
-import { Easing } from "@popmotion/easing";
-interface PopmotionEasing {
-    linear: Easing;
-    easeIn: Easing;
-    easeOut: Easing;
-    easeInOut: Easing;
-    circIn: Easing;
-    circOut: Easing;
-    circInOut: Easing;
-    backIn: Easing;
-    backOut: Easing;
-    backInOut: Easing;
-    anticipate: Easing;
-}
-interface WrapGridArguments {
-    duration?: number;
-    stagger?: number;
-    easing?: keyof PopmotionEasing;
-    onStart?: (animatedChildren: HTMLElement[]) => void;
-    onEnd?: (animatedChildren: HTMLElement[]) => void;
-}
-export const wrapGrid: (container: HTMLElement, { duration, stagger, easing, onStart, onEnd, }?: WrapGridArguments) => {
+import { WrapGridArguments } from './types';
+export declare const wrapGrid: (container: HTMLElement, { duration, stagger, easing, onStart, onEnd, }?: WrapGridArguments) => {
     unwrapGrid: () => void;
     forceGridAnimation: () => void;
 };
-
-//# sourceMappingURL=index.d.ts.map

package.json

 {
   "name": "animate-css-grid",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "source": "src/index.ts",
@@ -10,3 +10,3 @@ "main": "dist/main.js",
   "homepage": "https://github.com/aholachek/animate-css-grid",
-   "files": [
+  "files": [
     "/dist"
@@ -13,0 +13,0 @@ ],

README.md

 # Animate CSS Grid
 
-Seamlessly animate all CSS grid properties, including:
+Performantly animate all CSS grid properties, including:
 
@@ -25,8 +25,15 @@ ### `grid-column` and `grid-row`
 
-- #### [Fork Photo Grid Example on CodeSandbox (uses ES2015 imports)](https://codesandbox.io/s/animate-css-grid-template-t6qsf)
-- #### [Fork Photo Grid Example on Codepen (uses script tags)](https://codepen.io/aholachek/pen/VXjOPB)
+#### [Fork Photo Grid Example on CodeSandbox](https://codesandbox.io/s/animate-css-grid-template-t6qsf)
 
-This script makes it easy to transition your CSS grid gracefully from one state to another.
-If the content of the grid changes, or if the grid or one of its children is updated with the addition or removal of a class, the grid will automatically transition to its new configuration.
 
+### Why use animate-css-grid?
+
+This library uses transforms to transition between different layout states, which means, in comparison to pure [CSS grid animations](https://web.dev/css-animated-grid-layouts/), it offers:
+
+- better performance 
+- more flexibility in terms of what properties can be animated
+- more configurable animations (easing options, staggers)
+
+Want to have a look for yourself? Feel free to check out [this Mondrian animated with CSS keyframes](https://codepen.io/aholachek/pen/poOeXBM) and compare it with  [the same UI animated with animate-css-grid.](https://codepen.io/aholachek/pen/XWPMwEx)
+
 ## How to use it
@@ -37,3 +44,2 @@
 
-ES6 Module:
 
@@ -40,0 +46,0 @@ `yarn add animate-css-grid` or `npm install animate-css-grid`

Fixed alerts

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

Improved metrics

Total package byte prevSize

77204

increased by1.02%

Number of package files

10

increased by11.11%

Lines of code

512

increased by5.13%

Number of lines in readme file

141

increased by4.44%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes