@foundit/micro-animations - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

CHANGELOG.md

 # @foundit/micro-animations
 
+## 0.0.4
+
+### Patch Changes
+
+- b9c2ca3: Minor fixes
+- 74dba4b: Updated readme
+
 ## 0.0.3
@@ -4,0 +11,0 @@

dist/index.js

@@ -43,3 +43,3 @@ "use strict";
   return new Promise((resolve) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     if (!element)
@@ -62,6 +62,6 @@ return;
       const activeDuration = parseInt(String(timing == null ? void 0 : timing.activeDuration));
-      const activeProgress = timing == null ? void 0 : timing.progress;
+      const activeProgress = (_c = timing == null ? void 0 : timing.progress) != null ? _c : 0;
       duration -= activeDuration - activeProgress * activeDuration;
     }
-    (_c = element.currentAnimation) == null ? void 0 : _c.cancel();
+    (_d = element.currentAnimation) == null ? void 0 : _d.cancel();
     element.currentAnimation = element.animate(
@@ -68,0 +68,0 @@ [transformStart, ...transformEndArr],

index.ts

@@ -7,4 +7,2 @@ import { Properties, Property } from 'csstype'
 
-type TransformEnd = Keyframe // Properties | EmptyObject
-
 interface TargetElement extends HTMLElement {
@@ -97,3 +95,3 @@ currentAnimation?: Animation
       (acc: Keyframe, key: string) => {
-        if (key !== 'offset') acc[key] = computedStyle[key]?.toString()!
+        if (key !== 'offset') acc[key] = computedStyle[key]?.toString()
         return acc
@@ -109,3 +107,3 @@ },
       const activeDuration = parseInt(String(timing?.activeDuration))
-      const activeProgress = timing?.progress!
+      const activeProgress = timing?.progress ?? 0
       duration -= activeDuration - activeProgress * activeDuration
@@ -127,3 +125,5 @@ }
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   function debuglog(_: unknown, ...rest: unknown[]) {
+    // eslint-disable-next-line prefer-rest-params
     if (debug) console.log(arguments)
@@ -135,2 +135,13 @@ }
 
-export type { TargetElement, MicroAnimationProps }
+export type { MicroAnimationProps, TargetElement }
+
+/*
+ * Workflow:
+ * pnpm changeset - create a new changeset
+ *
+ * Release sequence:
+ * pnpm run build - builds the package
+ * pnpm changeset version - bumps the version in the changeset/package json
+ * pnpm changeset publish - publishes the package to npm
+ * git push --follow-tags origin main
+ */

package.json

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

README.md

 # Micro Animation
 
-A light wrapper around the Web Animation API to swiftly create awaitable micro animations from JS.
+A 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,
@@ -9,8 +11,17 @@ prone to timing problem between CSS timing and JS. By moving the transitions from CSS to JS
 
+The Web Animation API is powerfull but clunky. The microAnimation lib is all you need for your
+micro animation one liners.
+
 ## Install
 
-`npm install @foundit/microAnimation`
+`npm install @foundit/micro-animation`
 
 ## Usage
 
+### import
+
+`import { microAnimation } from '@foundit/micro-animation'`
+
+### Executing an animation
+
 Minimum is to pass an element and a transformEnd object containing the properties you want to animate to.
@@ -20,5 +31,5 @@ Transform start is picked up from the element's computed style.
 ```js
-async function close() {
+async function closeModal() {
   await microAnimation({
-    element,
+    element: myModal,
     duration: 300,
@@ -31,3 +42,5 @@ transformEnd: { opacity: 0 },
 
-For a keyframe animation, pass an array of transformEnd objects.
+### Animating with several keyframes
+
+For a keyframe animation, pass an array of keyframe objects.
 The offset property is optional, and defaults to 0. In the example below,
@@ -49,3 +62,41 @@ the background color will change to orangered at 70% of the animation.
    }]
+})
  ...
 ```
+
+### Start state
+
+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:
+
+```js
+async function openModal() {
+  // set start style state
+  Object.assign(myModalElement.style, {
+    translate: '0 10px',
+    opacity: 0,
+  })
+  // wait a js cycle to let it render
+  await new Promise((resolve) => setTimeout(resolve, 0))
+  // run you micro animation
+  void microAnimation({
+    element: myModal,
+    duration: 300,
+    easing: 'ease-in',
+    transformEnd: { opacity: 0 },
+  })
+}
+```
+
+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
+- `fill` - same function as fillMode in CSS, defaults to 'forward'

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

30820

increased by7.09%

Lines of code

427

increased by2.64%

Number of lines in readme file

99

increased by106.25%

No dependency changes