@foundit/micro-animations - npm Package Compare versions

Comparing version 0.0.6 to 0.1.0

CHANGELOG.md

 # @foundit/micro-animations
 
+## 0.1.0
+
+### Minor Changes
+
+- d50c666: Add possibility to set a start state with the new 'transformInit' argument.
+
 ## 0.0.6
@@ -4,0 +10,0 @@

dist/index.d.ts

@@ -7,14 +7,16 @@ import { Property } from 'csstype';
 interface MicroAnimationProps {
-    /** Output values to console.log */
+    /** Optional - Output values to console.log */
     debug?: boolean;
-    /** Duration in ms */
+    /** Optional - Duration in ms. Default to 300ms */
     duration?: number;
-    /** CSS easing */
-    easing?: Property.AnimationTimingFunction;
-    /** The element to animate */
+    /** Optional - CSS easing. Default to 'linear' */
+    easing?: Property.TransitionTimingFunction;
+    /** Mandatory - The element to animate. */
     element: TargetElement;
-    /** CSS fillmode, defaults to 'forwards' */
+    /** Optional - CSS fillmode, defaults to 'forwards'. */
     fill?: FillMode;
-    /** Object (or array of objects if keyframe animation) with CSS properties to animate to */
+    /** Mandatory - Keyframe object (or array of keyframe objects if it consit of multiple keyframe) with CSS properties to animate to. */
     transformEnd: Keyframe | Keyframe[];
+    /** Optional - Keyframe object with CSS properties to start the animation from. Omit to use computed style as starting point. */
+    transformInit?: Keyframe;
 }
@@ -51,3 +53,3 @@ /**
  */
-declare function microAnimation({ debug, duration, easing, element: element, fill, transformEnd, }: MicroAnimationProps): Promise<unknown> | {
+declare function microAnimation({ debug, duration, easing, element: element, fill, transformEnd, transformInit, }: MicroAnimationProps): Promise<unknown> | {
     closeDialog: () => void;
@@ -54,0 +56,0 @@ openDialog: () => void;

dist/index.js

@@ -32,3 +32,4 @@ "use strict";
   fill = "forwards",
-  transformEnd
+  transformEnd,
+  transformInit
 }) {
@@ -57,12 +58,9 @@ if (!element) {
     const computedStyle = getComputedStyle(element);
-    const transformStart = targetProperties.reduce(
-      (acc, key) => {
-        var _a2;
-        if (key !== "offset")
-          acc[key] = (_a2 = computedStyle[key]) == null ? void 0 : _a2.toString();
-        return acc;
-      },
-      {}
-    );
-    debuglog(transformStart, transformEndArr);
+    const transformStart = transformInit != null ? transformInit : targetProperties.reduce((acc, key) => {
+      var _a2;
+      if (key !== "offset")
+        acc[key] = (_a2 = computedStyle[key]) == null ? void 0 : _a2.toString();
+      return acc;
+    }, {});
+    debuglog(transformInit, transformEndArr);
     if (element.currentAnimation) {
@@ -69,0 +67,0 @@ const timing = (_b = element.currentAnimation.effect) == null ? void 0 : _b.getComputedTiming();

index.ts

@@ -1,2 +0,2 @@
-import { Properties, Property } from 'csstype'
+import { Property } from 'csstype'
 
@@ -12,19 +12,22 @@ // =================================================================================================
 interface MicroAnimationProps {
-  /** Output values to console.log */
+  /** Optional - Output values to console.log */
   debug?: boolean
 
-  /** Duration in ms */
+  /** Optional - Duration in ms. Default to 300ms */
   duration?: number
 
-  /** CSS easing */
-  easing?: Property.AnimationTimingFunction
+  /** Optional - CSS easing. Default to 'linear' */
+  easing?: Property.TransitionTimingFunction
 
-  /** The element to animate */
+  /** Mandatory - The element to animate. */
   element: TargetElement
 
-  /** CSS fillmode, defaults to 'forwards' */
+  /** Optional - CSS fillmode, defaults to 'forwards'. */
   fill?: FillMode
 
-  /** Object (or array of objects if keyframe animation) with CSS properties to animate to */
+  /** Mandatory - Keyframe object (or array of keyframe objects if it consit of multiple keyframe) with CSS properties to animate to. */
   transformEnd: Keyframe | Keyframe[]
+
+  /** Optional - Keyframe object with CSS properties to start the animation from. Omit to use computed style as starting point. */
+  transformInit?: Keyframe
 }
@@ -73,2 +76,3 @@
   transformEnd,
+  transformInit,
 }: MicroAnimationProps) {
@@ -92,5 +96,5 @@ if (!element) {
     (acc, transformObj: Keyframe) => {
-      return [...acc, ...Object.keys(transformObj)] as (keyof Properties)[]
+      return [...acc, ...Object.keys(transformObj)] as (keyof Keyframe)[]
     },
-    [] as (keyof Properties)[]
+    [] as (keyof Keyframe)[]
   )
@@ -103,10 +107,9 @@ debuglog('targetProps', targetProperties)
     const computedStyle = getComputedStyle(element) as unknown as Keyframe
-    const transformStart = targetProperties.reduce(
-      (acc: Keyframe, key: string) => {
+    const transformStart =
+      transformInit ??
+      targetProperties.reduce((acc: Keyframe, key: keyof Keyframe) => {
         if (key !== 'offset') acc[key] = computedStyle[key]?.toString()
         return acc
-      },
-      {}
-    )
-    debuglog(transformStart, transformEndArr)
+      }, {})
+    debuglog(transformInit, transformEndArr)
 
@@ -113,0 +116,0 @@ // Handle pick up of properties from previously aborted animations

package.json

 {
   "name": "@foundit/micro-animations",
-  "version": "0.0.6",
+  "version": "0.1.0",
   "description": "",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -1,13 +0,10 @@
-# Micro Animation
+# Micro Animation Helper
 
-A light shim over the Web Animation API to swiftly create awaitable micro animations from JS.
+A framework agnostic light shim over the Web Animation API to swiftly create awaitable micro animations from JS.
 
 ## Why
 
-Often times using transitions in the CSS creates constant custom code for every animation,
-prone to timing problem between CSS timing and JS. By moving the transitions from CSS to JS
-the result is both cleaner code, less code and perfect timing as a result.
+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.
 
-The Web Animation API is powerfull but clunky. The microAnimation lib is all you need for your
-micro animation one liners.
+The Web Animation API is powerfull but clunky. The microAnimation lib is all you need for your micro animation one liners.
 
@@ -27,3 +24,3 @@ ## Install
 Minimum is to pass an element and a transformEnd object containing the properties you want to animate to.
-Transform start is picked up from the element's computed style.
+Animation start state is then picked up from the element's computed style. There is a possibility to set an initial state by `transitionInit` argument but unless there is a special reason avoid it to avoid jankiness when the animation is canceled and restarted in quick succession.
 
@@ -33,3 +30,3 @@ ```js
   await microAnimation({
-    element: myModal,
+    element: myModalElement,
     duration: 300,
@@ -47,2 +44,3 @@ transformEnd: { opacity: 0 },
 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.
 
@@ -52,3 +50,3 @@ ```js
 await microAnimation({
-  element,
+  element: myAnimatedElement,
   duration: 1000,
@@ -69,5 +67,3 @@ easing: 'ease-out',
 
-microAnimation does not accept a start state, instead it takes the computed styles. In most
-cases this is desired to avoid jankiness. In case you need to put a start state you'd need
-to do something similar to:
+microAnimation does not accept a start state, instead it takes the computed styles. In most cases this is desired to avoid jankiness. In case you need to put a start state you'd need to do something similar to:
 
@@ -93,12 +89,21 @@ ```js
 
-Use `void` instead of `await` if you don't need to wait for the promise to resolve. Handy if you
-need to execute it directly inside a useEffect in React where you can't have await. It is also
-thenable should you prefer that to await.
+Use `void` instead of `await` if you don't need to wait for the promise to resolve. Handy if you need to execute it directly inside a useEffect in React where you can't have await. It is also _thenable_ should you prefer that to await.
 
 ### microAnimation arguments
 
-- `element` - a DOM element or ref element if your using React
 - `duration` - duration of the total nimation in ms
 - `easing` - any of the easings available in CSS, i.e 'ease-in', 'linear', etc
-- `transformEnd` - a object or array of keyframe objects containg animatable CSS properties in camel case
+- <span style="font-weight:bold">`element`</span><span style="color:red;font-weight:bold">\*</span> - a DOM element or ref element if your using React
 - `fill` - same function as fillMode in CSS, defaults to 'forward'
+- <span style="font-weight:bold">`transformEnd`</span><span style="color:red;font-weight:bold">\*</span> - a keyframe object or array of keyframe objects containg animatable CSS properties in camel case
+- `transformInit` - Keyframe object with CSS properties to start the animation from. Recommended to omit to use computed style as starting point.
+
+### The keyframe object
+
+A keframe object is an object with camel cased css properties as keys with values.
+
+---
+
+Links: [NPM](https://www.npmjs.com/package/@foundit/micro-animations) | [Github Issues](https://github.com/nicatspark/microAnimation/issues)
+
+Author: [[e-mail]](mailto:[e-mail])

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

33709

increased by7.33%

Number of lines in readme file

104

increased by5.05%

No dependency changes