@lit-labs/motion - npm Package Compare versions

Comparing version 1.0.0-rc.4 to 1.0.0

development/index.d.ts

@@ -6,5 +6,5 @@ /**
  */
-export * from './flip.js';
-export * from './flip-controller.js';
+export * from './animate.js';
+export * from './animate-controller.js';
 export * from './position.js';
 //# sourceMappingURL=index.d.ts.map

development/index.js

@@ -6,5 +6,5 @@ /**
  */
-export * from './flip.js';
-export * from './flip-controller.js';
+export * from './animate.js';
+export * from './animate-controller.js';
 export * from './position.js';
 //# sourceMappingURL=index.js.map

index.js

@@ -1,2 +0,2 @@
-export{Flip,animationFrame,defaultAnimationOptions,defaultCssProperties,fade,fadeIn,fadeInSlow,fadeOut,flip,flyAbove,flyBelow,flyLeft,flyRight,none,transformProps}from"./flip.js";export{FlipController,flipControllers}from"./flip-controller.js";export{Position,position}from"./position.js";
+export{Animate,animate,animationFrame,defaultCssProperties,defaultKeyframeOptions,fade,fadeIn,fadeInSlow,fadeOut,flyAbove,flyBelow,flyLeft,flyRight,none,transformProps}from"./animate.js";export{AnimateController,controllerMap}from"./animate-controller.js";export{Position,position}from"./position.js";
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@lit-labs/motion",
-  "version": "1.0.0-rc.4",
+  "version": "1.0.0",
   "description": "Lit directives for making things move.",
@@ -29,4 +29,4 @@ "license": "BSD-3-Clause",
     "/index.{d.ts,d.ts.map,js,js.map}",
-    "/flip.{d.ts,d.ts.map,js,js.map}",
-    "/flip-controller.{d.ts,d.ts.map,js,js.map}",
+    "/animate.{d.ts,d.ts.map,js,js.map}",
+    "/animate-controller.{d.ts,d.ts.map,js,js.map}",
     "/position.{d.ts,d.ts.map,js,js.map}"
@@ -39,3 +39,3 @@ ],
     "build:ts:watch": "tsc  --build --watch",
-    "clean": "rm -rf {index,flip,position}.{js,js.map,d.ts} development/ test/ *.tsbuildinfo",
+    "clean": "rm -rf {index,animate,position}.{js,js.map,d.ts} development/ test/ *.tsbuildinfo",
     "dev": "scripts/dev.sh",
@@ -64,3 +64,3 @@ "test": "npm run test:dev && npm run test:prod",
   "dependencies": {
-    "lit": "2.0.0-rc.4"
+    "lit": "^2.0.0"
   },
@@ -67,0 +67,0 @@ "publishConfig": {

position.js

@@ -1,2 +0,2 @@
-import{nothing as t}from"lit/html.js";import{directive as i,PartType as o}from"lit/directive.js";import{AsyncDirective as s}from"lit/async-directive.js";const r=["top","right","bottom","left"];class e extends s{constructor(t){if(super(t),t.type!==o.ELEMENT)throw Error("The `position` directive must be used in attribute position.")}render(i,o){return t}update(t,[i,o]){var s;return void 0===this.l&&(this.l=null===(s=t.options)||void 0===s?void 0:s.host,this.l.addController(this)),this.S=t.element,this.$=i,this.k=null!=o?o:["left","top","width","height"],this.render(i,o)}hostUpdated(){this.O()}O(){var t,i;const o="function"==typeof this.$?this.$():null===(t=this.$)||void 0===t?void 0:t.value,s=o.offsetParent;if(void 0===o||!s)return;const e=o.getBoundingClientRect(),h=s.getBoundingClientRect();null===(i=this.k)||void 0===i||i.forEach((t=>{const i=r.includes(t)?e[t]-h[t]:e[t];this.S.style[t]=i+"px"}))}}const h=i(e);export{e as Position,h as position};
+import{nothing as t}from"lit/html.js";import{directive as i,PartType as o}from"lit/directive.js";import{AsyncDirective as s}from"lit/async-directive.js";const r=["top","right","bottom","left"];class e extends s{constructor(t){if(super(t),t.type!==o.ELEMENT)throw Error("The `position` directive must be used in attribute position.")}render(i,o){return t}update(t,[i,o]){var s;return void 0===this.l&&(this.l=null===(s=t.options)||void 0===s?void 0:s.host,this.l.addController(this)),this.$=t.element,this.k=i,this.F=null!=o?o:["left","top","width","height"],this.render(i,o)}hostUpdated(){this.O()}O(){var t,i;const o="function"==typeof this.k?this.k():null===(t=this.k)||void 0===t?void 0:t.value,s=o.offsetParent;if(void 0===o||!s)return;const e=o.getBoundingClientRect(),h=s.getBoundingClientRect();null===(i=this.F)||void 0===i||i.forEach((t=>{const i=r.includes(t)?e[t]-h[t]:e[t];this.$.style[t]=i+"px"}))}}const h=i(e);export{e as Position,h as position};
 //# sourceMappingURL=position.js.map

README.md

@@ -13,40 +13,39 @@ # @lit-labs/motion
 
-## Flip directive
+## Animate directive
 
-The `flip` directive can be used to animate DOM elements from one lit render
-to the next. If the `flip` element between renders, it will perform a "tweening"
-animation between the two states based on the options given. In addition,
-elements can animate when they initially render to DOM and when they are
-removed.
+The `animate` directive can be used to animate DOM elements from one lit render
+to the next. If the `animate` element changes state between renders, the directive
+performs a "tweening" animation between the two states based on the options given. 
+In addition, elements can animate when they initially render to DOM and when they 
+are removed.
 
 The directive supports a number of options:
 
-| Option           | Usage                                                                                                          |
-| ---------------- | -------------------------------------------------------------------------------------------------------------- |
-| animationOptions | configure animation via standard KeyframeAnimationOptions                                                      |
-| properties       | list of properties to animate, defaults to ['left', 'top','width', 'height', 'opacity', 'color', 'background'] |
-| disabled         | disables animation                                                                                             |
-| guard            | function producing values that must change for the flip to run                                                 |
-| in               | keyframes to use when animating in                                                                             |
-| out              | keyframes to use when animating out                                                                            |
-| skipInitial      | skip animating in the first time                                                                               |
-| id               | used to link to other flips via `inId`                                                                         |
-| inId             | id of the flip to render from when animating in                                                                |
-| onStart          | run when the flip starts                                                                                       |
-| onComplete       | run when the flip completes                                                                                    |
-| onFrames         | run when the frames are produces, use to modify frames                                                         |
+| Option          | Usage                                                                                                          |
+| --------------- | -------------------------------------------------------------------------------------------------------------- |
+| keyframeOptions | configure animation via standard KeyframeAnimationOptions                                                      |
+| properties      | list of properties to animate, defaults to ['left', 'top','width', 'height', 'opacity', 'color', 'background'] |
+| disabled        | disables animation                                                                                             |
+| guard           | function producing values that must change for the `animate` to run                                            |
+| in              | keyframes to use when animating in                                                                             |
+| out             | keyframes to use when animating out                                                                            |
+| skipInitial     | skip animating in the first time                                                                               |
+| id              | used to link to other `animate`'s via `inId`                                                                   |
+| inId            | id of the `animate` to render from when animating in                                                           |
+| onStart         | run when the `animate` starts                                                                                  |
+| onComplete      | run when the `animate` completes                                                                               |
+| onFrames        | run when the frames are produced, use to modify frames                                                         |
 
 ### How it works
 
-The directive name is based on an animation technique of the same
-name derived from First, Last, Invert, Play. This describes how the directive
-works. It measures the styling of the flip element before a layout change
-(first) and after a layout change (last). Then it inverts the last layout
-such that it matches the first layout. Finally it plays an animation which
-removes the inverted layout such that the element animates to the "last" layout.
-See the [flip article by Paul Lewis](https://aerotwist.com/blog/flip-your-animations/)
+The directive uses the FLIP animation technique--derived from First, Last, Invert, 
+Play. This describes how the directive works. It measures the styling of the `animate` 
+element before a layout change (first) and after a layout change (last). Then it 
+inverts the last layout such that it matches the first layout. Finally it plays an 
+animation which removes the inverted layout such that the element animates to the 
+"last" layout. See the [FLIP article by Paul Lewis](https://aerotwist.com/blog/flip-your-animations/)
 for more information about the technique.
 
 The directive uses a reactive controller to coordinate measuring the DOM of the
-flip element. The first layout is measured when the hosting element updates,
+`animate` element. The first layout is measured when the hosting element updates,
 and the last layout is measured when the hosting element renders and completes
@@ -60,3 +59,3 @@ its update.
 ```ts
-import {flip} from '@lit-labs/motion';
+import {animate} from '@lit-labs/motion';
 // ...
@@ -84,3 +83,3 @@
       <button @click=${this._toggle}>Move</button>
-      <div class="box ${this.shifted ? 'shifted' : ''}" ${flip()}></div>
+      <div class="box ${this.shifted ? 'shifted' : ''}" ${animate()}></div>
     `;
@@ -95,5 +94,5 @@ }
 
-## Flip controller
+## AnimateController
 
-The flip controller allows you to coordinate and control flip directives within
+The animate controller allows you to coordinate and control `animate` directives within
 a given element.
@@ -103,15 +102,15 @@
 
-| Property    | Usage                                                            |
-| ----------- | ---------------------------------------------------------------- |
-| flipOptions | default options for all element flip directives                  |
-| startPaused | all element flip animations start paused                         |
-| disabled    | disables all element flip animations                             |
-| onComplete  | run when all element flip animations complete for a given update |
+| Property       | Usage                                                       |
+| -------------- | ----------------------------------------------------------- |
+| defaultOptions | default options for all element `animate` directives        |
+| startPaused    | all element animations start paused                         |
+| disabled       | disables all element animations                             |
+| onComplete     | run when all element animations complete for a given update |
 
-The flip controller also provides API for controlling flip animations,
+The animate controller also provides API for controlling `animate` animations,
 including `play()`, `pause()`, `cancel()`, `finish()`, and `togglePlay()`.
-These methods affect all the flip animations for a given element. Finally,
-flip controller has properties which reflect the state of the flip animations
-in the host element: `isPlaying` returns true if any flips are
-currently playing; `isAnimating` returns true if any flips currently have
+These methods affect all the `animate` animations for a given element. Finally,
+animate controller has properties which reflect the state of the `animate` animations
+in the host element: `isPlaying` returns true if any `animate`'s are
+currently playing; `isAnimating` returns true if any `animate`s currently have
 animations (which may be paused).
@@ -118,0 +117,0 @@

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

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

139131

increased by0.17%

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Lines of code

914

decreased by-1.08%

Number of lines in readme file

116

decreased by-0.85%

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Addedlit@2.8.0(transitive)

• - Removedlit@2.0.0-rc.4(transitive)

• Updatedlit@^2.0.0