@foundit/micro-animations - npm Package Compare versions

Comparing version 0.1.5 to 0.2.0

CHANGELOG.md

 # @foundit/micro-animations
 
+## 0.2.0
+
+### Minor Changes
+
+- Now possible to animate more than one element with the same animation
+
+### Patch Changes
+
+- 00ed455: Updated read me with additional optional arguments.
+
 ## 0.1.5
@@ -4,0 +14,0 @@

dist/index.d.ts

@@ -14,3 +14,3 @@ interface TargetElement extends Element {
     /** Mandatory - The element to animate. */
-    element: TargetElement;
+    element: TargetElement | TargetElement[];
     /** Optional - CSS fillmode, defaults to 'forwards'. */
@@ -56,4 +56,4 @@ fill?: FillMode;
  */
-declare function microAnimation({ composite, debug, duration, easing, element: element, fill, transformEnd, transformInit, pseudoElement, }: MicroAnimationProps): Promise<unknown>;
+declare function microAnimation({ composite, debug, duration, easing, element: element, fill, transformEnd, transformInit, pseudoElement, }: MicroAnimationProps): Promise<PromiseSettledResult<AnimationPlaybackEvent>[]>;
 
 export { MicroAnimationProps, TargetElement, microAnimation };

dist/index.js

@@ -37,3 +37,4 @@ "use strict";
 }) {
-  if (!element) {
+  const elementArr = Array.isArray(element) ? element : [element];
+  if (elementArr.filter(Boolean).length === 0) {
     const err = "No element passed to microAnimation";
@@ -51,23 +52,21 @@ throw new Error(err);
   debuglog("targetProps", targetProperties);
-  return new Promise((resolve) => {
-    var _a, _b, _c, _d;
-    (_a = element.currentAnimation) == null ? void 0 : _a.pause();
-    const computedStyle = getComputedStyle(element);
-    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) {
-      const timing = (_b = element.currentAnimation.effect) == null ? void 0 : _b.getComputedTiming();
-      const activeDuration = parseInt(String(timing == null ? void 0 : timing.activeDuration));
-      const activeProgress = (_c = timing == null ? void 0 : timing.progress) != null ? _c : 0;
-      duration -= activeDuration - activeProgress * activeDuration;
-    }
-    (_d = element.currentAnimation) == null ? void 0 : _d.cancel();
-    element.currentAnimation = element.animate(
-      [transformStart, ...transformEndArr],
-      {
+  const tasks = [];
+  elementArr.forEach((el) => {
+    const task = new Promise((resolve) => {
+      el.currentAnimation?.pause();
+      const computedStyle = getComputedStyle(el);
+      const transformStart = transformInit ?? targetProperties.reduce((acc, key) => {
+        if (key !== "offset")
+          acc[key] = computedStyle[key]?.toString();
+        return acc;
+      }, {});
+      debuglog(transformInit, transformEndArr);
+      if (el.currentAnimation) {
+        const timing = el.currentAnimation.effect?.getComputedTiming();
+        const activeDuration = parseInt(String(timing?.activeDuration));
+        const activeProgress = timing?.progress ?? 0;
+        duration -= activeDuration - activeProgress * activeDuration;
+      }
+      el.currentAnimation?.cancel();
+      el.currentAnimation = el.animate([transformStart, ...transformEndArr], {
         composite,
@@ -78,7 +77,9 @@ duration,
         pseudoElement
-      }
-    );
-    element.currentAnimation.onfinish = resolve;
-    element.currentAnimation.oncancel = null;
+      });
+      el.currentAnimation.onfinish = resolve;
+      el.currentAnimation.oncancel = null;
+    });
+    tasks.push(task);
   });
+  return Promise.allSettled(tasks);
   function debuglog(_, ...rest) {
@@ -85,0 +86,0 @@ if (debug)

index.ts

@@ -23,3 +23,3 @@ // =================================================================================================
   /** Mandatory - The element to animate. */
-  element: TargetElement
+  element: TargetElement | TargetElement[]
 
@@ -85,3 +85,6 @@ /** Optional - CSS fillmode, defaults to 'forwards'. */
 }: MicroAnimationProps) {
-  if (!element) {
+  const elementArr: TargetElement[] = Array.isArray(element)
+    ? element
+    : [element]
+  if (elementArr.filter(Boolean).length === 0) {
     const err = 'No element passed to microAnimation'
@@ -104,26 +107,27 @@ throw new Error(err)
 
-  return new Promise((resolve) => {
-    element.currentAnimation?.pause()
-    /* Typescript believes getComputedStyle returns an array ¯\_(ツ)_/¯, workaround */
-    const computedStyle = getComputedStyle(element) as unknown as Keyframe
-    const transformStart =
-      transformInit ??
-      targetProperties.reduce((acc: Keyframe, key: keyof Keyframe) => {
-        if (key !== 'offset') acc[key] = computedStyle[key]?.toString()
-        return acc
-      }, {})
-    debuglog(transformInit, transformEndArr)
+  const tasks: Promise<AnimationPlaybackEvent>[] = []
 
-    // Handle pick up of properties from previously aborted animations
-    if (element.currentAnimation) {
-      const timing = element.currentAnimation.effect?.getComputedTiming()
-      const activeDuration = parseInt(String(timing?.activeDuration))
-      const activeProgress = timing?.progress ?? 0
-      duration -= activeDuration - activeProgress * activeDuration
-    }
+  elementArr.forEach((el) => {
+    const task = new Promise<AnimationPlaybackEvent>((resolve) => {
+      el.currentAnimation?.pause()
+      /* Typescript believes getComputedStyle returns an array ¯\_(ツ)_/¯, workaround */
+      const computedStyle = getComputedStyle(el) as unknown as Keyframe
+      const transformStart =
+        transformInit ??
+        targetProperties.reduce((acc: Keyframe, key: keyof Keyframe) => {
+          if (key !== 'offset') acc[key] = computedStyle[key]?.toString()
+          return acc
+        }, {})
+      debuglog(transformInit, transformEndArr)
 
-    element.currentAnimation?.cancel()
-    element.currentAnimation = element.animate(
-      [transformStart, ...transformEndArr],
-      {
+      // Handle pick up of properties from previously aborted animations
+      if (el.currentAnimation) {
+        const timing = el.currentAnimation.effect?.getComputedTiming()
+        const activeDuration = parseInt(String(timing?.activeDuration))
+        const activeProgress = timing?.progress ?? 0
+        duration -= activeDuration - activeProgress * activeDuration
+      }
+
+      el.currentAnimation?.cancel()
+      el.currentAnimation = el.animate([transformStart, ...transformEndArr], {
         composite: composite,
@@ -134,7 +138,9 @@ duration: duration,
         pseudoElement: pseudoElement,
-      }
-    )
-    element.currentAnimation.onfinish = resolve
-    element.currentAnimation.oncancel = null
+      })
+      el.currentAnimation.onfinish = resolve
+      el.currentAnimation.oncancel = null
+    })
+    tasks.push(task)
   })
+  return Promise.allSettled(tasks)
 
@@ -141,0 +147,0 @@ // eslint-disable-next-line @typescript-eslint/no-unused-vars

package.json

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

README.md

@@ -11,3 +11,3 @@ # Micro Animation Helper
 
-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 helper is all you need for your micro animation one liners.
 
@@ -88,4 +88,6 @@ ## Install
 - `easing` - any of the easings available in CSS, i.e 'ease-in', 'linear', etc
-- <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
+- <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. Can also be more than one, then passed in a array.
 - `fill` - same function as fillMode in CSS, defaults to 'forward'
+- `pseudoElement` - Accepts a string with your pseudo element. E.g '::after'
+- `composite` - takes 'replace', 'add' or 'accumulate'. [See mdn](https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/)composite for explanation.
 - <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 with its corresponding values
@@ -92,0 +94,0 @@ - `transformInit` - Keyframe object with CSS properties to start the animation from. Recommended to omit to use computed style as starting point.

tsconfig.json

@@ -14,3 +14,3 @@ {
     /* Language and Environment */
-    "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
+    "target": "es2020" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
     // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
@@ -17,0 +17,0 @@ // "jsx": "preserve",                                /* Specify what JSX code is generated. */

No alert changes

Improved metrics

Total package byte prevSize

37768

increased by2.14%

Lines of code

464

increased by1.53%

Number of lines in readme file

107

increased by1.9%

No dependency changes