@infinityfx/lively 0.2.3 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +116 -16
- package/dist/cjs/animatable-3481c274.js +1 -0
- package/dist/cjs/animate.js +1 -1
- package/dist/cjs/animation-80770446.js +1 -0
- package/dist/cjs/animations.js +1 -1
- package/dist/cjs/helper-e7d4aad4.js +1 -0
- package/dist/cjs/hooks.js +1 -1
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/link-884ecbbe.js +1 -0
- package/dist/cjs/pop-759c5e79.js +1 -0
- package/dist/cjs/scroll-ad21fb35.js +1 -0
- package/dist/esm/animatable-c248ca70.js +1 -0
- package/dist/esm/animate.js +1 -1
- package/dist/esm/animation-264c4885.js +1 -0
- package/dist/esm/animations.js +1 -1
- package/dist/esm/helper-ef605e17.js +1 -0
- package/dist/esm/hooks.js +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/link-67981677.js +1 -0
- package/dist/esm/pop-7211ea3d.js +1 -0
- package/dist/esm/scroll-efaeb330.js +1 -0
- package/package.json +9 -3
- package/types/animatable.d.ts +79 -7
- package/types/animate/animate.d.ts +17 -11
- package/types/animations/animation.d.ts +9 -0
- package/types/animations/fade.d.ts +9 -0
- package/types/animations/move.d.ts +19 -0
- package/types/animations/pop.d.ts +9 -0
- package/types/animations/scale.d.ts +19 -0
- package/types/animations/wipe.d.ts +19 -0
- package/types/animations.d.ts +8 -0
- package/types/globals.d.ts +109 -0
- package/types/hooks/animation.d.ts +1 -0
- package/types/hooks/scroll.d.ts +1 -0
- package/types/hooks/unmount.d.ts +10 -0
- package/types/hooks.d.ts +5 -0
- package/types/morph.d.ts +2 -2
- package/dist/cjs/animatable-62e7223b.js +0 -1
- package/dist/cjs/animation-1595965d.js +0 -1
- package/dist/cjs/pop-592e65c5.js +0 -1
- package/dist/esm/animatable-54740b57.js +0 -1
- package/dist/esm/animation-7720f4a3.js +0 -1
- package/dist/esm/pop-dc41899a.js +0 -1
package/README.md
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|

|
|
7
7
|

|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
Feature complete, lightweight react animation library. Lively lets u create performant animations without the hassle.
|
|
10
10
|
|
|
11
11
|
## Table of contents
|
|
12
12
|
- [Get started](#get-started)
|
|
@@ -15,8 +15,10 @@ Lightweight, zero-configuration react animation library.
|
|
|
15
15
|
- [Base components](#base-components)
|
|
16
16
|
- [Animatable](#animatable-animatable)
|
|
17
17
|
- [Morph](#morph-morph)
|
|
18
|
+
- [Reactivity](#reactivity)
|
|
18
19
|
- [Auto-animation](#auto-animation)
|
|
19
20
|
- [Animate `<Animate />`](#animate-animate)
|
|
21
|
+
- [Parallax `<Parallax />`](#parallax-parallax)
|
|
20
22
|
- [`WriteOn <WriteOn />`](#writeon-writeon)
|
|
21
23
|
- [`ColorWipe <ColorWipe />`](#colorwipe-colorwipe)
|
|
22
24
|
- [Animations](#animations)
|
|
@@ -24,6 +26,8 @@ Lightweight, zero-configuration react animation library.
|
|
|
24
26
|
- [Create your own](#create-your-own)
|
|
25
27
|
- [Hooks](#hooks)
|
|
26
28
|
- [useUnmount](#useunmount)
|
|
29
|
+
- [useAnimation](#useanimation)
|
|
30
|
+
- [useScroll](#usescroll)
|
|
27
31
|
|
|
28
32
|
## Get started
|
|
29
33
|
|
|
@@ -42,7 +46,7 @@ import { Animate } from '@infinityfx/lively/animate';
|
|
|
42
46
|
|
|
43
47
|
<Animate onMount>
|
|
44
48
|
<div class="my-class">
|
|
45
|
-
Lorem ipsum enim amet consequat ut reprehenderit cupidatat et incididunt qui minim culpa. Dolor do laborum nulla pariatur tempor excepteur duis et ipsum.
|
|
49
|
+
Lorem ipsum enim amet consequat ut reprehenderit cupidatat et incididunt qui minim culpa. Dolor do laborum nulla pariatur tempor excepteur duis et ipsum.
|
|
46
50
|
</div>
|
|
47
51
|
</Animate>
|
|
48
52
|
```
|
|
@@ -88,11 +92,44 @@ import { Morph } from '@infinityfx/lively';
|
|
|
88
92
|
</Morph>
|
|
89
93
|
```
|
|
90
94
|
|
|
95
|
+
## Reactivity
|
|
96
|
+
|
|
97
|
+
Lively implements fully reactive animations using the [`useAnimation()`](#useanimation) and [`useScroll()`](#usescroll) hooks.
|
|
98
|
+
|
|
91
99
|
## Auto-animation
|
|
92
100
|
|
|
93
101
|
### Animate `<Animate />`
|
|
94
102
|
|
|
95
|
-
|
|
103
|
+
Fully automatic animation based on pre-fab animations.
|
|
104
|
+
|
|
105
|
+
```jsx
|
|
106
|
+
import { Animate } from '@infinityfx/lively/animate';
|
|
107
|
+
import { Scale, Fade } from '@infinityfx/lively/animations';
|
|
108
|
+
|
|
109
|
+
...
|
|
110
|
+
|
|
111
|
+
<Animate onMount animations={[Scale({ useLayout: true }), Fade]}>
|
|
112
|
+
<div class="my-class">
|
|
113
|
+
...
|
|
114
|
+
</div>
|
|
115
|
+
</Animate>
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
#### Parallax `<Parallax />`
|
|
119
|
+
|
|
120
|
+
Easily create parallax motion based on page scroll position.
|
|
121
|
+
|
|
122
|
+
```jsx
|
|
123
|
+
import { Parallax } from '@infinityfx/lively/animate';
|
|
124
|
+
|
|
125
|
+
...
|
|
126
|
+
|
|
127
|
+
<Parallax amount={0.5}> // default amount = 0.5
|
|
128
|
+
<div class="my-class">
|
|
129
|
+
...
|
|
130
|
+
</div>
|
|
131
|
+
</Parallax>
|
|
132
|
+
```
|
|
96
133
|
|
|
97
134
|
### WriteOn `<WriteOn />`
|
|
98
135
|
|
|
@@ -120,7 +157,7 @@ import { ColorWipe } from '@infinityfx/lively/animate';
|
|
|
120
157
|
|
|
121
158
|
### Overview
|
|
122
159
|
|
|
123
|
-
Lively exports a submodule called animations which contains various pre-fab animations that can be used in tandem with the `<Animate />`
|
|
160
|
+
Lively exports a submodule called animations which contains various pre-fab animations that can be used in tandem with the `<Animate />` and `<Animatable />` components. These animations can be used as is, or can be configured with extra options by calling the respective animation as a function which takes as an argument the options object.
|
|
124
161
|
|
|
125
162
|
```jsx
|
|
126
163
|
import { Move } from '@infinityfx/lively/animations';
|
|
@@ -158,27 +195,90 @@ import { Animatable } from '@infinityfx/lively';
|
|
|
158
195
|
|
|
159
196
|
### Create your own
|
|
160
197
|
|
|
161
|
-
If you whish to create your own pre-fab animation, you can do so
|
|
198
|
+
If you whish to create your own pre-fab animation, you can do so using the `.create()` method of the Animation class. This method takes a function which gets the animation configuration options passed as an argument. The function must return the animation properties/keyframes.
|
|
162
199
|
|
|
163
200
|
```js
|
|
164
|
-
import { Animation } from '@infinityfx/lively';
|
|
201
|
+
import { Animation } from '@infinityfx/lively/animations';
|
|
165
202
|
|
|
166
|
-
|
|
167
|
-
myAnimation.use = myAnimation.use.bind(myAnimation, options);
|
|
168
|
-
return myAnimation;
|
|
169
|
-
}
|
|
203
|
+
const myCustomAnimation = Animation.create((options) => {
|
|
170
204
|
|
|
171
|
-
|
|
205
|
+
// do whatever you want here.
|
|
172
206
|
|
|
173
|
-
//
|
|
207
|
+
// This function must return an Array with 2 Objects, containing the animation properties and/or keyframes and the initial values for the animation respectively.
|
|
208
|
+
return [{ ... }, { ... }];
|
|
209
|
+
});
|
|
174
210
|
|
|
175
|
-
|
|
176
|
-
return new Animation({ ... }, { ... });
|
|
177
|
-
}
|
|
211
|
+
export default myCustomAnimation;
|
|
178
212
|
```
|
|
179
213
|
|
|
180
214
|
## Hooks
|
|
181
215
|
|
|
216
|
+
Lively comes with a set of hooks that allow for the creation of complex reactive animations.
|
|
217
|
+
|
|
182
218
|
### useUnmount
|
|
183
219
|
|
|
184
|
-
The useUnmount hook can be used to animate components that are being unmounted.
|
|
220
|
+
The useUnmount hook can be used to animate out components that are being unmounted. It can be used in tandem with the `<Animatable />` and `<Animate />` components.
|
|
221
|
+
|
|
222
|
+
```jsx
|
|
223
|
+
import { useUnmount } from '@infinityfx/lively/hooks';
|
|
224
|
+
import { Animatable } from '@infinityfx/lively';
|
|
225
|
+
|
|
226
|
+
export default function Page() {
|
|
227
|
+
|
|
228
|
+
const [mounted, setMounted, ref] = useUnmount(true /* initial mounted value */);
|
|
229
|
+
|
|
230
|
+
return mounted &&
|
|
231
|
+
<Animatable ref={ref} onMount onUnmount>...</Animatable>;
|
|
232
|
+
|
|
233
|
+
}
|
|
234
|
+
```
|
|
235
|
+
|
|
236
|
+
### useAnimation
|
|
237
|
+
|
|
238
|
+
The useAnimation hook can be used to create a reactive value, which can be linked to animation components to animate different properties based on the value.
|
|
239
|
+
|
|
240
|
+
```jsx
|
|
241
|
+
import { useEffect } from 'react';
|
|
242
|
+
import { useAnimation } from '@infinityfx/lively/hooks';
|
|
243
|
+
import { Animatable } from '@infinityfx/lively';
|
|
244
|
+
|
|
245
|
+
export default function Page() {
|
|
246
|
+
|
|
247
|
+
const [value, setValue] = useAnimation(0 /* initial value */);
|
|
248
|
+
|
|
249
|
+
useEffect(() => {
|
|
250
|
+
setTimeout(() => setValue(1), 1000); // set the animation value to 1, 1 second after the component has mounted.
|
|
251
|
+
}, []);
|
|
252
|
+
|
|
253
|
+
return <Animatable animate={{
|
|
254
|
+
opacity: value
|
|
255
|
+
}}>...</Animatable>;
|
|
256
|
+
|
|
257
|
+
}
|
|
258
|
+
```
|
|
259
|
+
|
|
260
|
+
Additionally you can provide an animation value with a function to transform the value to a more usable format for certain animation properties.
|
|
261
|
+
|
|
262
|
+
```jsx
|
|
263
|
+
const [value, setValue] = useAnimation(0 /* initial value */);
|
|
264
|
+
|
|
265
|
+
return <Animatable animate={{
|
|
266
|
+
position: value(input => {
|
|
267
|
+
input /= 100; // example where the input value needs to be divided for the correct output format.
|
|
268
|
+
|
|
269
|
+
return { x: input, y: input }; // we return an object instead of a number for the position property.
|
|
270
|
+
})
|
|
271
|
+
}}>...</Animatable>;
|
|
272
|
+
```
|
|
273
|
+
|
|
274
|
+
### useScroll
|
|
275
|
+
|
|
276
|
+
The useScroll hook is an extension of the useAnimation hook which returns a reactive value that gives the current scroll position of the window.
|
|
277
|
+
|
|
278
|
+
```jsx
|
|
279
|
+
const value = useScroll();
|
|
280
|
+
|
|
281
|
+
return <Animatable animate={{
|
|
282
|
+
opacity: value(val => val / document.body.scrollHeight) // gradually fade in element when scrolling the window
|
|
283
|
+
}}>...</Animatable>;
|
|
284
|
+
```
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";var e=require("@babel/runtime/helpers/typeof"),t=require("@babel/runtime/helpers/slicedToArray"),r=require("@babel/runtime/helpers/asyncToGenerator"),n=require("@babel/runtime/helpers/classCallCheck"),i=require("@babel/runtime/helpers/createClass"),a=require("@babel/runtime/helpers/inherits"),o=require("@babel/runtime/helpers/possibleConstructorReturn"),s=require("@babel/runtime/helpers/getPrototypeOf"),l=require("@babel/runtime/helpers/defineProperty"),u=require("@babel/runtime/regenerator"),p=require("react"),c=require("./animation-80770446.js"),h=require("./link-884ecbbe.js"),f=require("./helper-e7d4aad4.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var v=d(e),y=d(t),m=d(r),w=d(n),b=d(i),g=d(a),k=d(o),L=d(s),x=d(l),E=d(u);function A(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function j(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?A(Object(r),!0).forEach((function(t){x.default(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):A(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function C(e,t){var r="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!r){if(Array.isArray(e)||(r=function(e,t){if(!e)return;if("string"==typeof e)return O(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return O(e,t)}(e))||t&&e&&"number"==typeof e.length){r&&(e=r);var n=0,i=function(){};return{s:i,n:function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}},e:function(e){throw e},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var a,o=!0,s=!1;return{s:function(){r=r.call(e)},n:function(){var e=r.next();return o=e.done,e},e:function(e){s=!0,a=e},f:function(){try{o||null==r.return||r.return()}finally{if(s)throw a}}}}function O(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function V(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,n=L.default(e);if(t){var i=L.default(this).constructor;r=Reflect.construct(n,arguments,i)}else r=n.apply(this,arguments);return k.default(this,r)}}var D=function(e){g.default(k,e);var t,r,n,i,a,o,s,l,u,d=V(k);function k(e){var t;w.default(this,k),(t=d.call(this,e)).hover=!1,t.hasFocus=!1,t.inView=!1,t.scrollDelta=0,t.viewportMargin=e.viewportMargin;var r=t.props.animate||{},n=r.duration,i=r.interpolate,a=r.origin,o=r.useLayout;for(var s in t.links={duration:n,interpolate:i,origin:a,useLayout:o},t.animations={default:t.parse(t.props.animate)},t.props.animations)t.animations[s]=t.parse(t.props.animations[s]);return t.links=new c.Keyframe(t.links),t.elements=[],t.children=[],t.level=0,t}return b.default(k,[{key:"parse",value:function(e){if(c.Animation.isAnimation(e))return e.use();if(!f.isObject(e))return null;var t={};for(var r in e){var n=e[r];h.Link.isLink(n)?this.links[r]=n.link(this.style.bind(this)):t[r]=n}return new c.AnimationClip(t,this.props.initial)}},{key:"style",value:function(){var e=this;cancelAnimationFrame(this.frame),this.frame=requestAnimationFrame((function(){var t,r=C(e.elements);try{for(r.s();!(t=r.n()).done;){var n=t.value;e.links.update(n)}}catch(e){r.e(e)}finally{r.f()}}))}},{key:"update",value:function(){var e,t=C(this.elements);try{for(t.s();!(e=t.n()).done;){var r=e.value;f.cacheElementStyles(r),this.animations.default.restore(r,!0),this.links.update(r)}}catch(e){t.e(e)}finally{t.f()}}},{key:"componentDidMount",value:function(){var e=this,t=this.props.parentLevel<1||this.props.noCascade;this.resizeEventListener=this.onResize.bind(this),f.addEventListener("resize",this.resizeEventListener),t&&(this.scrollEventListener=this.onScroll.bind(this),f.addEventListener("scroll",this.scrollEventListener)),this.update(),m.default(E.default.mark((function r(){return E.default.wrap((function(r){for(;;)switch(r.prev=r.next){case 0:if(!("fonts"in document)){r.next=4;break}return r.next=3,document.fonts.ready;case 3:e.update({mount:!0});case 4:t&&(e.props.onMount&&e.play(e.props.onMount,{staggerDelay:.001,immediate:!0}),c.AnimationQueue.delay((function(){return e.onScroll()}),.001));case 5:case"end":return r.stop()}}),r)})))()}},{key:"componentDidUpdate",value:(u=m.default(E.default.mark((function e(){return E.default.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:this.update();case 1:case"end":return e.stop()}}),e,this)}))),function(){return u.apply(this,arguments)})},{key:"componentWillUnmount",value:function(){f.removeEventListener("scroll",this.scrollEventListener),f.removeEventListener("resize",this.resizeEventListener)}},{key:"inViewport",value:function(){var e,t=!0,r=!0,n=C(this.elements);try{for(n.s();!(e=n.n()).done;){var i=e.value,a=i.getBoundingClientRect().y;t=t&&a+i.clientHeight*this.viewportMargin<window.innerHeight,r=r&&a>window.innerHeight+i.clientHeight*(1-this.viewportMargin)}}catch(e){n.e(e)}finally{n.f()}if(!this.elements.length){var o,s=C(this.children);try{for(s.s();!(o=s.n()).done;){var l=o.value.animatable.inViewport(),u=y.default(l,2),p=u[0],c=u[1];t=t&&p,r=r&&c}}catch(e){s.e(e)}finally{s.f()}}return[t,r]}},{key:"onScroll",value:(l=m.default(E.default.mark((function e(){var t,r,n,i,a,o,s,l;return E.default.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(this.props.whileViewport&&!(Date.now()-this.scrollDelta<350)){e.next=2;break}return e.abrupt("return");case 2:this.scrollDelta=Date.now(),t=this.inViewport(),r=y.default(t,2),n=r[0],i=r[1],!this.inView&&n&&(this.inView=!0,this.props.whileViewport&&this.play(this.props.whileViewport),null===(a=(o=this.props).onEnterViewport)||void 0===a||a.call(o)),this.inView&&i&&(this.inView=!1,this.props.whileViewport&&this.play(this.props.whileViewport,{reverse:!0,immediate:!0}),null===(s=(l=this.props).onLeaveViewport)||void 0===s||s.call(l));case 6:case"end":return e.stop()}}),e,this)}))),function(){return l.apply(this,arguments)})},{key:"onResize",value:(s=m.default(E.default.mark((function e(){var t;return E.default.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:null!==(t=this.nextResize)&&void 0!==t&&t.cancel&&this.nextResize.cancel(),this.nextResize=c.AnimationQueue.delay(this.update.bind(this,{mount:!0}),.25);case 2:case"end":return e.stop()}}),e,this)}))),function(){return s.apply(this,arguments)})},{key:"onEnter",value:(o=m.default(E.default.mark((function e(t){var r,n=arguments;return E.default.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:r=n.length>1&&void 0!==n[1]&&n[1],this.hover||(this.props.whileHover&&this.play(this.props.whileHover),this.hover=!0),r&&r(t);case 3:case"end":return e.stop()}}),e,this)}))),function(e){return o.apply(this,arguments)})},{key:"onLeave",value:(a=m.default(E.default.mark((function e(t){var r,n=arguments;return E.default.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:r=n.length>1&&void 0!==n[1]&&n[1],this.hover&&(this.props.whileHover&&this.play(this.props.whileHover,{reverse:!0}),this.hover=!1),r&&r(t);case 3:case"end":return e.stop()}}),e,this)}))),function(e){return a.apply(this,arguments)})},{key:"onFocus",value:(i=m.default(E.default.mark((function e(t){var r,n=arguments;return E.default.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:r=n.length>1&&void 0!==n[1]&&n[1],this.hasFocus||(this.props.whileFocus&&this.play(this.props.whileFocus),this.hasFocus=!0),r&&r(t);case 3:case"end":return e.stop()}}),e,this)}))),function(e){return i.apply(this,arguments)})},{key:"onBlur",value:(n=m.default(E.default.mark((function e(t){var r,n=arguments;return E.default.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:r=n.length>1&&void 0!==n[1]&&n[1],this.hasFocus&&(this.props.whileFocus&&this.play(this.props.whileFocus,{reverse:!0}),this.hasFocus=!1),r&&r(t);case 3:case"end":return e.stop()}}),e,this)}))),function(e){return n.apply(this,arguments)})},{key:"onClick",value:(r=m.default(E.default.mark((function e(t){var r,n=arguments;return E.default.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:r=n.length>1&&void 0!==n[1]&&n[1],this.props.onClick&&this.play(this.props.onClick),r&&r(t);case 3:case"end":return e.stop()}}),e,this)}))),function(e){return r.apply(this,arguments)})},{key:"play",value:(t=m.default(E.default.mark((function e(t){var r,n,i,a,o,s,l,u,p,h,f,d,v,y,m,w,b,g,k,L,x,A,j,O,V,D,q=this,F=arguments;return E.default.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(i=F.length>1&&void 0!==F[1]?F[1]:{},a=i.callback,o=i.reverse,s=void 0!==o&&o,l=i.immediate,u=void 0!==l&&l,p=i.cascade,h=void 0!==p&&p,f=i.groupAdjust,d=void 0===f?0:f,v=i.cascadeDelay,y=void 0===v?0:v,m=i.staggerDelay,w=void 0===m?0:m,!(this.props.parentLevel>0)||h){e.next=3;break}return e.abrupt("return");case 3:if(b="string"==typeof t?this.animations[t]:this.animations.default){e.next=6;break}return e.abrupt("return");case 6:for(null===(r=(n=this.props).onAnimationStart)||void 0===r||r.call(n),g=0,k=0;k<this.elements.length;k++)L="group"in this.props?this.props.parentLevel-this.props.group:this.level+d,x=s?L*b.duration:(this.props.parentLevel-L)*y,x=this.props.stagger*k+x+w,g=Math.max(x,g),b.play(this.elements[k],{delay:x,reverse:s,immediate:u});A=C(this.children);try{for(A.s();!(j=A.n()).done;)O=j.value,V=O.animatable,D=O.staggerIndex,V.play(t,{reverse:s,immediate:u,cascade:!0,staggerDelay:D<0?0:this.props.stagger*D,cascadeDelay:b.duration,groupAdjust:D<0?0:1})}catch(e){A.e(e)}finally{A.f()}c.AnimationQueue.delay((function(){var e,t;null==a||a(),null===(e=(t=q.props).onAnimationEnd)||void 0===e||e.call(t)}),g+b.duration);case 13:case"end":return e.stop()}}),e,this)}))),function(e){return t.apply(this,arguments)})},{key:"mergeProperties",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=j(j({},t),e);for(var n in r)["children","parentLevel","ref"].includes(n)?delete r[n]:Array.isArray(e[n])||Array.isArray(t[n])||"object"===v.default(e[n])&&"object"===v.default(t[n])&&(r[n]=j(j({},t[n]),e[n]));return r}},{key:"deepClone",value:function(e){var t,r=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=n.index,a=void 0===i?0:i,o=n.useElements,s=void 0!==o&&o,l=n.useEvents,u=void 0===l||l;if(!p.isValidElement(e))return e;var c={pathLength:1};if(e.type===k||e.type.prototype instanceof k||(s&&(c=j(j({},c),{},{ref:function(e){return r.elements[a]=e}})),u&&(this.props.parentLevel<1||this.props.noCascade)&&(c=j(j({},c),{},{onMouseEnter:function(t){var n;return r.onEnter(t,null===(n=e.props)||void 0===n?void 0:n.onMouseEnter)},onMouseLeave:function(t){var n;return r.onLeave(t,null===(n=e.props)||void 0===n?void 0:n.onMouseLeave)},onFocus:function(t){var n;return r.onFocus(t,null===(n=e.props)||void 0===n?void 0:n.onFocus)},onBlur:function(t){var n;return r.onBlur(t,null===(n=e.props)||void 0===n?void 0:n.onBlur)},onClick:function(t){var n;return r.onClick(t,null===(n=e.props)||void 0===n?void 0:n.onClick)}}),u=!1)),(e.type===k||e.type.prototype instanceof k)&&(null===(t=e.props)||void 0===t||!t.noCascade)){var h=this.childrenIndex++;c=j(j(j({},c),this.mergeProperties(e.props,this.props)),{},{parentLevel:this.parentLevel>0?this.parentLevel:this.level,ref:function(e){return r.children[h]={animatable:e,staggerIndex:s?a:-1}}})}var f=p.Children.map(e.props.children,(function(e,t){return r.deepClone(e,{index:t,useEvents:u})}));return p.cloneElement(e,c,f)}},{key:"countNestedLevels",value:function(e){var t=this;if(!e)return 0;var r=0,n=0;return p.Children.forEach(e,(function(e){var i;if(p.isValidElement(e)){(e.type===k||e.type.prototype instanceof k)&&(r=1);var a=t.countNestedLevels(null===(i=e.props)||void 0===i?void 0:i.children);n=n<a?a:n}})),n+r}},{key:"render",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.props.children;return this.level=this.countNestedLevels(t),this.childrenIndex=0,p.Children.map(t,(function(t,r){return e.deepClone(t,{index:r,useElements:!0})}))}}]),k}(p.Component);x.default(D,"defaultProps",{parentLevel:0,stagger:.1,viewportMargin:.75,animate:{},animations:{}}),exports.Animatable=D;
|
package/dist/cjs/animate.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@babel/runtime/helpers/objectWithoutProperties"),r=require("@babel/runtime/helpers/classCallCheck"),n=require("@babel/runtime/helpers/createClass"),i=require("@babel/runtime/helpers/inherits"),a=require("@babel/runtime/helpers/possibleConstructorReturn"),l=require("@babel/runtime/helpers/getPrototypeOf"),o=require("@babel/runtime/helpers/defineProperty"),u=require("react"),s=require("./animatable-
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@babel/runtime/helpers/objectWithoutProperties"),r=require("@babel/runtime/helpers/classCallCheck"),n=require("@babel/runtime/helpers/createClass"),i=require("@babel/runtime/helpers/inherits"),a=require("@babel/runtime/helpers/possibleConstructorReturn"),l=require("@babel/runtime/helpers/getPrototypeOf"),o=require("@babel/runtime/helpers/defineProperty"),u=require("react"),s=require("./animatable-3481c274.js"),c=require("./pop-759c5e79.js"),p=require("./helper-e7d4aad4.js"),f=require("@babel/runtime/helpers/toConsumableArray"),d=require("./scroll-ad21fb35.js");function m(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("@babel/runtime/helpers/typeof"),require("@babel/runtime/helpers/slicedToArray"),require("@babel/runtime/helpers/asyncToGenerator"),require("@babel/runtime/regenerator"),require("./animation-80770446.js"),require("./link-884ecbbe.js");var b=m(e),h=m(t),y=m(r),v=m(n),g=m(i),O=m(a),j=m(l),q=m(o),P=m(u),w=m(f),A=["levels","animations"];function k(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function E(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?k(Object(r),!0).forEach((function(t){q.default(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):k(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function C(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,n=j.default(e);if(t){var i=j.default(this).constructor;r=Reflect.construct(n,arguments,i)}else r=n.apply(this,arguments);return O.default(this,r)}}var x=function(e){g.default(r,e);var t=C(r);function r(e){var n;return y.default(this,r),(n=t.call(this,e)).levels=n.props.levels,n.animations=p.padArray(n.props.animations,n.levels),n}return v.default(r,[{key:"makeAnimatable",value:function(e){var t=this,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;if(r<1||u.Children.count(e)<1)return e;var n=this.props;n.levels,n.animations;var i=h.default(n,A),a=this.animations[this.levels-r];return r===this.levels&&(i.ref=function(e){return t.animatable=e}),P.default.createElement(s.Animatable,b.default({animate:a},i),u.Children.map(e,(function(e){return u.isValidElement(e)?u.cloneElement(e,{},t.makeAnimatable(e.props.children,r-1)):e})))}},{key:"play",value:function(e){var t,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};null===(t=this.animatable)||void 0===t||t.play(e,E({},r))}},{key:"render",value:function(){return this.makeAnimatable(this.props.children,this.levels)}}]),r}(u.Component);function R(e){var t=e.children,r=e.className,n=e.style,i=e.duration;if("string"!=typeof t)return t;var a=t.split("");return P.default.createElement("div",{className:r,style:n},P.default.createElement(s.Animatable,{whileViewport:!0,animate:{opacity:1,position:{y:0},rotation:0,duration:.8},initial:{opacity:0,position:{y:"100%"},rotation:10},stagger:(i-.8)/(a.length-1)},a.map((function(e,t){return P.default.createElement("span",{style:{display:"inline-block"},key:t},/\s/.test(e)?" ":e)}))))}function D(e){var t,r=e.children,n=e.color,i=e.duration,a=(null===(t=r.props)||void 0===t?void 0:t.children)||[];Array.isArray(a)||(a=[a]);var l=[P.default.createElement(s.Animatable,{key:0,initial:{clip:{right:0}},animate:{clip:{left:1},duration:i/2}},P.default.createElement("div",{style:{position:"absolute",inset:0,backgroundColor:n}}))].concat(w.default(a));return P.default.createElement(s.Animatable,{whileViewport:!0,animate:{clip:{right:0},duration:i/2},initial:{clip:{right:1}}},u.cloneElement(r,{},l))}function M(e){var t,r=e.children,n=e.amount,i=d.useScroll(),a=u.useRef();return P.default.createElement(s.Animatable,{ref:a,animate:{position:i((function(e){if(void 0===t){var r,i=null===(r=a.current)||void 0===r?void 0:r.elements[0];i&&(t=Math.max(i.getBoundingClientRect().y+window.scrollY-window.innerHeight/2,0))}return{x:0,y:(e-(t||0))*n}}))}},r)}q.default(x,"defaultProps",{levels:1,stagger:.1,viewportMargin:.25,animations:[c.Move,c.Pop]}),R.defaultProps={style:{},className:"",duration:1.6},D.defaultProps={color:"grey",duration:1.6},M.defaultProps={amount:.5},exports.Animate=x,exports.ColorWipe=D,exports.Parallax=M,exports.WriteOn=R;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";var t=require("@babel/runtime/helpers/slicedToArray"),e=require("@babel/runtime/helpers/objectWithoutProperties"),i=require("@babel/runtime/helpers/classCallCheck"),n=require("@babel/runtime/helpers/createClass"),r=require("./helper-e7d4aad4.js"),a=require("@babel/runtime/helpers/asyncToGenerator"),o=require("@babel/runtime/regenerator");function s(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var u=s(t),l=s(e),c=s(i),h=s(n),d=s(a),f=s(o),v={opacity:1,scale:{x:1,y:1},position:{x:0,y:0},rotation:0,clip:{left:0,top:0,right:0,bottom:0},borderRadius:0,padding:0,fontSize:"1rem",backgroundColor:{r:127,g:127,b:127,a:255},color:{r:127,g:127,b:127,a:255},active:!0,interact:!0,zIndex:0,strokeLength:1},y=["opacity","active","zIndex","lineHeight","fontWeight"];function p(t,e){var i="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!i){if(Array.isArray(t)||(i=function(t,e){if(!t)return;if("string"==typeof t)return g(t,e);var i=Object.prototype.toString.call(t).slice(8,-1);"Object"===i&&t.constructor&&(i=t.constructor.name);if("Map"===i||"Set"===i)return Array.from(t);if("Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i))return g(t,e)}(t))||e&&t&&"number"==typeof t.length){i&&(t=i);var n=0,r=function(){};return{s:r,n:function(){return n>=t.length?{done:!0}:{done:!1,value:t[n++]}},e:function(t){throw t},f:r}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var a,o=!0,s=!1;return{s:function(){i=i.call(t)},n:function(){var t=i.next();return o=t.done,t},e:function(t){s=!0,a=t},f:function(){try{o||null==i.return||i.return()}finally{if(s)throw a}}}}function g(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,n=new Array(e);i<e;i++)n[i]=t[i];return n}var m=function(t){var e=t.match(/^#([\da-f]{1,2})([\da-f]{1,2})([\da-f]{1,2})([\da-f]{2})?/i),i=u.default(e,5);i[0];var n=i[1],r=i[2],a=i[3],o=i[4];return{r:parseInt(n.padStart(2,n),16),g:parseInt(r.padStart(2,r),16),b:parseInt(a.padStart(2,a),16),a:void 0!==o?parseInt(o,16):255}},b=function(t){var e=t.match(/^rgba?\((\d+)\D+(\d+)\D+(\d+)\D*(\d+)?\)/i),i=u.default(e,5);i[0];var n=i[1],r=i[2],a=i[3],o=i[4];return{r:parseInt(n),g:parseInt(r),b:parseInt(a),a:void 0!==o?parseInt(o):255}},k=function(t){var e=.5,i=.5;if(r.isObject(t))e=t.x,i=t.y;else if("string"==typeof t)switch(t){case"left":e=0;break;case"right":e=1;break;case"top":i=0;break;case"bottom":i=1}else e=i=t;return"".concat(100*e,"% ").concat(100*i,"%")},x=function t(e,i){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if("string"==typeof i){if(i.match(/^#[0-9a-f]{3,8}$/i))return m(i);if(i.match(/^rgba?\(.*\)$/i))return b(i);var a=(i.match(/[^0-9\.]*$/i)||["px"])[0];return i=parseFloat(i),isNaN(i)?v[e]:("%"===a&&(i/=100),a?[i,a]:i)}if(r.isObject(i)){var o=Object.keys(i),s=i;("x"in i||"y"in i)&&(o=["x","y"]),("r"in i||"g"in i||"b"in i||"a"in i)&&(o=["r","g","b","a"]),("left"in i||"right"in i||"top"in i||"bottom"in i)&&(o=["left","right","top","bottom"]),i={};var u,l=p(o);try{for(l.s();!(u=l.n()).done;){var c=u.value;i[c]=t(e,s[c],c)}}catch(t){l.e(t)}finally{l.f()}}if(void 0!==i)return i;var h=v[e];return n in h?h[n]:h},L=function(t,e){return Array.isArray(t)&&(e=t[1],t=t[0]),t*("%"===e?100:1)+e},A=function(t){return Array.isArray(t)&&(t="px"===t[1]?t[0]+"px":t[0]),t},q=function t(e,i,n){if(r.isObject(e)){var a={};for(var o in e)a[o]=t(e[o],r.isObject(i)?i[o]:i,n);return a}var s;if(Array.isArray(e)&&(s=e[1],e=e[0]),Array.isArray(i)&&(s=i[1],i=i[0]),"number"!=typeof e||"number"!=typeof i)return n>.5?i:e;var u=e*(1-n)+i*n;return s?[u,s]:u},w=function(t,e,i){if(t.length===i)return t[e];var n=e*((t.length-1)/(i-1)),r=Math.floor(n);return r===t.length-1?t[r]:q(t[r],t[r+1],n-r)},S=function(){function t(){c.default(this,t),this.queue=[],this.tick()}var e;return h.default(t,[{key:"uuid",value:function(){return Math.floor(1e6*Math.random()).toString(16).padStart("0",6)}},{key:"tick",value:(e=d.default(f.default.mark((function t(){var e,i,n;return f.default.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:e=Date.now(),i=0;case 2:if(!(i<this.queue.length+1)){t.next=13;break}if(n=this.queue[i],!(this.queue.length===i||n.timestamp>e)){t.next=7;break}return this.queue.splice(0,i),t.abrupt("break",13);case 7:n.callback(),delete n.cancel,delete n.store[n.id+n.timestamp];case 10:i++,t.next=2;break;case 13:requestAnimationFrame(this.tick.bind(this));case 14:case"end":return t.stop()}}),t,this)}))),function(){return e.apply(this,arguments)})},{key:"search",value:function(t){for(var e,i,n=0,r=this.queue.length-1;n<=r;)if(e=n+r>>>1,(i=this.queue[e].timestamp-t.timestamp)<0)n=e+1;else{if(!(i>0))return e;r=e-1}return n}},{key:"insert",value:function(t){var e=this.search(t);this.queue.splice(e,0,t)}},{key:"cancel",value:function(t){for(var e=this.search(t);e>0&&this.queue[e].timestamp>=t.timestamp;)e--;for(;e<this.queue.length&&this.queue[e].timestamp<=t.timestamp;){if(this.queue[e].id===t.id){this.queue.splice(e,1);break}e++}delete t.cancel}},{key:"delay",value:function(t,e){var i=this,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(t instanceof Function){var r={timestamp:Date.now()+1e3*e,id:this.uuid(),cancel:function(){return i.cancel(r)},callback:t,store:n};return this.insert(r),n[r.id+r.timestamp]=r,r}}}],[{key:"get",value:function(){return r.livelyProperty("AnimationQueue",new t),window.Lively.AnimationQueue}},{key:"cancelAll",value:function(t){for(var e in t)t[e].cancel(),delete t[e]}},{key:"delay",value:function(t,e,i){return this.get().delay(t,e,i)}},{key:"sleep",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;return new Promise((function(i){t.delay(i,e)}))}}]),t}(),I=["duration","interpolate","origin","useLayout"],j=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=e.duration,n=void 0===i?0:i,r=e.interpolate,a=void 0===r?"ease":r,o=e.origin,s=void 0===o?{x:.5,y:.5}:o,u=e.useLayout,h=void 0!==u&&u,d=l.default(e,I);c.default(this,t),this.style=d,this.start={},this.end={},this.duration=n,this.interpolate="spring"===a?"cubic-bezier(0.65, 0.34, 0.7, 1.42)":a,this.origin=k(s),this.useLayout=h}return h.default(t,[{key:"addProperty",value:function(t,e){if(!r.isObject(e)||!("start"in e||"end"in e||"set"in e))return this.style[t]=e;"start"in e&&(this.start[t]=e.start),"end"in e&&(this.end[t]=e.end),"set"in e&&(this.style[t]=e.set)}},{key:"compile",value:function(){return this.style=this.interpret(this.style),this.start=this.interpret(this.start),this.end=this.interpret(this.end),this}},{key:"interpret",value:function(t){if(!Object.keys(t).length)return null;var e={transform:""};for(var i in t){var n=t[i];if(n instanceof Function){if(null===(n=n()))continue;n=x(i,n)}switch(i){case"position":e.transform+="translate(".concat(L(n.x,"px"),", ").concat(L(n.y,"px"),") ");break;case"scale":if("number"==typeof n&&(n={x:n,y:n}),this.useLayout){e.width=A(n.x),e.height=A(n.y);break}e.transform+="scale(".concat(L(n.x,"%"),", ").concat(L(n.y,"%"),") ");break;case"rotation":e.transform+="rotate(".concat(L(n,"deg"),") ");break;case"clip":e.clipPath="inset(".concat(L(n.top,"%")," ").concat(L(n.right,"%")," ").concat(L(n.bottom,"%")," ").concat(L(n.left,"%"),")"),e.webkitClipPath=e.clipPath;break;case"interact":e.pointerEvents=n?"all":"none";break;case"active":e.display=n?"":"none";break;case"strokeLength":e.strokeDashoffset=1-n;break;default:r.isObject(n)&&"r"in n?e[i]="rgba(".concat(n.r,", ").concat(n.g,", ").concat(n.b,", ").concat(n.a,")"):y.includes(i)?e[i]=n:e[i]=L(n,"px")}}return e}},{key:"initial",value:function(t){t.style.transitionTimingFunction=this.interpolate,t.style.transformOrigin=this.origin,this.apply(t,{duration:0})}},{key:"apply",value:function(e){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=i.duration,r=void 0===n?this.duration:n,a=i.reverse,o=void 0!==a&&a,s=t.setStyle.bind(t,e,this.style,r);this[o?"end":"start"]?(t.setStyle(e,this[o?"end":"start"],0),S.delay(s,.001)):s(),this[o?"start":"end"]&&S.delay(t.setStyle.bind(t,e,this[o?"start":"end"],0),r,e.Lively.timeouts)}},{key:"update",value:function(e){e.style.transitionTimingFunction=this.interpolate,e.style.transformOrigin=this.origin;var i=this.interpret(this.style);i&&t.setStyle(e,i,this.duration)}}],[{key:"setStyle",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0;for(var n in t.style.transitionDuration="".concat(i,"s"),e)"width"!==n?"height"!==n?"padding"===n&&(e.width||e.height)||"start"===n||"end"===n||(t.style[n]=e[n]):this.setLength(t,e,"height","paddingTop","paddingBottom"):this.setLength(t,e,"width","paddingLeft","paddingRight")}},{key:"setLength",value:function(t,e,i,n,r){var a=t.Lively.initials[i],o=parseInt(t.Lively.initials[n]),s=parseInt(t.Lively.initials[r]),u=e[i],l=e.padding?1:o/(0===s?1e-6:s);"string"==typeof u&&(u="calc(".concat(u," / ").concat(a,")"));var c=e.padding?e.padding:o+s+"px";t.style[i]="max(calc(".concat(a," * ").concat(u," - ").concat("border-box"!==t.style.boxSizing?"0px":c,"), 0px)");var h="calc(min(calc(".concat(a," * ").concat(u,"), ").concat(c,") * ");t.style[n]=h+.5*l,t.style[r]=h+1/(0===l?1e-6:l)*.5}}]),t}(),O=["delay","duration","repeat","alternate"],F=["interpolate","origin","useLayout"],P=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=e.delay,n=void 0===i?0:i,r=e.duration,a=void 0===r?1:r,o=e.repeat,s=void 0===o?1:o,u=e.alternate,h=void 0!==u&&u,d=l.default(e,O),f=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};c.default(this,t),this.length=0,this.delay=n,this.duration=a,this.repeat=s,this.alternate=h,this.keyframes=this.parse(d,f)}return h.default(t,[{key:"initial",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:this.keyframes[0];e&&e.initial(t)}},{key:"restore",value:function(t){var e,i,n=arguments.length>1&&void 0!==arguments[1]&&arguments[1];(n||null!==(e=t.Lively)&&void 0!==e&&e.keyframe)&&this.initial(t,null===(i=t.Lively)||void 0===i?void 0:i.keyframe)}},{key:"parse",value:function(t,e){var i=this,n=t.interpolate,r=t.origin,a=t.useLayout,o=l.default(t,F),s=function(t){Array.isArray(o[t])||(o[t]=[o[t]]),o[t].length<2&&o[t].unshift(t in e?e[t]:v[t]),o[t]=o[t].map((function(e){return x(t,e)})),i.length=Math.max(o[t].length,i.length)};for(var u in o)s(u);return new Array(this.length).fill(0).map((function(t,e){var s=new j({interpolate:n,origin:r,useLayout:a,duration:i.duration/(i.length-1)});for(var u in o)s.addProperty(u,w(o[u],e,i.length));return s.compile()}))}},{key:"start",value:function(t){var e=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=i.immediate,r=void 0!==n&&n,a=i.reverse,o=void 0!==a&&a,s=i.repeat,u=void 0===s?this.repeat:s;!t.Lively.animating||r?(this.initial(t,o?this.keyframes[this.length-1]:this.keyframes[0]),t.Lively.index=1,t.Lively.animating=!0,requestAnimationFrame((function(){return e.getNext(t,o,u)}))):t.Lively.queue.push([this,{reverse:o,repeat:u}])}},{key:"play",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=e.delay,n=void 0===i?0:i,r=e.immediate,a=void 0!==r&&r,o=e.reverse,s=void 0!==o&&o;if(t.style&&this.length){a&&(t.Lively.queue=[],S.cancelAll(t.Lively.timeouts));var u=this.start.bind(this,t,{immediate:a,reverse:s});this.delay||n?S.delay(u,this.delay+n,t.Lively.timeouts):u()}}},{key:"getNext",value:function(t){var e=this,i=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1;if(t.Lively.index===this.length){t.Lively.animating=!1;var r=t.Lively.queue.shift()||[],a=u.default(r,2),o=a[0],s=a[1];return o?o.start(t,s):void(n>1&&this.start(t,{reverse:this.alternate?!i:i,repeat:n-1}))}var l=t.Lively.index;i&&(l=this.length-1-l),this.keyframes[l].apply(t,{reverse:i}),t.Lively.keyframe=this.keyframes[l],t.Lively.index++,S.delay((function(){return e.getNext(t,i,n)}),this.duration/(this.length-1),t.Lively.timeouts)}}]),t}(),C={create:function(t){var e=function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return t.use=t.use.bind(t,e),t};return e.use=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=t(e),n=u.default(i,2),r=n[0],a=n[1];return new P(r,a)},e},isAnimation:function(t){return t instanceof Function&&"use"in t}};exports.Animation=C,exports.AnimationClip=P,exports.AnimationQueue=S,exports.Keyframe=j;
|
package/dist/cjs/animations.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/defineProperty"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./animation-80770446.js"),r=require("@babel/runtime/helpers/defineProperty"),t=require("./pop-759c5e79.js"),n=require("@babel/runtime/helpers/objectWithoutProperties");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("@babel/runtime/helpers/slicedToArray"),require("@babel/runtime/helpers/classCallCheck"),require("@babel/runtime/helpers/createClass"),require("./helper-e7d4aad4.js"),require("@babel/runtime/helpers/typeof"),require("@babel/runtime/helpers/asyncToGenerator"),require("@babel/runtime/regenerator");var i=o(r),c=o(n);function a(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function u(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?a(Object(t),!0).forEach((function(r){i.default(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):a(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}var p=e.Animation.create((function(e){return[u({opacity:1,duration:.65},e),{opacity:0}]})),s=["direction"];function b(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function l(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?b(Object(t),!0).forEach((function(r){i.default(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):b(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}var f=e.Animation.create((function(e){var r=e.direction,t=void 0===r?"right":r,n=c.default(e,s),o=0,i=1,a={x:0,y:.5};switch(t){case"left":a.x=1;break;case"up":o=1,i=0,a={x:0,y:1};break;case"down":o=1,i=0,a={x:0,y:0}}return[l({scale:{x:1},origin:a,duration:.6},n),{scale:{x:o,y:i}}]})),O=["direction"];function y(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function j(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?y(Object(t),!0).forEach((function(r){i.default(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):y(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}var d=e.Animation.create((function(e){var r=e.direction,t=void 0===r?"right":r,n=c.default(e,O);return["left","right","top","bottom"].includes(t)||(t="right"),[j({clip:i.default({},t,0)},n),{clip:i.default({},t,1)}]}));exports.Animation=e.Animation,exports.Move=t.Move,exports.Pop=t.Pop,exports.Fade=p,exports.Scale=f,exports.Wipe=d;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";var e=require("@babel/runtime/helpers/defineProperty"),t=require("@babel/runtime/helpers/typeof");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=n(e),r=n(t);function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,i)}return n}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){i.default(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var a=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:window;"Lively"in n||(n.Lively={}),e in n.Lively||(n.Lively[e]=t)};exports.addEventListener=function(e,t){if(t instanceof Function){a("Events",{}),e in window.Lively.Events||(window.Lively.Events[e]={unique:0},window.addEventListener(e,(function(t){Object.values(window.Lively.Events[e]).forEach((function(e){e instanceof Function&&e(t)}))})));var n=window.Lively.Events[e];t.Lively={ListenerID:n.unique},n[n.unique++]=t}},exports.cacheElementStyles=function(e){a("queue",[],e),a("timeouts",{},e),e.Lively.style||(e.Lively.style=l(l({},function(e){for(var t={},n=0;n<e.style.length;n++)t[e.style[n]]=e.style[e.style[n]];return t}(e)),{},{transitionProperty:"all",willChange:"transform",strokeDasharray:1})),function(e,t){for(var n in e.style={},t)e.style[n]=t[n]}(e,e.Lively.style);var t=getComputedStyle(e),n=t.paddingLeft,i=t.paddingRight,r=t.paddingTop,o=t.paddingBottom,s=t.backgroundColor,u=t.color,d=t.borderRadius,y=t.padding,c=t.fontSize,p=t.zIndex,v=e.getBoundingClientRect(),f=v.x,g=v.y,w=v.width,b=v.height;e.Lively.initials={x:f,y:g,paddingLeft:n,paddingRight:i,paddingTop:r,paddingBottom:o,backgroundColor:s,color:u,fontSize:c,zIndex:"auto"===p?0:parseInt(p),width:w+"px",height:b+"px",borderRadius:d.split(" ")[0],padding:y.split(" ")[0]}},exports.isObject=function(e){return e&&"object"===r.default(e)&&!Array.isArray(e)},exports.livelyProperty=a,exports.padArray=function(e,t){return new Array(t).fill(0).map((function(t,n){return n<e.length?e[n]:e[e.length-1]}))},exports.removeEventListener=function(e,t){var n,i;"undefined"!=typeof window&&null!==(n=window.Lively)&&void 0!==n&&null!==(i=n.Events)&&void 0!==i&&i[e]&&null!=t&&t.Lively&&"ListenerID"in t.Lively&&delete window.Lively.Events[e][t.Lively.ListenerID]};
|
package/dist/cjs/hooks.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/slicedToArray"),r=require("react");function
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/slicedToArray"),r=require("react"),t=require("./link-884ecbbe.js"),u=require("./scroll-ad21fb35.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("./helper-e7d4aad4.js"),require("@babel/runtime/helpers/defineProperty"),require("@babel/runtime/helpers/typeof");var i=n(e);exports.useScroll=u.useScroll,exports.useAnimation=function(e){var r=t.Link.create(e);return[r,r.feed]},exports.useUnmount=function(e){var t=r.useState(e),u=i.default(t,2),n=u[0],o=u[1],l=r.useRef();return[n,function(){var e;if(!n)return o(!0);null!==(e=l.current)&&void 0!==e&&e.props.onUnmount&&l.current.play(l.current.props.onUnmount,{reverse:!0,immediate:!0,callback:function(){return o(!1)}})},l]};
|
package/dist/cjs/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./animatable-
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./animatable-3481c274.js"),t=require("@babel/runtime/helpers/asyncToGenerator"),r=require("@babel/runtime/helpers/classCallCheck"),i=require("@babel/runtime/helpers/createClass"),n=require("@babel/runtime/helpers/get"),o=require("@babel/runtime/helpers/inherits"),a=require("@babel/runtime/helpers/possibleConstructorReturn"),s=require("@babel/runtime/helpers/getPrototypeOf"),u=require("@babel/runtime/helpers/defineProperty"),l=require("@babel/runtime/regenerator"),p=require("react"),c=require("./animation-80770446.js"),h=require("./helper-e7d4aad4.js");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("@babel/runtime/helpers/typeof"),require("@babel/runtime/helpers/slicedToArray"),require("./link-884ecbbe.js"),require("@babel/runtime/helpers/objectWithoutProperties");var d=f(t),m=f(r),y=f(i),v=f(n),b=f(o),g=f(a),x=f(s),w=f(u),A=f(l);function k(e,t){var r="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!r){if(Array.isArray(e)||(r=function(e,t){if(!e)return;if("string"==typeof e)return O(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return O(e,t)}(e))||t&&e&&"number"==typeof e.length){r&&(e=r);var i=0,n=function(){};return{s:n,n:function(){return i>=e.length?{done:!0}:{done:!1,value:e[i++]}},e:function(e){throw e},f:n}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,a=!0,s=!1;return{s:function(){r=r.call(e)},n:function(){var e=r.next();return a=e.done,e},e:function(e){s=!0,o=e},f:function(){try{a||null==r.return||r.return()}finally{if(s)throw o}}}}function O(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,i=new Array(t);r<t;r++)i[r]=e[r];return i}function S(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,i)}return r}function j(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?S(Object(r),!0).forEach((function(t){w.default(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):S(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function q(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,i=x.default(e);if(t){var n=x.default(this).constructor;r=Reflect.construct(i,arguments,n)}else r=i.apply(this,arguments);return g.default(this,r)}}var L=function(e){b.default(o,e);var t,r,i,n=q(o);function o(e){var t,r,i;return m.default(this,o),(i=n.call(this,e)).properties=i.props.properties||["position","scale","opacity","backgroundColor","color","interact","zIndex"],!i.props.properties&&i.props.useLayout&&i.properties.push("borderRadius","fontSize"),i.parent=(null===(t=(r=i.props).parent)||void 0===t?void 0:t.call(r))||{group:""},i.group=i.parent.group+i.props.group,i.useLayout=!1,i.childStyles={pointerEvents:"initial"},i.parentStyles={background:"transparent",border:"none",padding:0,pointerEvents:"none",backdropFilter:"none",boxShadow:"unset",fontSize:"unset",zIndex:"unset"},i}return y.default(o,[{key:"layout",value:function(){this.position=this.position||getComputedStyle(this.element).position;var e=j(j({},this.parentStyles),{},{width:this.element.offsetWidth,height:this.element.offsetHeight});"absolute"===this.position||"fixed"===this.position?e.position="absolute":(e.position="relative",this.childStyles=j(j({},this.childStyles),{},{position:"absolute",margin:0,top:0,left:0})),this.parentStyles=e,this.useLayout=!0,this.hasUpdated=!0,this.forceUpdate()}},{key:"update",value:(i=d.default(A.default.mark((function e(){var t,r,i,n,o,a,s,u,l=arguments;return A.default.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(t=l.length>0&&void 0!==l[0]?l[0]:{},r=t.mount,i=void 0===r?!this.useLayout:r,n=t.active,o=void 0===n?this.props.active:n,this.element=this.elements[0],this.element){e.next=4;break}return e.abrupt("return");case 4:if(!this.props.useLayout||!i){e.next=6;break}return e.abrupt("return",this.layout());case 6:if(!this.element.Lively||this.hasUpdated){e.next=8;break}return e.abrupt("return");case 8:if(h.cacheElementStyles(this.element),this.hasUpdated=!1,!this.parent.props){e.next=12;break}return e.abrupt("return");case 12:return e.next=14,c.AnimationQueue.sleep(.001);case 14:this.setUniqueId(),this.animations={default:this.unmorphAnimation()},o||this.animations.default.initial(this.element),a=k(this.children);try{for(a.s();!(s=a.n()).done;)(u=s.value.animatable).setUniqueId(),u.animations={default:u.unmorphAnimation()},o||u.animations.default.initial(u.element)}catch(e){a.e(e)}finally{a.f()}case 19:case"end":return e.stop()}}),e,this)}))),function(){return i.apply(this,arguments)})},{key:"setUniqueId",value:function(){this.parent.id&&(this.id=this.parent.id),"id"in this||(h.livelyProperty("Morph",{}),this.group in window.Lively.Morph||(window.Lively.Morph[this.group]=0),this.id=window.Lively.Morph[this.group]++),"id"in this&&this.element.setAttribute("lively-morph-id",this.id.toString())}},{key:"componentDidUpdate",value:(r=d.default(A.default.mark((function e(t){return A.default.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,this.update({mount:!1,active:t.active});case 2:t.active!==this.props.active&&this.morph(this.props.active);case 3:case"end":return e.stop()}}),e,this)}))),function(e){return r.apply(this,arguments)})},{key:"morph",value:(t=d.default(A.default.mark((function e(t){var r,i;return A.default.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return t&&this.element.setAttribute("lively-morph-target",!0),e.next=3,c.AnimationQueue.sleep(.001);case 3:t?this.play("default",{immediate:!0}):(r=document.querySelector('[lively-morph-group="'.concat(this.group,'"][lively-morph-target="true"]')))&&(r.removeAttribute("lively-morph-target"),(i=r.getAttribute("lively-morph-id"))in this.animations||this.createAnimations(i),this.play(i,{immediate:!0}));case 4:case"end":return e.stop()}}),e,this)}))),function(e){return t.apply(this,arguments)})},{key:"createAnimations",value:function(e){var t=document.querySelector('[lively-morph-group="'.concat(this.group,'"][lively-morph-id="').concat(e,'"]'));this.animations[e]=this.morphAnimation(this.element,t);var r,i=k(this.children);try{for(i.s();!(r=i.n()).done;){r.value.animatable.createAnimations(e)}}catch(e){i.e(e)}finally{i.f()}}},{key:"animationFromKeyframes",value:function(e){var t,r=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n={useLayout:this.props.useLayout,interpolate:this.props.interpolate,origin:{x:0,y:0},duration:this.props.duration},o=k(this.properties);try{var a=function(){var o=t.value;if(r.props.ignore.includes(o))return"continue";var a=o in e?o:"auto";if(!(a in e))return"continue";n[o]=e[a].map((function(e){if(!h.isObject(e))return e in i?i[e][o]:e;var t={};for(var r in e)e[r]in i?t[r]=i[e[r]][o]:t[r]=e[r];return t}))};for(o.s();!(t=o.n()).done;)a()}catch(e){o.e(e)}finally{o.f()}return new c.AnimationClip(n)}},{key:"morphAnimation",value:function(e,t){var r,i;return t?(e=null===(r=e.Lively)||void 0===r?void 0:r.initials,t=null===(i=t.Lively)||void 0===i?void 0:i.initials,this.x=t.x-e.x,this.y=t.y-e.y,this.parent.props&&(this.x-=this.parent.x,this.y-=this.parent.y),this.animationFromKeyframes({auto:["from","to",{set:"to",end:"from"}],position:["from","to",{set:"to",end:"from"}],scale:["from","to",{set:"to",end:"from"}],opacity:[1,1,{end:0}],interact:[!0,!0,{end:!1}]},{from:j(j({},e),{},{position:{x:0,y:0},scale:{x:1,y:1}}),to:j(j({},t),{},{position:{x:this.x,y:this.y},scale:{x:parseInt(t.width)/parseInt(e.width),y:parseInt(t.height)/parseInt(e.height)}})})):this.animationFromKeyframes({opacity:[1,0,0],interact:[!0,!1,!1]})}},{key:"unmorphAnimation",value:function(){var e=this.element.Lively.initials;return this.animationFromKeyframes({auto:["from","from","from"],position:[{x:0,y:0}],scale:[{x:1,y:1}],opacity:[0,0,1],interact:[!1,!1,!0],zIndex:["from",e.zIndex+1,{set:e.zIndex+1,end:"from"}]},{from:e})}},{key:"getChildren",value:function(e){var t=this;return p.Children.map(e,(function(e){if(!p.isValidElement(e))return e;var r=e.type!==o?{}:{parent:function(){return t},duration:t.props.duration};return p.cloneElement(e,r,t.getChildren(e.props.children))}))}},{key:"render",value:function(){var e,t=null!==(e=this.props.children)&&void 0!==e&&e.length?this.props.children[0]:this.props.children;if(!p.isValidElement(t))return t;var r=this.getChildren(t.props.children),i={"lively-morph-group":this.group,style:j(j({},t.props.style),this.childStyles)},n=v.default(x.default(o.prototype),"render",this).call(this,p.cloneElement(t,i,r));return this.useLayout?p.cloneElement(t,{style:this.parentStyles},n):n}}]),o}(e.Animatable);w.default(L,"defaultProps",{group:0,active:!1,useLayout:!1,interpolate:"ease",duration:1.5,ignore:[]}),exports.Animatable=e.Animatable,exports.Morph=L;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";function n(n,r){var e="undefined"!=typeof Symbol&&n[Symbol.iterator]||n["@@iterator"];if(!e){if(Array.isArray(n)||(e=function(n,r){if(!n)return;if("string"==typeof n)return t(n,r);var e=Object.prototype.toString.call(n).slice(8,-1);"Object"===e&&n.constructor&&(e=n.constructor.name);if("Map"===e||"Set"===e)return Array.from(n);if("Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e))return t(n,r)}(n))||r&&n&&"number"==typeof n.length){e&&(n=e);var o=0,i=function(){};return{s:i,n:function(){return o>=n.length?{done:!0}:{done:!1,value:n[o++]}},e:function(n){throw n},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var u,a=!0,c=!1;return{s:function(){e=e.call(n)},n:function(){var n=e.next();return a=n.done,n},e:function(n){c=!0,u=n},f:function(){try{a||null==e.return||e.return()}finally{if(c)throw u}}}}function t(n,t){(null==t||t>n.length)&&(t=n.length);for(var r=0,e=new Array(t);r<t;r++)e[r]=n[r];return e}function r(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:function(n){return n};return n.isBound?"undefined"!=typeof window?n(this.value):null:(n.isBound=!0,r.construct(this,n))}r.construct=function(t){for(var e=arguments.length,o=new Array(e>1?e-1:0),i=1;i<e;i++)o[i-1]=arguments[i];var u=r.bind.apply(r,[t].concat(o));return u.set=function(n){return t.value=n},u.link=function(n){return t.linked.push(n),u},u.feed=function(r){t.value=r;var e,o=n(t.linked);try{for(o.s();!(e=o.n()).done;){(0,e.value)()}}catch(n){o.e(n)}finally{o.f()}},u},r.create=function(n){return r.construct({value:n,linked:[]})},r.isLink=function(n){return n instanceof Function&&"link"in n},exports.Link=r;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";var e=require("@babel/runtime/helpers/defineProperty"),t=require("@babel/runtime/helpers/objectWithoutProperties"),r=require("./animation-80770446.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=n(e),c=n(t),i=["direction"];function p(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function a(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?p(Object(r),!0).forEach((function(t){o.default(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):p(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var u=r.Animation.create((function(e){var t=e.direction,r=void 0===t?"up":t,n=c.default(e,i),o="0px",p="20px";switch(r){case"down":p="-20px";break;case"left":o="20px",p="0px";break;case"right":o="-20px",p="0px"}return[a({position:{x:0,y:0},opacity:1,duration:.5},n),{position:{x:o,y:p},opacity:0}]}));function s(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function b(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?s(Object(r),!0).forEach((function(t){o.default(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):s(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var f=r.Animation.create((function(e){return[b({opacity:1,scale:1,duration:.25},e),{opacity:0,scale:.85}]}));exports.Move=u,exports.Pop=f;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";var e=require("react"),r=require("./link-884ecbbe.js"),n=require("./helper-e7d4aad4.js");exports.useScroll=function(){var t=r.Link.create(0);return e.useEffect((function(){var e=function(){return t.feed(window.scrollY)};return t.set(window.scrollY),n.addEventListener("scroll",e),function(){return n.removeEventListener("scroll",e)}}),[]),t};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import e from"@babel/runtime/helpers/typeof";import t from"@babel/runtime/helpers/slicedToArray";import r from"@babel/runtime/helpers/asyncToGenerator";import n from"@babel/runtime/helpers/classCallCheck";import i from"@babel/runtime/helpers/createClass";import o from"@babel/runtime/helpers/inherits";import s from"@babel/runtime/helpers/possibleConstructorReturn";import a from"@babel/runtime/helpers/getPrototypeOf";import l from"@babel/runtime/helpers/defineProperty";import u from"@babel/runtime/regenerator";import{isValidElement as p,Children as c,cloneElement as h,Component as f}from"react";import{K as v,b as d,a as m,A as y}from"./animation-264c4885.js";import{L as w}from"./link-67981677.js";import{i as g,c as b,a as k,r as x}from"./helper-ef605e17.js";function L(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function j(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?L(Object(r),!0).forEach((function(t){l(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):L(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function O(e,t){var r="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!r){if(Array.isArray(e)||(r=function(e,t){if(!e)return;if("string"==typeof e)return A(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return A(e,t)}(e))||t&&e&&"number"==typeof e.length){r&&(e=r);var n=0,i=function(){};return{s:i,n:function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}},e:function(e){throw e},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,s=!0,a=!1;return{s:function(){r=r.call(e)},n:function(){var e=r.next();return s=e.done,e},e:function(e){a=!0,o=e},f:function(){try{s||null==r.return||r.return()}finally{if(a)throw o}}}}function A(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function E(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,n=a(e);if(t){var i=a(this).constructor;r=Reflect.construct(n,arguments,i)}else r=n.apply(this,arguments);return s(this,r)}}var C=function(s){o(R,f);var a,l,L,A,C,D,F,V,M,P=E(R);function R(e){var t;n(this,R),(t=P.call(this,e)).hover=!1,t.hasFocus=!1,t.inView=!1,t.scrollDelta=0,t.viewportMargin=e.viewportMargin;var r=t.props.animate||{},i=r.duration,o=r.interpolate,s=r.origin,a=r.useLayout;for(var l in t.links={duration:i,interpolate:o,origin:s,useLayout:a},t.animations={default:t.parse(t.props.animate)},t.props.animations)t.animations[l]=t.parse(t.props.animations[l]);return t.links=new v(t.links),t.elements=[],t.children=[],t.level=0,t}return i(R,[{key:"parse",value:function(e){if(d.isAnimation(e))return e.use();if(!g(e))return null;var t={};for(var r in e){var n=e[r];w.isLink(n)?this.links[r]=n.link(this.style.bind(this)):t[r]=n}return new m(t,this.props.initial)}},{key:"style",value:function(){var e=this;cancelAnimationFrame(this.frame),this.frame=requestAnimationFrame((function(){var t,r=O(e.elements);try{for(r.s();!(t=r.n()).done;){var n=t.value;e.links.update(n)}}catch(e){r.e(e)}finally{r.f()}}))}},{key:"update",value:function(){var e,t=O(this.elements);try{for(t.s();!(e=t.n()).done;){var r=e.value;b(r),this.animations.default.restore(r,!0),this.links.update(r)}}catch(e){t.e(e)}finally{t.f()}}},{key:"componentDidMount",value:function(){var e=this,t=this.props.parentLevel<1||this.props.noCascade;this.resizeEventListener=this.onResize.bind(this),k("resize",this.resizeEventListener),t&&(this.scrollEventListener=this.onScroll.bind(this),k("scroll",this.scrollEventListener)),this.update(),r(u.mark((function r(){return u.wrap((function(r){for(;;)switch(r.prev=r.next){case 0:if(!("fonts"in document)){r.next=4;break}return r.next=3,document.fonts.ready;case 3:e.update({mount:!0});case 4:t&&(e.props.onMount&&e.play(e.props.onMount,{staggerDelay:.001,immediate:!0}),y.delay((function(){return e.onScroll()}),.001));case 5:case"end":return r.stop()}}),r)})))()}},{key:"componentDidUpdate",value:(M=r(u.mark((function e(){return u.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:this.update();case 1:case"end":return e.stop()}}),e,this)}))),function(){return M.apply(this,arguments)})},{key:"componentWillUnmount",value:function(){x("scroll",this.scrollEventListener),x("resize",this.resizeEventListener)}},{key:"inViewport",value:function(){var e,r=!0,n=!0,i=O(this.elements);try{for(i.s();!(e=i.n()).done;){var o=e.value,s=o.getBoundingClientRect().y;r=r&&s+o.clientHeight*this.viewportMargin<window.innerHeight,n=n&&s>window.innerHeight+o.clientHeight*(1-this.viewportMargin)}}catch(e){i.e(e)}finally{i.f()}if(!this.elements.length){var a,l=O(this.children);try{for(l.s();!(a=l.n()).done;){var u=a.value.animatable.inViewport(),p=t(u,2),c=p[0],h=p[1];r=r&&c,n=n&&h}}catch(e){l.e(e)}finally{l.f()}}return[r,n]}},{key:"onScroll",value:(V=r(u.mark((function e(){var r,n,i,o,s,a,l,p;return u.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(this.props.whileViewport&&!(Date.now()-this.scrollDelta<350)){e.next=2;break}return e.abrupt("return");case 2:this.scrollDelta=Date.now(),r=this.inViewport(),n=t(r,2),i=n[0],o=n[1],!this.inView&&i&&(this.inView=!0,this.props.whileViewport&&this.play(this.props.whileViewport),null===(s=(a=this.props).onEnterViewport)||void 0===s||s.call(a)),this.inView&&o&&(this.inView=!1,this.props.whileViewport&&this.play(this.props.whileViewport,{reverse:!0,immediate:!0}),null===(l=(p=this.props).onLeaveViewport)||void 0===l||l.call(p));case 6:case"end":return e.stop()}}),e,this)}))),function(){return V.apply(this,arguments)})},{key:"onResize",value:(F=r(u.mark((function e(){var t;return u.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:null!==(t=this.nextResize)&&void 0!==t&&t.cancel&&this.nextResize.cancel(),this.nextResize=y.delay(this.update.bind(this,{mount:!0}),.25);case 2:case"end":return e.stop()}}),e,this)}))),function(){return F.apply(this,arguments)})},{key:"onEnter",value:(D=r(u.mark((function e(t){var r,n=arguments;return u.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:r=n.length>1&&void 0!==n[1]&&n[1],this.hover||(this.props.whileHover&&this.play(this.props.whileHover),this.hover=!0),r&&r(t);case 3:case"end":return e.stop()}}),e,this)}))),function(e){return D.apply(this,arguments)})},{key:"onLeave",value:(C=r(u.mark((function e(t){var r,n=arguments;return u.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:r=n.length>1&&void 0!==n[1]&&n[1],this.hover&&(this.props.whileHover&&this.play(this.props.whileHover,{reverse:!0}),this.hover=!1),r&&r(t);case 3:case"end":return e.stop()}}),e,this)}))),function(e){return C.apply(this,arguments)})},{key:"onFocus",value:(A=r(u.mark((function e(t){var r,n=arguments;return u.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:r=n.length>1&&void 0!==n[1]&&n[1],this.hasFocus||(this.props.whileFocus&&this.play(this.props.whileFocus),this.hasFocus=!0),r&&r(t);case 3:case"end":return e.stop()}}),e,this)}))),function(e){return A.apply(this,arguments)})},{key:"onBlur",value:(L=r(u.mark((function e(t){var r,n=arguments;return u.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:r=n.length>1&&void 0!==n[1]&&n[1],this.hasFocus&&(this.props.whileFocus&&this.play(this.props.whileFocus,{reverse:!0}),this.hasFocus=!1),r&&r(t);case 3:case"end":return e.stop()}}),e,this)}))),function(e){return L.apply(this,arguments)})},{key:"onClick",value:(l=r(u.mark((function e(t){var r,n=arguments;return u.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:r=n.length>1&&void 0!==n[1]&&n[1],this.props.onClick&&this.play(this.props.onClick),r&&r(t);case 3:case"end":return e.stop()}}),e,this)}))),function(e){return l.apply(this,arguments)})},{key:"play",value:(a=r(u.mark((function e(t){var r,n,i,o,s,a,l,p,c,h,f,v,d,m,w,g,b,k,x,L,j,A,E,C,D,F,V=this,M=arguments;return u.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(i=M.length>1&&void 0!==M[1]?M[1]:{},o=i.callback,s=i.reverse,a=void 0!==s&&s,l=i.immediate,p=void 0!==l&&l,c=i.cascade,h=void 0!==c&&c,f=i.groupAdjust,v=void 0===f?0:f,d=i.cascadeDelay,m=void 0===d?0:d,w=i.staggerDelay,g=void 0===w?0:w,!(this.props.parentLevel>0)||h){e.next=3;break}return e.abrupt("return");case 3:if(b="string"==typeof t?this.animations[t]:this.animations.default){e.next=6;break}return e.abrupt("return");case 6:for(null===(r=(n=this.props).onAnimationStart)||void 0===r||r.call(n),k=0,x=0;x<this.elements.length;x++)L="group"in this.props?this.props.parentLevel-this.props.group:this.level+v,j=a?L*b.duration:(this.props.parentLevel-L)*m,j=this.props.stagger*x+j+g,k=Math.max(j,k),b.play(this.elements[x],{delay:j,reverse:a,immediate:p});A=O(this.children);try{for(A.s();!(E=A.n()).done;)C=E.value,D=C.animatable,F=C.staggerIndex,D.play(t,{reverse:a,immediate:p,cascade:!0,staggerDelay:F<0?0:this.props.stagger*F,cascadeDelay:b.duration,groupAdjust:F<0?0:1})}catch(e){A.e(e)}finally{A.f()}y.delay((function(){var e,t;null==o||o(),null===(e=(t=V.props).onAnimationEnd)||void 0===e||e.call(t)}),k+b.duration);case 13:case"end":return e.stop()}}),e,this)}))),function(e){return a.apply(this,arguments)})},{key:"mergeProperties",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=j(j({},r),t);for(var i in n)["children","parentLevel","ref"].includes(i)?delete n[i]:Array.isArray(t[i])||Array.isArray(r[i])||"object"===e(t[i])&&"object"===e(r[i])&&(n[i]=j(j({},r[i]),t[i]));return n}},{key:"deepClone",value:function(e){var t,r=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=n.index,o=void 0===i?0:i,s=n.useElements,a=void 0!==s&&s,l=n.useEvents,u=void 0===l||l;if(!p(e))return e;var f={pathLength:1};if(e.type===R||e.type.prototype instanceof R||(a&&(f=j(j({},f),{},{ref:function(e){return r.elements[o]=e}})),u&&(this.props.parentLevel<1||this.props.noCascade)&&(f=j(j({},f),{},{onMouseEnter:function(t){var n;return r.onEnter(t,null===(n=e.props)||void 0===n?void 0:n.onMouseEnter)},onMouseLeave:function(t){var n;return r.onLeave(t,null===(n=e.props)||void 0===n?void 0:n.onMouseLeave)},onFocus:function(t){var n;return r.onFocus(t,null===(n=e.props)||void 0===n?void 0:n.onFocus)},onBlur:function(t){var n;return r.onBlur(t,null===(n=e.props)||void 0===n?void 0:n.onBlur)},onClick:function(t){var n;return r.onClick(t,null===(n=e.props)||void 0===n?void 0:n.onClick)}}),u=!1)),(e.type===R||e.type.prototype instanceof R)&&(null===(t=e.props)||void 0===t||!t.noCascade)){var v=this.childrenIndex++;f=j(j(j({},f),this.mergeProperties(e.props,this.props)),{},{parentLevel:this.parentLevel>0?this.parentLevel:this.level,ref:function(e){return r.children[v]={animatable:e,staggerIndex:a?o:-1}}})}var d=c.map(e.props.children,(function(e,t){return r.deepClone(e,{index:t,useEvents:u})}));return h(e,f,d)}},{key:"countNestedLevels",value:function(e){var t=this;if(!e)return 0;var r=0,n=0;return c.forEach(e,(function(e){var i;if(p(e)){(e.type===R||e.type.prototype instanceof R)&&(r=1);var o=t.countNestedLevels(null===(i=e.props)||void 0===i?void 0:i.children);n=n<o?o:n}})),n+r}},{key:"render",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.props.children;return this.level=this.countNestedLevels(t),this.childrenIndex=0,c.map(t,(function(t,r){return e.deepClone(t,{index:r,useElements:!0})}))}}]),R}();l(C,"defaultProps",{parentLevel:0,stagger:.1,viewportMargin:.75,animate:{},animations:{}});export{C as A};
|
package/dist/esm/animate.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import e from"@babel/runtime/helpers/extends";import t from"@babel/runtime/helpers/objectWithoutProperties";import r from"@babel/runtime/helpers/classCallCheck";import n from"@babel/runtime/helpers/createClass";import i from"@babel/runtime/helpers/inherits";import o from"@babel/runtime/helpers/possibleConstructorReturn";import a from"@babel/runtime/helpers/getPrototypeOf";import l from"@babel/runtime/helpers/defineProperty";import s,{Children as
|
|
1
|
+
import e from"@babel/runtime/helpers/extends";import t from"@babel/runtime/helpers/objectWithoutProperties";import r from"@babel/runtime/helpers/classCallCheck";import n from"@babel/runtime/helpers/createClass";import i from"@babel/runtime/helpers/inherits";import o from"@babel/runtime/helpers/possibleConstructorReturn";import a from"@babel/runtime/helpers/getPrototypeOf";import l from"@babel/runtime/helpers/defineProperty";import s,{Children as c,isValidElement as p,cloneElement as u,Component as m,useRef as f}from"react";import{A as b}from"./animatable-c248ca70.js";import{M as h,P as y}from"./pop-7211ea3d.js";import{p as v}from"./helper-ef605e17.js";import d from"@babel/runtime/helpers/toConsumableArray";import{u as g}from"./scroll-efaeb330.js";import"@babel/runtime/helpers/typeof";import"@babel/runtime/helpers/slicedToArray";import"@babel/runtime/helpers/asyncToGenerator";import"@babel/runtime/regenerator";import"./animation-264c4885.js";import"./link-67981677.js";var O=["levels","animations"];function j(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function P(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?j(Object(r),!0).forEach((function(t){l(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):j(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function w(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,n=a(e);if(t){var i=a(this).constructor;r=Reflect.construct(n,arguments,i)}else r=n.apply(this,arguments);return o(this,r)}}var k=function(o){i(l,m);var a=w(l);function l(e){var t;return r(this,l),(t=a.call(this,e)).levels=t.props.levels,t.animations=v(t.props.animations,t.levels),t}return n(l,[{key:"makeAnimatable",value:function(r){var n=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;if(i<1||c.count(r)<1)return r;var o=this.props;o.levels,o.animations;var a=t(o,O),l=this.animations[this.levels-i];return i===this.levels&&(a.ref=function(e){return n.animatable=e}),s.createElement(b,e({animate:l},a),c.map(r,(function(e){return p(e)?u(e,{},n.makeAnimatable(e.props.children,i-1)):e})))}},{key:"play",value:function(e){var t,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};null===(t=this.animatable)||void 0===t||t.play(e,P({},r))}},{key:"render",value:function(){return this.makeAnimatable(this.props.children,this.levels)}}]),l}();function E(e){var t=e.children,r=e.className,n=e.style,i=e.duration;if("string"!=typeof t)return t;var o=t.split("");return s.createElement("div",{className:r,style:n},s.createElement(b,{whileViewport:!0,animate:{opacity:1,position:{y:0},rotation:0,duration:.8},initial:{opacity:0,position:{y:"100%"},rotation:10},stagger:(i-.8)/(o.length-1)},o.map((function(e,t){return s.createElement("span",{style:{display:"inline-block"},key:t},/\s/.test(e)?" ":e)}))))}function A(e){var t,r=e.children,n=e.color,i=e.duration,o=(null===(t=r.props)||void 0===t?void 0:t.children)||[];Array.isArray(o)||(o=[o]);var a=[s.createElement(b,{key:0,initial:{clip:{right:0}},animate:{clip:{left:1},duration:i/2}},s.createElement("div",{style:{position:"absolute",inset:0,backgroundColor:n}}))].concat(d(o));return s.createElement(b,{whileViewport:!0,animate:{clip:{right:0},duration:i/2},initial:{clip:{right:1}}},u(r,{},a))}function C(e){var t,r=e.children,n=e.amount,i=g(),o=f();return s.createElement(b,{ref:o,animate:{position:i((function(e){if(void 0===t){var r,i=null===(r=o.current)||void 0===r?void 0:r.elements[0];i&&(t=Math.max(i.getBoundingClientRect().y+window.scrollY-window.innerHeight/2,0))}return{x:0,y:(e-(t||0))*n}}))}},r)}l(k,"defaultProps",{levels:1,stagger:.1,viewportMargin:.25,animations:[h,y]}),E.defaultProps={style:{},className:"",duration:1.6},A.defaultProps={color:"grey",duration:1.6},C.defaultProps={amount:.5};export{k as Animate,A as ColorWipe,C as Parallax,E as WriteOn};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import t from"@babel/runtime/helpers/slicedToArray";import e from"@babel/runtime/helpers/objectWithoutProperties";import i from"@babel/runtime/helpers/classCallCheck";import n from"@babel/runtime/helpers/createClass";import{i as r,l as a}from"./helper-ef605e17.js";import o from"@babel/runtime/helpers/asyncToGenerator";import s from"@babel/runtime/regenerator";var l={opacity:1,scale:{x:1,y:1},position:{x:0,y:0},rotation:0,clip:{left:0,top:0,right:0,bottom:0},borderRadius:0,padding:0,fontSize:"1rem",backgroundColor:{r:127,g:127,b:127,a:255},color:{r:127,g:127,b:127,a:255},active:!0,interact:!0,zIndex:0,strokeLength:1},u=["opacity","active","zIndex","lineHeight","fontWeight"];function c(t,e){var i="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!i){if(Array.isArray(t)||(i=function(t,e){if(!t)return;if("string"==typeof t)return h(t,e);var i=Object.prototype.toString.call(t).slice(8,-1);"Object"===i&&t.constructor&&(i=t.constructor.name);if("Map"===i||"Set"===i)return Array.from(t);if("Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i))return h(t,e)}(t))||e&&t&&"number"==typeof t.length){i&&(t=i);var n=0,r=function(){};return{s:r,n:function(){return n>=t.length?{done:!0}:{done:!1,value:t[n++]}},e:function(t){throw t},f:r}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var a,o=!0,s=!1;return{s:function(){i=i.call(t)},n:function(){var t=i.next();return o=t.done,t},e:function(t){s=!0,a=t},f:function(){try{o||null==i.return||i.return()}finally{if(s)throw a}}}}function h(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,n=new Array(e);i<e;i++)n[i]=t[i];return n}var f=function(e){var i=e.match(/^#([\da-f]{1,2})([\da-f]{1,2})([\da-f]{1,2})([\da-f]{2})?/i),n=t(i,5);n[0];var r=n[1],a=n[2],o=n[3],s=n[4];return{r:parseInt(r.padStart(2,r),16),g:parseInt(a.padStart(2,a),16),b:parseInt(o.padStart(2,o),16),a:void 0!==s?parseInt(s,16):255}},d=function(e){var i=e.match(/^rgba?\((\d+)\D+(\d+)\D+(\d+)\D*(\d+)?\)/i),n=t(i,5);n[0];var r=n[1],a=n[2],o=n[3],s=n[4];return{r:parseInt(r),g:parseInt(a),b:parseInt(o),a:void 0!==s?parseInt(s):255}},v=function(t){var e=.5,i=.5;if(r(t))e=t.x,i=t.y;else if("string"==typeof t)switch(t){case"left":e=0;break;case"right":e=1;break;case"top":i=0;break;case"bottom":i=1}else e=i=t;return"".concat(100*e,"% ").concat(100*i,"%")},y=function t(e,i){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if("string"==typeof i){if(i.match(/^#[0-9a-f]{3,8}$/i))return f(i);if(i.match(/^rgba?\(.*\)$/i))return d(i);var a=(i.match(/[^0-9\.]*$/i)||["px"])[0];return i=parseFloat(i),isNaN(i)?l[e]:("%"===a&&(i/=100),a?[i,a]:i)}if(r(i)){var o=Object.keys(i),s=i;("x"in i||"y"in i)&&(o=["x","y"]),("r"in i||"g"in i||"b"in i||"a"in i)&&(o=["r","g","b","a"]),("left"in i||"right"in i||"top"in i||"bottom"in i)&&(o=["left","right","top","bottom"]),i={};var u,h=c(o);try{for(h.s();!(u=h.n()).done;){var v=u.value;i[v]=t(e,s[v],v)}}catch(t){h.e(t)}finally{h.f()}}if(void 0!==i)return i;var y=l[e];return n in y?y[n]:y},p=function(t,e){return Array.isArray(t)&&(e=t[1],t=t[0]),t*("%"===e?100:1)+e},m=function(t){return Array.isArray(t)&&(t="px"===t[1]?t[0]+"px":t[0]),t},g=function t(e,i,n){if(r(e)){var a={};for(var o in e)a[o]=t(e[o],r(i)?i[o]:i,n);return a}var s;if(Array.isArray(e)&&(s=e[1],e=e[0]),Array.isArray(i)&&(s=i[1],i=i[0]),"number"!=typeof e||"number"!=typeof i)return n>.5?i:e;var l=e*(1-n)+i*n;return s?[l,s]:l},b=function(t,e,i){if(t.length===i)return t[e];var n=e*((t.length-1)/(i-1)),r=Math.floor(n);return r===t.length-1?t[r]:g(t[r],t[r+1],n-r)},k=function(){function t(){i(this,t),this.queue=[],this.tick()}var e;return n(t,[{key:"uuid",value:function(){return Math.floor(1e6*Math.random()).toString(16).padStart("0",6)}},{key:"tick",value:(e=o(s.mark((function t(){var e,i,n;return s.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:e=Date.now(),i=0;case 2:if(!(i<this.queue.length+1)){t.next=13;break}if(n=this.queue[i],!(this.queue.length===i||n.timestamp>e)){t.next=7;break}return this.queue.splice(0,i),t.abrupt("break",13);case 7:n.callback(),delete n.cancel,delete n.store[n.id+n.timestamp];case 10:i++,t.next=2;break;case 13:requestAnimationFrame(this.tick.bind(this));case 14:case"end":return t.stop()}}),t,this)}))),function(){return e.apply(this,arguments)})},{key:"search",value:function(t){for(var e,i,n=0,r=this.queue.length-1;n<=r;)if(e=n+r>>>1,(i=this.queue[e].timestamp-t.timestamp)<0)n=e+1;else{if(!(i>0))return e;r=e-1}return n}},{key:"insert",value:function(t){var e=this.search(t);this.queue.splice(e,0,t)}},{key:"cancel",value:function(t){for(var e=this.search(t);e>0&&this.queue[e].timestamp>=t.timestamp;)e--;for(;e<this.queue.length&&this.queue[e].timestamp<=t.timestamp;){if(this.queue[e].id===t.id){this.queue.splice(e,1);break}e++}delete t.cancel}},{key:"delay",value:function(t,e){var i=this,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(t instanceof Function){var r={timestamp:Date.now()+1e3*e,id:this.uuid(),cancel:function(){return i.cancel(r)},callback:t,store:n};return this.insert(r),n[r.id+r.timestamp]=r,r}}}],[{key:"get",value:function(){return a("AnimationQueue",new t),window.Lively.AnimationQueue}},{key:"cancelAll",value:function(t){for(var e in t)t[e].cancel(),delete t[e]}},{key:"delay",value:function(t,e,i){return this.get().delay(t,e,i)}},{key:"sleep",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;return new Promise((function(i){t.delay(i,e)}))}}]),t}(),x=["duration","interpolate","origin","useLayout"],L=function(){function t(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=n.duration,a=void 0===r?0:r,o=n.interpolate,s=void 0===o?"ease":o,l=n.origin,u=void 0===l?{x:.5,y:.5}:l,c=n.useLayout,h=void 0!==c&&c,f=e(n,x);i(this,t),this.style=f,this.start={},this.end={},this.duration=a,this.interpolate="spring"===s?"cubic-bezier(0.65, 0.34, 0.7, 1.42)":s,this.origin=v(u),this.useLayout=h}return n(t,[{key:"addProperty",value:function(t,e){if(!r(e)||!("start"in e||"end"in e||"set"in e))return this.style[t]=e;"start"in e&&(this.start[t]=e.start),"end"in e&&(this.end[t]=e.end),"set"in e&&(this.style[t]=e.set)}},{key:"compile",value:function(){return this.style=this.interpret(this.style),this.start=this.interpret(this.start),this.end=this.interpret(this.end),this}},{key:"interpret",value:function(t){if(!Object.keys(t).length)return null;var e={transform:""};for(var i in t){var n=t[i];if(n instanceof Function){if(null===(n=n()))continue;n=y(i,n)}switch(i){case"position":e.transform+="translate(".concat(p(n.x,"px"),", ").concat(p(n.y,"px"),") ");break;case"scale":if("number"==typeof n&&(n={x:n,y:n}),this.useLayout){e.width=m(n.x),e.height=m(n.y);break}e.transform+="scale(".concat(p(n.x,"%"),", ").concat(p(n.y,"%"),") ");break;case"rotation":e.transform+="rotate(".concat(p(n,"deg"),") ");break;case"clip":e.clipPath="inset(".concat(p(n.top,"%")," ").concat(p(n.right,"%")," ").concat(p(n.bottom,"%")," ").concat(p(n.left,"%"),")"),e.webkitClipPath=e.clipPath;break;case"interact":e.pointerEvents=n?"all":"none";break;case"active":e.display=n?"":"none";break;case"strokeLength":e.strokeDashoffset=1-n;break;default:r(n)&&"r"in n?e[i]="rgba(".concat(n.r,", ").concat(n.g,", ").concat(n.b,", ").concat(n.a,")"):u.includes(i)?e[i]=n:e[i]=p(n,"px")}}return e}},{key:"initial",value:function(t){t.style.transitionTimingFunction=this.interpolate,t.style.transformOrigin=this.origin,this.apply(t,{duration:0})}},{key:"apply",value:function(e){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=i.duration,r=void 0===n?this.duration:n,a=i.reverse,o=void 0!==a&&a,s=t.setStyle.bind(t,e,this.style,r);this[o?"end":"start"]?(t.setStyle(e,this[o?"end":"start"],0),k.delay(s,.001)):s(),this[o?"start":"end"]&&k.delay(t.setStyle.bind(t,e,this[o?"start":"end"],0),r,e.Lively.timeouts)}},{key:"update",value:function(e){e.style.transitionTimingFunction=this.interpolate,e.style.transformOrigin=this.origin;var i=this.interpret(this.style);i&&t.setStyle(e,i,this.duration)}}],[{key:"setStyle",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0;for(var n in t.style.transitionDuration="".concat(i,"s"),e)"width"!==n?"height"!==n?"padding"===n&&(e.width||e.height)||"start"===n||"end"===n||(t.style[n]=e[n]):this.setLength(t,e,"height","paddingTop","paddingBottom"):this.setLength(t,e,"width","paddingLeft","paddingRight")}},{key:"setLength",value:function(t,e,i,n,r){var a=t.Lively.initials[i],o=parseInt(t.Lively.initials[n]),s=parseInt(t.Lively.initials[r]),l=e[i],u=e.padding?1:o/(0===s?1e-6:s);"string"==typeof l&&(l="calc(".concat(l," / ").concat(a,")"));var c=e.padding?e.padding:o+s+"px";t.style[i]="max(calc(".concat(a," * ").concat(l," - ").concat("border-box"!==t.style.boxSizing?"0px":c,"), 0px)");var h="calc(min(calc(".concat(a," * ").concat(l,"), ").concat(c,") * ");t.style[n]=h+.5*u,t.style[r]=h+1/(0===u?1e-6:u)*.5}}]),t}(),A=["delay","duration","repeat","alternate"],w=["interpolate","origin","useLayout"],q=function(){function r(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=t.delay,a=void 0===n?0:n,o=t.duration,s=void 0===o?1:o,l=t.repeat,u=void 0===l?1:l,c=t.alternate,h=void 0!==c&&c,f=e(t,A),d=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};i(this,r),this.length=0,this.delay=a,this.duration=s,this.repeat=u,this.alternate=h,this.keyframes=this.parse(f,d)}return n(r,[{key:"initial",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:this.keyframes[0];e&&e.initial(t)}},{key:"restore",value:function(t){var e,i,n=arguments.length>1&&void 0!==arguments[1]&&arguments[1];(n||null!==(e=t.Lively)&&void 0!==e&&e.keyframe)&&this.initial(t,null===(i=t.Lively)||void 0===i?void 0:i.keyframe)}},{key:"parse",value:function(t,i){var n=this,r=t.interpolate,a=t.origin,o=t.useLayout,s=e(t,w),u=function(t){Array.isArray(s[t])||(s[t]=[s[t]]),s[t].length<2&&s[t].unshift(t in i?i[t]:l[t]),s[t]=s[t].map((function(e){return y(t,e)})),n.length=Math.max(s[t].length,n.length)};for(var c in s)u(c);return new Array(this.length).fill(0).map((function(t,e){var i=new L({interpolate:r,origin:a,useLayout:o,duration:n.duration/(n.length-1)});for(var l in s)i.addProperty(l,b(s[l],e,n.length));return i.compile()}))}},{key:"start",value:function(t){var e=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=i.immediate,r=void 0!==n&&n,a=i.reverse,o=void 0!==a&&a,s=i.repeat,l=void 0===s?this.repeat:s;!t.Lively.animating||r?(this.initial(t,o?this.keyframes[this.length-1]:this.keyframes[0]),t.Lively.index=1,t.Lively.animating=!0,requestAnimationFrame((function(){return e.getNext(t,o,l)}))):t.Lively.queue.push([this,{reverse:o,repeat:l}])}},{key:"play",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=e.delay,n=void 0===i?0:i,r=e.immediate,a=void 0!==r&&r,o=e.reverse,s=void 0!==o&&o;if(t.style&&this.length){a&&(t.Lively.queue=[],k.cancelAll(t.Lively.timeouts));var l=this.start.bind(this,t,{immediate:a,reverse:s});this.delay||n?k.delay(l,this.delay+n,t.Lively.timeouts):l()}}},{key:"getNext",value:function(e){var i=this,n=arguments.length>1&&void 0!==arguments[1]&&arguments[1],r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1;if(e.Lively.index===this.length){e.Lively.animating=!1;var a=e.Lively.queue.shift()||[],o=t(a,2),s=o[0],l=o[1];return s?s.start(e,l):void(r>1&&this.start(e,{reverse:this.alternate?!n:n,repeat:r-1}))}var u=e.Lively.index;n&&(u=this.length-1-u),this.keyframes[u].apply(e,{reverse:n}),e.Lively.keyframe=this.keyframes[u],e.Lively.index++,k.delay((function(){return i.getNext(e,n,r)}),this.duration/(this.length-1),e.Lively.timeouts)}}]),r}(),S={create:function(e){var i=function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return t.use=t.use.bind(t,e),t};return i.use=function(){var i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e(i),r=t(n,2),a=r[0],o=r[1];return new q(a,o)},i},isAnimation:function(t){return t instanceof Function&&"use"in t}};export{k as A,L as K,q as a,S as b};
|
package/dist/esm/animations.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import e
|
|
1
|
+
import{b as e}from"./animation-264c4885.js";export{b as Animation}from"./animation-264c4885.js";import r from"@babel/runtime/helpers/defineProperty";export{M as Move,P as Pop}from"./pop-7211ea3d.js";import t from"@babel/runtime/helpers/objectWithoutProperties";import"@babel/runtime/helpers/slicedToArray";import"@babel/runtime/helpers/classCallCheck";import"@babel/runtime/helpers/createClass";import"./helper-ef605e17.js";import"@babel/runtime/helpers/typeof";import"@babel/runtime/helpers/asyncToGenerator";import"@babel/runtime/regenerator";function o(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function n(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(n,r))}))}return e}var i=e.create((function(e){return[n({opacity:1,duration:.65},e),{opacity:0}]})),c=["direction"];function p(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function a(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{};t%2?p(Object(o),!0).forEach((function(t){r(e,t,o[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):p(Object(o)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(o,r))}))}return e}var s=e.create((function(e){var r=e.direction,o=void 0===r?"right":r,n=t(e,c),i=0,p=1,s={x:0,y:.5};switch(o){case"left":s.x=1;break;case"up":i=1,p=0,s={x:0,y:1};break;case"down":i=1,p=0,s={x:0,y:0}}return[a({scale:{x:1},origin:s,duration:.6},n),{scale:{x:i,y:p}}]})),l=["direction"];function u(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function O(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{};t%2?u(Object(o),!0).forEach((function(t){r(e,t,o[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):u(Object(o)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(o,r))}))}return e}var f=e.create((function(e){var o=e.direction,n=void 0===o?"right":o,i=t(e,l);return["left","right","top","bottom"].includes(n)||(n="right"),[O({clip:r({},n,0)},i),{clip:r({},n,1)}]}));export{i as Fade,s as Scale,f as Wipe};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import e from"@babel/runtime/helpers/defineProperty";import t from"@babel/runtime/helpers/typeof";function n(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,i)}return n}function i(t){for(var i=1;i<arguments.length;i++){var r=null!=arguments[i]?arguments[i]:{};i%2?n(Object(r),!0).forEach((function(n){e(t,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):n(Object(r)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))}))}return t}var r=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:window;"Lively"in n||(n.Lively={}),e in n.Lively||(n.Lively[e]=t)},o=function(e){return e&&"object"===t(e)&&!Array.isArray(e)},l=function(e,t){return new Array(t).fill(0).map((function(t,n){return n<e.length?e[n]:e[e.length-1]}))},a=function(e,t){if(t instanceof Function){r("Events",{}),e in window.Lively.Events||(window.Lively.Events[e]={unique:0},window.addEventListener(e,(function(t){Object.values(window.Lively.Events[e]).forEach((function(e){e instanceof Function&&e(t)}))})));var n=window.Lively.Events[e];t.Lively={ListenerID:n.unique},n[n.unique++]=t}},s=function(e,t){var n,i;"undefined"!=typeof window&&null!==(n=window.Lively)&&void 0!==n&&null!==(i=n.Events)&&void 0!==i&&i[e]&&null!=t&&t.Lively&&"ListenerID"in t.Lively&&delete window.Lively.Events[e][t.Lively.ListenerID]},d=function(e){r("queue",[],e),r("timeouts",{},e),e.Lively.style||(e.Lively.style=i(i({},function(e){for(var t={},n=0;n<e.style.length;n++)t[e.style[n]]=e.style[e.style[n]];return t}(e)),{},{transitionProperty:"all",willChange:"transform",strokeDasharray:1})),function(e,t){for(var n in e.style={},t)e.style[n]=t[n]}(e,e.Lively.style);var t=getComputedStyle(e),n=t.paddingLeft,o=t.paddingRight,l=t.paddingTop,a=t.paddingBottom,s=t.backgroundColor,d=t.color,u=t.borderRadius,y=t.padding,c=t.fontSize,p=t.zIndex,f=e.getBoundingClientRect(),v=f.x,g=f.y,w=f.width,b=f.height;e.Lively.initials={x:v,y:g,paddingLeft:n,paddingRight:o,paddingTop:l,paddingBottom:a,backgroundColor:s,color:d,fontSize:c,zIndex:"auto"===p?0:parseInt(p),width:w+"px",height:b+"px",borderRadius:u.split(" ")[0],padding:y.split(" ")[0]}};export{a,d as c,o as i,r as l,l as p,s as r};
|
package/dist/esm/hooks.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import r from"@babel/runtime/helpers/slicedToArray";import{useState as
|
|
1
|
+
import r from"@babel/runtime/helpers/slicedToArray";import{useState as e,useRef as t}from"react";import{L as o}from"./link-67981677.js";export{u as useScroll}from"./scroll-efaeb330.js";import"./helper-ef605e17.js";import"@babel/runtime/helpers/defineProperty";import"@babel/runtime/helpers/typeof";function n(o){var n=e(o),i=r(n,2),p=i[0],u=i[1],l=t();return[p,function(){var r;if(!p)return u(!0);null!==(r=l.current)&&void 0!==r&&r.props.onUnmount&&l.current.play(l.current.props.onUnmount,{reverse:!0,immediate:!0,callback:function(){return u(!1)}})},l]}function i(r){var e=o.create(r);return[e,e.feed]}export{i as useAnimation,n as useUnmount};
|