@foundit/micro-animations - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

CHANGELOG.md

 # @foundit/micro-animations
 
+## 0.1.4
+
+### Patch Changes
+
+- Change element type from HTMLElement to Element
+
 ## 0.1.3
@@ -4,0 +10,0 @@

dist/index.d.ts

 import { Property } from 'csstype';
 
-interface TargetElement extends HTMLElement {
+interface TargetElement extends Element {
     currentAnimation?: Animation;
@@ -5,0 +5,0 @@ }

index.ts

@@ -7,3 +7,3 @@ import { Property } from 'csstype'
 
-interface TargetElement extends HTMLElement {
+interface TargetElement extends Element {
   currentAnimation?: Animation
@@ -10,0 +10,0 @@ }

package.json

 {
   "name": "@foundit/micro-animations",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "",
@@ -15,3 +15,10 @@ "main": "dist/index.js",
   },
-  "keywords": [],
+  "keywords": [
+    "animations",
+    "async",
+    "promise",
+    "micro animations",
+    "transitions",
+    "UX"
+  ],
   "author": "Nicolas Hervy",
@@ -18,0 +25,0 @@ "license": "ISC",

README.md

@@ -7,2 +7,4 @@ # Micro Animation Helper
 
+Javascript is an event driven language and UI is state driven. Transitions between different states in the UI are driven by events. So should the transition be defined by CSS and the UI as it is most commonly done today, or should it be done by Javascript? One way of looking at it is: what solution generates less lines of code. And if that is the case I'd say Javascript mostley wins.
+
 Often times using transitions in the CSS creates constant custom CSS code for every animation, hard to parse and prone to timing problem between CSS timing and JS. By moving the transitions from CSS to JS the result is both cleaner and less code and in perfect sync with other JS events as a result. It is obvious that micro animation belongs in JavaScript and not in CSS. Specially when there is a need to chain events.
@@ -39,3 +41,3 @@
 
-The underlying Web Animation API blurs the differences between transitions and keyframe animation. So we do too :) For a keyframe animation, pass an array of keyframe objects. The offset property is optional, defaults to splitting equally between frames. In the example below, the background color will change to orangered at 70% of the animation. The keyframes will equally share the duration if the middle keyframe(s) `offset` key is omitted.
+The underlying Web Animation API blurs the differences between CSS transitions and keyframe animation. So we do too 🙂 For a keyframe animation, pass an array of keyframe objects. The offset property is optional, defaults to splitting equally between frames. In the example below, the background color will change to orangered at 70% of the animation. The keyframes will equally share the duration if the middle keyframe(s) `offset` key is omitted.
 
@@ -66,2 +68,3 @@ ```js
   // create and execute a micro animation with a set start state style
+  // the myModal element fades in and slides upp 10px
   // run you micro animation
@@ -68,0 +71,0 @@ void microAnimation({

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

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

Improved metrics

Total package byte prevSize

36063

increased by1.74%

Number of lines in readme file

105

increased by2.94%

No dependency changes