@lit-labs/motion
Advanced tools
Comparing version 1.0.0-rc.4 to 1.0.0
@@ -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 |
@@ -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 |
@@ -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 |
{ | ||
"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": { |
@@ -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 |
@@ -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 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis 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 riskPackage 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 riskA 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
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
139131
0
914
116
2
+ Addedlit@2.8.0(transitive)
- Removedlit@2.0.0-rc.4(transitive)
Updatedlit@^2.0.0