@infinityfx/lively 1.0.0 → 1.0.1

package/README.md

@@ -6,7 +6,7 @@
 ![NPM weekly downloads](https://img.shields.io/npm/dw/@infinityfx/lively)
 ![NPM downloads](https://img.shields.io/npm/dt/@infinityfx/lively)
 
-Lightweight, zero-configuration react animation library.
+Feature complete, lightweight react animation library. Lively lets u create performant animations without the hassle.
 
 ## Table of contents
 - [Get started](#get-started)
@@ -15,8 +15,10 @@ Lightweight, zero-configuration react animation library.
 - [Base components](#base-components)
     - [Animatable](#animatable-animatable)
     - [Morph](#morph-morph)
+- [Reactivity](#reactivity)
 - [Auto-animation](#auto-animation)
     - [Animate `<Animate />`](#animate-animate)
+    - [Parallax `<Parallax />`](#parallax-parallax)
     - [`WriteOn <WriteOn />`](#writeon-writeon)
     - [`ColorWipe <ColorWipe />`](#colorwipe-colorwipe)
 - [Animations](#animations)
@@ -24,6 +26,8 @@ Lightweight, zero-configuration react animation library.
     - [Create your own](#create-your-own)
 - [Hooks](#hooks)
     - [useUnmount](#useunmount)
+    - [useAnimation](#useanimation)
+    - [useScroll](#usescroll)
 
 ## Get started
 
@@ -42,7 +46,7 @@ import { Animate } from '@infinityfx/lively/animate';
 
 <Animate onMount>
     <div class="my-class">
-        Lorem ipsum enim amet consequat ut reprehenderit cupidatat et incididunt qui minim culpa. Dolor do laborum nulla pariatur tempor excepteur duis et ipsum. Eu commodo et esse exercitation laborum cupidatat incididunt elit reprehenderit id.
+        Lorem ipsum enim amet consequat ut reprehenderit cupidatat et incididunt qui minim culpa. Dolor do laborum nulla pariatur tempor excepteur duis et ipsum.
     </div>
 </Animate>
 ```
@@ -88,11 +92,44 @@ import { Morph } from '@infinityfx/lively';
 </Morph>
 ```
 
+## Reactivity
+
+Lively implements fully reactive animations using the [`useAnimation()`](#useanimation) and [`useScroll()`](#usescroll) hooks.
+
 ## Auto-animation
 
 ### Animate `<Animate />`
 
-Automatic animation based on pre-fab animations.
+Fully automatic animation based on pre-fab animations.
+
+```jsx
+import { Animate } from '@infinityfx/lively/animate';
+import { Scale, Fade } from '@infinityfx/lively/animations';
+
+...
+
+<Animate onMount animations={[Scale({ useLayout: true }), Fade]}>
+    <div class="my-class">
+        ...
+    </div>
+</Animate>
+```
+
+#### Parallax `<Parallax />`
+
+Easily create parallax motion based on page scroll position.
+
+```jsx
+import { Parallax } from '@infinityfx/lively/animate';
+
+...
+
+<Parallax amount={0.5}> // default amount = 0.5
+    <div class="my-class">
+        ...
+    </div>
+</Parallax>
+```
 
 ### WriteOn `<WriteOn />`
 
@@ -120,7 +157,7 @@ import { ColorWipe } from '@infinityfx/lively/animate';
 
 ### Overview
 
-Lively exports a submodule called animations which contains various pre-fab animations that can be used in tandem with the `<Animate />` component. 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.
+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.
 
 ```jsx
 import { Move } from '@infinityfx/lively/animations';
@@ -158,27 +195,90 @@ import { Animatable } from '@infinityfx/lively';
 
 ### Create your own
 
-If you whish to create your own pre-fab animation, you can do so by creating a function with the static method `use` attached to it. Furthmore adding support for extra configuration options, leads to the following structure:
+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.
 
 ```js
-import { Animation } from '@infinityfx/lively';
+import { Animation } from '@infinityfx/lively/animations';
 
-export default function myAnimation(options = {}) {
-    myAnimation.use = myAnimation.use.bind(myAnimation, options);
-    return myAnimation;
-}
+const myCustomAnimation = Animation.create((options) => {
 
-myAnimation.use = (options = {}) => {
+    // do whatever you want here.
 
-    // do whatever you want here
+    // This function must return an Array with 2 Objects, containing the animation properties and/or keyframes and the initial values for the animation respectively.
+    return [{ ... }, { ... }];
+});
 
-    // A new Animation takes two arguments, an object with values/keyframes to animate to and an object of initial values.
-    return new Animation({ ... }, { ... });
-}
+export default myCustomAnimation;
 ```
 
 ## Hooks
 
+Lively comes with a set of hooks that allow for the creation of complex reactive animations.
+
 ### useUnmount
 
-The useUnmount hook can be used to animate components that are being unmounted.
+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.
+
+```jsx
+import { useUnmount } from '@infinityfx/lively/hooks';
+import { Animatable } from '@infinityfx/lively';
+
+export default function Page() {
+
+    const [mounted, setMounted, ref] = useUnmount(true /* initial mounted value */);
+
+    return mounted &&
+        <Animatable ref={ref} onMount onUnmount>...</Animatable>;
+
+}
+```
+
+### useAnimation
+
+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.
+
+```jsx
+import { useEffect } from 'react';
+import { useAnimation } from '@infinityfx/lively/hooks';
+import { Animatable } from '@infinityfx/lively';
+
+export default function Page() {
+
+    const [value, setValue] = useAnimation(0 /* initial value */);
+
+    useEffect(() => {
+        setTimeout(() => setValue(1), 1000); // set the animation value to 1, 1 second after the component has mounted.
+    }, []);
+
+    return <Animatable animate={{
+        opacity: value
+    }}>...</Animatable>;
+
+}
+```
+
+Additionally you can provide an animation value with a function to transform the value to a more usable format for certain animation properties.
+
+```jsx
+const [value, setValue] = useAnimation(0 /* initial value */);
+
+return <Animatable animate={{
+    position: value(input => {
+        input /= 100; // example where the input value needs to be divided for the correct output format.
+
+        return { x: input, y: input }; // we return an object instead of a number for the position property.
+    })
+}}>...</Animatable>;
+```
+
+### useScroll
+
+The useScroll hook is an extension of the useAnimation hook which returns a reactive value that gives the current scroll position of the window.
+
+```jsx
+const value = useScroll();
+
+return <Animatable animate={{
+    opacity: value(val => val / document.body.scrollHeight) // gradually fade in element when scrolling the window
+}}>...</Animatable>;
+```

package/dist/cjs/animatable-415b0e20.js

@@ -0,0 +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"),u=require("@babel/runtime/helpers/defineProperty"),l=require("@babel/runtime/regenerator"),c=require("react"),p=require("./animation-c1347465.js"),f=require("./link-884ecbbe.js"),h=require("./helper-dfb168a5.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(u),E=d(l);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 C(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){x.default(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 A(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 D(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 q=function(e){g.default(k,e);var t,r,n,i,a,o,s,u,l,d=D(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 p.Keyframe(t.links),t.elements=[],t.children=[],t.level=0,t}return b.default(k,[{key:"parse",value:function(e){if(p.Animation.isAnimation(e))return e.use();if(!h.isObject(e))return null;var t={};for(var r in e){var n=e[r];f.Link.isLink(n)?this.links[r]=n.link(this.style.bind(this)):t[r]=n}return new p.AnimationClip(t,this.props.initial)}},{key:"style",value:function(){var e=this;cancelAnimationFrame(this.frame),this.frame=requestAnimationFrame((function(){var t,r=A(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=A(this.elements);try{for(t.s();!(e=t.n()).done;){var r=e.value;h.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),h.addEventListener("resize",this.resizeEventListener),t&&(this.scrollEventListener=this.onScroll.bind(this),h.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}),p.AnimationQueue.delay((function(){return e.onScroll()}),.001));case 5:case"end":return r.stop()}}),r)})))()}},{key:"componentDidUpdate",value:(l=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 l.apply(this,arguments)})},{key:"componentWillUnmount",value:function(){h.removeEventListener("scroll",this.scrollEventListener),h.removeEventListener("resize",this.resizeEventListener)}},{key:"inViewport",value:function(){var e=this,t=!0,r=!0;if(this.elements.forEach((function(n){var i=n.getBoundingClientRect().y;t=t&&i+n.clientHeight*(1-e.viewportMargin)<window.innerHeight,r=r&&i>window.innerHeight+n.clientHeight*e.viewportMargin})),!this.elements.length){var n,i=A(this.children);try{for(i.s();!(n=i.n()).done;){var a=n.value.animatable.inViewport(),o=y.default(a,2),s=o[0],u=o[1];t=t&&s,r=r&&u}}catch(e){i.e(e)}finally{i.f()}}return[t,r]}},{key:"onScroll",value:(u=m.default(E.default.mark((function e(){var t,r,n,i;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)),this.inView&&i&&(this.inView=!1,this.props.whileViewport&&this.play(this.props.whileViewport,{reverse:!0,immediate:!0}));case 6:case"end":return e.stop()}}),e,this)}))),function(){return u.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=p.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,u,l,c,f,h,d,v,y,m,w,b,g,k,L,x,j=this,C=arguments;return E.default.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(r=C.length>1&&void 0!==C[1]?C[1]:{},n=r.callback,i=r.reverse,a=void 0!==i&&i,o=r.immediate,s=void 0!==o&&o,u=r.cascade,l=void 0!==u&&u,c=r.groupAdjust,f=void 0===c?0:c,h=r.cascadeDelay,d=void 0===h?0:h,v=r.staggerDelay,y=void 0===v?0:v,!(this.props.parentLevel>0)||l){e.next=3;break}return e.abrupt("return");case 3:if(m="string"==typeof t?this.animations[t]:this.animations.default){e.next=6;break}return e.abrupt("return");case 6:w=0,this.elements.forEach((function(e,t){var r="group"in j.props?j.props.parentLevel-j.props.group:j.level+f;d=a?m.duration:d;var n=a?r*d:(j.props.parentLevel-r)*d;n=j.props.stagger*t+n+y,w=n>w?n:w,m.play(e,{delay:n,reverse:a,immediate:s})})),b=A(this.children);try{for(b.s();!(g=b.n()).done;)k=g.value,L=k.animatable,x=k.staggerIndex,L.play(t,{reverse:a,immediate:s,cascade:!0,staggerDelay:x<0?0:this.props.stagger*x,cascadeDelay:m.duration,groupAdjust:x<0?0:1})}catch(e){b.e(e)}finally{b.f()}n&&p.AnimationQueue.delay(n,w+m.duration);case 11: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=C(C({},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]=C(C({},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,u=n.useEvents,l=void 0===u||u;if(!c.isValidElement(e))return e;var p={};if(e.type===k||e.type.prototype instanceof k||(s&&(p={ref:function(e){return r.elements[a]=e}}),l&&(this.props.parentLevel<1||this.props.noCascade)&&(p=C(C({},p),{},{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)}}),l=!1)),(e.type===k||e.type.prototype instanceof k)&&(null===(t=e.props)||void 0===t||!t.noCascade)){var f=this.childrenIndex++;p=C(C(C({},p),this.mergeProperties(e.props,this.props)),{},{parentLevel:this.parentLevel>0?this.parentLevel:this.level,ref:function(e){return r.children[f]={animatable:e,staggerIndex:s?a:-1}}})}var h=c.Children.map(e.props.children,(function(e,t){return r.deepClone(e,{index:t,useEvents:l})}));return c.cloneElement(e,p,h)}},{key:"countNestedLevels",value:function(e){var t=this;if(!e)return 0;var r=0,n=0;return c.Children.forEach(e,(function(e){var i;if(c.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,c.Children.map(t,(function(t,r){return e.deepClone(t,{index:r,useElements:!0})}))}}]),k}(c.Component);x.default(q,"defaultProps",{parentLevel:0,stagger:.1,viewportMargin:.25,animate:{},animations:{}}),exports.Animatable=q;

package/dist/cjs/animate.js

@@ -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-af96fb98.js"),c=require("./pop-241f383a.js"),p=require("./helper-dfb168a5.js"),f=require("@babel/runtime/helpers/toConsumableArray"),d=require("./scroll-fd4c118f.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-c1347465.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;
+"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-415b0e20.js"),c=require("./pop-241f383a.js"),p=require("./helper-dfb168a5.js"),f=require("@babel/runtime/helpers/toConsumableArray"),d=require("./scroll-fd4c118f.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-c1347465.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;

package/dist/cjs/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./animatable-af96fb98.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-c1347465.js"),h=require("./helper-dfb168a5.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;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./animatable-415b0e20.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-c1347465.js"),h=require("./helper-dfb168a5.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;

package/dist/esm/animatable-19e75c27.js

@@ -0,0 +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 u from"@babel/runtime/helpers/defineProperty";import l 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-9ea0228d.js";import{L as w}from"./link-67981677.js";import{i as b,c as g,a as k,r as x}from"./helper-6ed90764.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){u(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 E(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 E(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 E(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 A(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,u,L,E,C,D,F,P,M,V=A(R);function R(e){var t;n(this,R),(t=V.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 u in t.links={duration:i,interpolate:o,origin:s,useLayout:a},t.animations={default:t.parse(t.props.animate)},t.props.animations)t.animations[u]=t.parse(t.props.animations[u]);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(!b(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;g(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(l.mark((function r(){return l.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(l.mark((function e(){return l.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=this,r=!0,n=!0;if(this.elements.forEach((function(t){var i=t.getBoundingClientRect().y;r=r&&i+t.clientHeight*(1-e.viewportMargin)<window.innerHeight,n=n&&i>window.innerHeight+t.clientHeight*e.viewportMargin})),!this.elements.length){var i,o=O(this.children);try{for(o.s();!(i=o.n()).done;){var s=i.value.animatable.inViewport(),a=t(s,2),u=a[0],l=a[1];r=r&&u,n=n&&l}}catch(e){o.e(e)}finally{o.f()}}return[r,n]}},{key:"onScroll",value:(P=r(l.mark((function e(){var r,n,i,o;return l.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)),this.inView&&o&&(this.inView=!1,this.props.whileViewport&&this.play(this.props.whileViewport,{reverse:!0,immediate:!0}));case 6:case"end":return e.stop()}}),e,this)}))),function(){return P.apply(this,arguments)})},{key:"onResize",value:(F=r(l.mark((function e(){var t;return l.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(l.mark((function e(t){var r,n=arguments;return l.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(l.mark((function e(t){var r,n=arguments;return l.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:(E=r(l.mark((function e(t){var r,n=arguments;return l.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 E.apply(this,arguments)})},{key:"onBlur",value:(L=r(l.mark((function e(t){var r,n=arguments;return l.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:(u=r(l.mark((function e(t){var r,n=arguments;return l.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 u.apply(this,arguments)})},{key:"play",value:(a=r(l.mark((function e(t){var r,n,i,o,s,a,u,p,c,h,f,v,d,m,w,b,g,k,x,L,j,E=this,A=arguments;return l.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(r=A.length>1&&void 0!==A[1]?A[1]:{},n=r.callback,i=r.reverse,o=void 0!==i&&i,s=r.immediate,a=void 0!==s&&s,u=r.cascade,p=void 0!==u&&u,c=r.groupAdjust,h=void 0===c?0:c,f=r.cascadeDelay,v=void 0===f?0:f,d=r.staggerDelay,m=void 0===d?0:d,!(this.props.parentLevel>0)||p){e.next=3;break}return e.abrupt("return");case 3:if(w="string"==typeof t?this.animations[t]:this.animations.default){e.next=6;break}return e.abrupt("return");case 6:b=0,this.elements.forEach((function(e,t){var r="group"in E.props?E.props.parentLevel-E.props.group:E.level+h;v=o?w.duration:v;var n=o?r*v:(E.props.parentLevel-r)*v;n=E.props.stagger*t+n+m,b=n>b?n:b,w.play(e,{delay:n,reverse:o,immediate:a})})),g=O(this.children);try{for(g.s();!(k=g.n()).done;)x=k.value,L=x.animatable,j=x.staggerIndex,L.play(t,{reverse:o,immediate:a,cascade:!0,staggerDelay:j<0?0:this.props.stagger*j,cascadeDelay:w.duration,groupAdjust:j<0?0:1})}catch(e){g.e(e)}finally{g.f()}n&&y.delay(n,b+w.duration);case 11: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,u=n.useEvents,l=void 0===u||u;if(!p(e))return e;var f={};if(e.type===R||e.type.prototype instanceof R||(a&&(f={ref:function(e){return r.elements[o]=e}}),l&&(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)}}),l=!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:l})}));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}();u(C,"defaultProps",{parentLevel:0,stagger:.1,viewportMargin:.25,animate:{},animations:{}});export{C as A};

package/dist/esm/animate.js

@@ -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 c,isValidElement as p,cloneElement as u,Component as m,useRef as f}from"react";import{A as b}from"./animatable-0f9adc1c.js";import{M as h,P as y}from"./pop-ee3fdaef.js";import{p as v}from"./helper-6ed90764.js";import d from"@babel/runtime/helpers/toConsumableArray";import{u as g}from"./scroll-84c1f46b.js";import"@babel/runtime/helpers/typeof";import"@babel/runtime/helpers/slicedToArray";import"@babel/runtime/helpers/asyncToGenerator";import"@babel/runtime/regenerator";import"./animation-9ea0228d.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};
+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-19e75c27.js";import{M as h,P as y}from"./pop-ee3fdaef.js";import{p as v}from"./helper-6ed90764.js";import d from"@babel/runtime/helpers/toConsumableArray";import{u as g}from"./scroll-84c1f46b.js";import"@babel/runtime/helpers/typeof";import"@babel/runtime/helpers/slicedToArray";import"@babel/runtime/helpers/asyncToGenerator";import"@babel/runtime/regenerator";import"./animation-9ea0228d.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};

package/dist/esm/index.js

@@ -1 +1 @@
-import{A as t}from"./animatable-0f9adc1c.js";export{A as Animatable}from"./animatable-0f9adc1c.js";import e from"@babel/runtime/helpers/asyncToGenerator";import r from"@babel/runtime/helpers/classCallCheck";import i from"@babel/runtime/helpers/createClass";import n from"@babel/runtime/helpers/get";import o from"@babel/runtime/helpers/inherits";import a from"@babel/runtime/helpers/possibleConstructorReturn";import s from"@babel/runtime/helpers/getPrototypeOf";import p from"@babel/runtime/helpers/defineProperty";import u from"@babel/runtime/regenerator";import{Children as l,isValidElement as h,cloneElement as c}from"react";import{A as f,a as m}from"./animation-9ea0228d.js";import{c as y,l as d,i as v}from"./helper-6ed90764.js";import"@babel/runtime/helpers/typeof";import"@babel/runtime/helpers/slicedToArray";import"./link-67981677.js";import"@babel/runtime/helpers/objectWithoutProperties";function b(t,e){var r="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!r){if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return g(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return g(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var i=0,n=function(){};return{s:n,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},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(t)},n:function(){var t=r.next();return a=t.done,t},e:function(t){s=!0,o=t},f:function(){try{a||null==r.return||r.return()}finally{if(s)throw o}}}}function g(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,i=new Array(e);r<e;r++)i[r]=t[r];return i}function x(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.push.apply(r,i)}return r}function w(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?x(Object(r),!0).forEach((function(e){p(t,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):x(Object(r)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))}))}return t}function k(t){var e=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(t){return!1}}();return function(){var r,i=s(t);if(e){var n=s(this).constructor;r=Reflect.construct(i,arguments,n)}else r=i.apply(this,arguments);return a(this,r)}}var S=function(a){o(S,t);var p,g,x,A=k(S);function S(t){var e,i,n;return r(this,S),(n=A.call(this,t)).properties=n.props.properties||["position","scale","opacity","backgroundColor","color","interact","zIndex"],!n.props.properties&&n.props.useLayout&&n.properties.push("borderRadius","fontSize"),n.parent=(null===(e=(i=n.props).parent)||void 0===e?void 0:e.call(i))||{group:""},n.group=n.parent.group+n.props.group,n.useLayout=!1,n.childStyles={pointerEvents:"initial"},n.parentStyles={background:"transparent",border:"none",padding:0,pointerEvents:"none",backdropFilter:"none",boxShadow:"unset",fontSize:"unset",zIndex:"unset"},n}return i(S,[{key:"layout",value:function(){this.position=this.position||getComputedStyle(this.element).position;var t=w(w({},this.parentStyles),{},{width:this.element.offsetWidth,height:this.element.offsetHeight});"absolute"===this.position||"fixed"===this.position?t.position="absolute":(t.position="relative",this.childStyles=w(w({},this.childStyles),{},{position:"absolute",margin:0,top:0,left:0})),this.parentStyles=t,this.useLayout=!0,this.hasUpdated=!0,this.forceUpdate()}},{key:"update",value:(x=e(u.mark((function t(){var e,r,i,n,o,a,s,p,l=arguments;return u.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(e=l.length>0&&void 0!==l[0]?l[0]:{},r=e.mount,i=void 0===r?!this.useLayout:r,n=e.active,o=void 0===n?this.props.active:n,this.element=this.elements[0],this.element){t.next=4;break}return t.abrupt("return");case 4:if(!this.props.useLayout||!i){t.next=6;break}return t.abrupt("return",this.layout());case 6:if(!this.element.Lively||this.hasUpdated){t.next=8;break}return t.abrupt("return");case 8:if(y(this.element),this.hasUpdated=!1,!this.parent.props){t.next=12;break}return t.abrupt("return");case 12:return t.next=14,f.sleep(.001);case 14:this.setUniqueId(),this.animations={default:this.unmorphAnimation()},o||this.animations.default.initial(this.element),a=b(this.children);try{for(a.s();!(s=a.n()).done;)(p=s.value.animatable).setUniqueId(),p.animations={default:p.unmorphAnimation()},o||p.animations.default.initial(p.element)}catch(t){a.e(t)}finally{a.f()}case 19:case"end":return t.stop()}}),t,this)}))),function(){return x.apply(this,arguments)})},{key:"setUniqueId",value:function(){this.parent.id&&(this.id=this.parent.id),"id"in this||(d("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:(g=e(u.mark((function t(e){return u.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,this.update({mount:!1,active:e.active});case 2:e.active!==this.props.active&&this.morph(this.props.active);case 3:case"end":return t.stop()}}),t,this)}))),function(t){return g.apply(this,arguments)})},{key:"morph",value:(p=e(u.mark((function t(e){var r,i;return u.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return e&&this.element.setAttribute("lively-morph-target",!0),t.next=3,f.sleep(.001);case 3:e?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 t.stop()}}),t,this)}))),function(t){return p.apply(this,arguments)})},{key:"createAnimations",value:function(t){var e=document.querySelector('[lively-morph-group="'.concat(this.group,'"][lively-morph-id="').concat(t,'"]'));this.animations[t]=this.morphAnimation(this.element,e);var r,i=b(this.children);try{for(i.s();!(r=i.n()).done;){r.value.animatable.createAnimations(t)}}catch(t){i.e(t)}finally{i.f()}}},{key:"animationFromKeyframes",value:function(t){var e,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=b(this.properties);try{var a=function(){var o=e.value;if(r.props.ignore.includes(o))return"continue";var a=o in t?o:"auto";if(!(a in t))return"continue";n[o]=t[a].map((function(t){if(!v(t))return t in i?i[t][o]:t;var e={};for(var r in t)t[r]in i?e[r]=i[t[r]][o]:e[r]=t[r];return e}))};for(o.s();!(e=o.n()).done;)a()}catch(t){o.e(t)}finally{o.f()}return new m(n)}},{key:"morphAnimation",value:function(t,e){var r,i;return e?(t=null===(r=t.Lively)||void 0===r?void 0:r.initials,e=null===(i=e.Lively)||void 0===i?void 0:i.initials,this.x=e.x-t.x,this.y=e.y-t.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:w(w({},t),{},{position:{x:0,y:0},scale:{x:1,y:1}}),to:w(w({},e),{},{position:{x:this.x,y:this.y},scale:{x:parseInt(e.width)/parseInt(t.width),y:parseInt(e.height)/parseInt(t.height)}})})):this.animationFromKeyframes({opacity:[1,0,0],interact:[!0,!1,!1]})}},{key:"unmorphAnimation",value:function(){var t=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",t.zIndex+1,{set:t.zIndex+1,end:"from"}]},{from:t})}},{key:"getChildren",value:function(t){var e=this;return l.map(t,(function(t){if(!h(t))return t;var r=t.type!==S?{}:{parent:function(){return e},duration:e.props.duration};return c(t,r,e.getChildren(t.props.children))}))}},{key:"render",value:function(){var t,e=null!==(t=this.props.children)&&void 0!==t&&t.length?this.props.children[0]:this.props.children;if(!h(e))return e;var r=this.getChildren(e.props.children),i={"lively-morph-group":this.group,style:w(w({},e.props.style),this.childStyles)},o=n(s(S.prototype),"render",this).call(this,c(e,i,r));return this.useLayout?c(e,{style:this.parentStyles},o):o}}]),S}();p(S,"defaultProps",{group:0,active:!1,useLayout:!1,interpolate:"ease",duration:1.5,ignore:[]});export{S as Morph};
+import{A as t}from"./animatable-19e75c27.js";export{A as Animatable}from"./animatable-19e75c27.js";import e from"@babel/runtime/helpers/asyncToGenerator";import r from"@babel/runtime/helpers/classCallCheck";import i from"@babel/runtime/helpers/createClass";import n from"@babel/runtime/helpers/get";import o from"@babel/runtime/helpers/inherits";import a from"@babel/runtime/helpers/possibleConstructorReturn";import s from"@babel/runtime/helpers/getPrototypeOf";import p from"@babel/runtime/helpers/defineProperty";import u from"@babel/runtime/regenerator";import{Children as l,isValidElement as h,cloneElement as c}from"react";import{A as f,a as m}from"./animation-9ea0228d.js";import{c as y,l as d,i as v}from"./helper-6ed90764.js";import"@babel/runtime/helpers/typeof";import"@babel/runtime/helpers/slicedToArray";import"./link-67981677.js";import"@babel/runtime/helpers/objectWithoutProperties";function b(t,e){var r="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!r){if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return g(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return g(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var i=0,n=function(){};return{s:n,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},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(t)},n:function(){var t=r.next();return a=t.done,t},e:function(t){s=!0,o=t},f:function(){try{a||null==r.return||r.return()}finally{if(s)throw o}}}}function g(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,i=new Array(e);r<e;r++)i[r]=t[r];return i}function x(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.push.apply(r,i)}return r}function w(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?x(Object(r),!0).forEach((function(e){p(t,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):x(Object(r)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))}))}return t}function k(t){var e=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(t){return!1}}();return function(){var r,i=s(t);if(e){var n=s(this).constructor;r=Reflect.construct(i,arguments,n)}else r=i.apply(this,arguments);return a(this,r)}}var S=function(a){o(S,t);var p,g,x,A=k(S);function S(t){var e,i,n;return r(this,S),(n=A.call(this,t)).properties=n.props.properties||["position","scale","opacity","backgroundColor","color","interact","zIndex"],!n.props.properties&&n.props.useLayout&&n.properties.push("borderRadius","fontSize"),n.parent=(null===(e=(i=n.props).parent)||void 0===e?void 0:e.call(i))||{group:""},n.group=n.parent.group+n.props.group,n.useLayout=!1,n.childStyles={pointerEvents:"initial"},n.parentStyles={background:"transparent",border:"none",padding:0,pointerEvents:"none",backdropFilter:"none",boxShadow:"unset",fontSize:"unset",zIndex:"unset"},n}return i(S,[{key:"layout",value:function(){this.position=this.position||getComputedStyle(this.element).position;var t=w(w({},this.parentStyles),{},{width:this.element.offsetWidth,height:this.element.offsetHeight});"absolute"===this.position||"fixed"===this.position?t.position="absolute":(t.position="relative",this.childStyles=w(w({},this.childStyles),{},{position:"absolute",margin:0,top:0,left:0})),this.parentStyles=t,this.useLayout=!0,this.hasUpdated=!0,this.forceUpdate()}},{key:"update",value:(x=e(u.mark((function t(){var e,r,i,n,o,a,s,p,l=arguments;return u.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(e=l.length>0&&void 0!==l[0]?l[0]:{},r=e.mount,i=void 0===r?!this.useLayout:r,n=e.active,o=void 0===n?this.props.active:n,this.element=this.elements[0],this.element){t.next=4;break}return t.abrupt("return");case 4:if(!this.props.useLayout||!i){t.next=6;break}return t.abrupt("return",this.layout());case 6:if(!this.element.Lively||this.hasUpdated){t.next=8;break}return t.abrupt("return");case 8:if(y(this.element),this.hasUpdated=!1,!this.parent.props){t.next=12;break}return t.abrupt("return");case 12:return t.next=14,f.sleep(.001);case 14:this.setUniqueId(),this.animations={default:this.unmorphAnimation()},o||this.animations.default.initial(this.element),a=b(this.children);try{for(a.s();!(s=a.n()).done;)(p=s.value.animatable).setUniqueId(),p.animations={default:p.unmorphAnimation()},o||p.animations.default.initial(p.element)}catch(t){a.e(t)}finally{a.f()}case 19:case"end":return t.stop()}}),t,this)}))),function(){return x.apply(this,arguments)})},{key:"setUniqueId",value:function(){this.parent.id&&(this.id=this.parent.id),"id"in this||(d("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:(g=e(u.mark((function t(e){return u.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,this.update({mount:!1,active:e.active});case 2:e.active!==this.props.active&&this.morph(this.props.active);case 3:case"end":return t.stop()}}),t,this)}))),function(t){return g.apply(this,arguments)})},{key:"morph",value:(p=e(u.mark((function t(e){var r,i;return u.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return e&&this.element.setAttribute("lively-morph-target",!0),t.next=3,f.sleep(.001);case 3:e?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 t.stop()}}),t,this)}))),function(t){return p.apply(this,arguments)})},{key:"createAnimations",value:function(t){var e=document.querySelector('[lively-morph-group="'.concat(this.group,'"][lively-morph-id="').concat(t,'"]'));this.animations[t]=this.morphAnimation(this.element,e);var r,i=b(this.children);try{for(i.s();!(r=i.n()).done;){r.value.animatable.createAnimations(t)}}catch(t){i.e(t)}finally{i.f()}}},{key:"animationFromKeyframes",value:function(t){var e,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=b(this.properties);try{var a=function(){var o=e.value;if(r.props.ignore.includes(o))return"continue";var a=o in t?o:"auto";if(!(a in t))return"continue";n[o]=t[a].map((function(t){if(!v(t))return t in i?i[t][o]:t;var e={};for(var r in t)t[r]in i?e[r]=i[t[r]][o]:e[r]=t[r];return e}))};for(o.s();!(e=o.n()).done;)a()}catch(t){o.e(t)}finally{o.f()}return new m(n)}},{key:"morphAnimation",value:function(t,e){var r,i;return e?(t=null===(r=t.Lively)||void 0===r?void 0:r.initials,e=null===(i=e.Lively)||void 0===i?void 0:i.initials,this.x=e.x-t.x,this.y=e.y-t.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:w(w({},t),{},{position:{x:0,y:0},scale:{x:1,y:1}}),to:w(w({},e),{},{position:{x:this.x,y:this.y},scale:{x:parseInt(e.width)/parseInt(t.width),y:parseInt(e.height)/parseInt(t.height)}})})):this.animationFromKeyframes({opacity:[1,0,0],interact:[!0,!1,!1]})}},{key:"unmorphAnimation",value:function(){var t=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",t.zIndex+1,{set:t.zIndex+1,end:"from"}]},{from:t})}},{key:"getChildren",value:function(t){var e=this;return l.map(t,(function(t){if(!h(t))return t;var r=t.type!==S?{}:{parent:function(){return e},duration:e.props.duration};return c(t,r,e.getChildren(t.props.children))}))}},{key:"render",value:function(){var t,e=null!==(t=this.props.children)&&void 0!==t&&t.length?this.props.children[0]:this.props.children;if(!h(e))return e;var r=this.getChildren(e.props.children),i={"lively-morph-group":this.group,style:w(w({},e.props.style),this.childStyles)},o=n(s(S.prototype),"render",this).call(this,c(e,i,r));return this.useLayout?c(e,{style:this.parentStyles},o):o}}]),S}();p(S,"defaultProps",{group:0,active:!1,useLayout:!1,interpolate:"ease",duration:1.5,ignore:[]});export{S as Morph};

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@infinityfx/lively",
-	"version": "1.0.0",
-	"description": "Zero configuration, performant react animation library",
+	"version": "1.0.1",
+	"description": "Feature complete, lightweight react animation library.",
 	"main": "dist/cjs/index.js",
 	"module": "dist/esm/index.js",
 	"types": "./types/index.d.ts",
@@ -38,10 +38,14 @@
 	"funding": "https://ko-fi.com/infinityfx",
 	"keywords": [
 		"animation",
+		"keyframe",
 		"react",
 		"transition",
 		"morph",
-		"animate"
+		"animate",
+		"reactive",
+		"lightweight",
+		"performant"
 	],
 	"scripts": {
 		"build": "rollup -c --environment NODE_ENV:production",

package/dist/cjs/animatable-af96fb98.js

@@ -1 +0,0 @@
-"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"),u=require("@babel/runtime/helpers/defineProperty"),l=require("@babel/runtime/regenerator"),c=require("react"),p=require("./animation-c1347465.js"),f=require("./link-884ecbbe.js"),h=require("./helper-dfb168a5.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(u),E=d(l);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 C(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){x.default(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 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 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 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 D(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 q=function(e){g.default(k,e);var t,r,n,i,a,o,s,u,l,d=D(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 p.Keyframe(t.links),t.elements=[],t.children=[],t.level=0,t}return b.default(k,[{key:"parse",value:function(e){if(p.Animation.isAnimation(e))return e.use();if(!h.isObject(e))return null;var t={};for(var r in e){var n=e[r];f.Link.isLink(n)?this.links[r]=n.link(this.style.bind(this)):t[r]=n}return new p.AnimationClip(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;h.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),h.addEventListener("resize",this.resizeEventListener),t&&(this.scrollEventListener=this.onScroll.bind(this),h.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}),e.onScroll());case 5:case"end":return r.stop()}}),r)})))()}},{key:"componentDidUpdate",value:(l=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 l.apply(this,arguments)})},{key:"componentWillUnmount",value:function(){h.removeEventListener("scroll",this.scrollEventListener),h.removeEventListener("resize",this.resizeEventListener)}},{key:"inViewport",value:function(){var e=this,t=!0,r=!0;if(this.elements.forEach((function(n){var i=n.getBoundingClientRect().y;t=t&&i+n.clientHeight*(1-e.viewportMargin)<window.innerHeight,r=r&&i>window.innerHeight+n.clientHeight*e.viewportMargin})),!this.elements.length){var n,i=O(this.children);try{for(i.s();!(n=i.n()).done;){var a=n.value.animatable.inViewport(),o=y.default(a,2),s=o[0],u=o[1];t=t&&s,r=r&&u}}catch(e){i.e(e)}finally{i.f()}}return[t,r]}},{key:"onScroll",value:(u=m.default(E.default.mark((function e(){var t,r,n,i;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)),this.inView&&i&&(this.inView=!1,this.props.whileViewport&&this.play(this.props.whileViewport,{reverse:!0,immediate:!0}));case 6:case"end":return e.stop()}}),e,this)}))),function(){return u.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=p.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,u,l,c,f,h,d,v,y,m,w,b,g,k,L,x,j=this,C=arguments;return E.default.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(r=C.length>1&&void 0!==C[1]?C[1]:{},n=r.callback,i=r.reverse,a=void 0!==i&&i,o=r.immediate,s=void 0!==o&&o,u=r.cascade,l=void 0!==u&&u,c=r.groupAdjust,f=void 0===c?0:c,h=r.cascadeDelay,d=void 0===h?0:h,v=r.staggerDelay,y=void 0===v?0:v,!(this.props.parentLevel>0)||l){e.next=3;break}return e.abrupt("return");case 3:if(m="string"==typeof t?this.animations[t]:this.animations.default){e.next=6;break}return e.abrupt("return");case 6:w=0,this.elements.forEach((function(e,t){var r="group"in j.props?j.props.parentLevel-j.props.group:j.level+f;d=a?m.duration:d;var n=a?r*d:(j.props.parentLevel-r)*d;n=j.props.stagger*t+n+y,w=n>w?n:w,m.play(e,{delay:n,reverse:a,immediate:s})})),b=O(this.children);try{for(b.s();!(g=b.n()).done;)k=g.value,L=k.animatable,x=k.staggerIndex,L.play(t,{reverse:a,immediate:s,cascade:!0,staggerDelay:x<0?0:this.props.stagger*x,cascadeDelay:m.duration,groupAdjust:x<0?0:1})}catch(e){b.e(e)}finally{b.f()}n&&p.AnimationQueue.delay(n,w+m.duration);case 11: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=C(C({},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]=C(C({},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,u=n.useEvents,l=void 0===u||u;if(!c.isValidElement(e))return e;var p={};if(e.type===k||e.type.prototype instanceof k||(s&&(p={ref:function(e){return r.elements[a]=e}}),l&&(this.props.parentLevel<1||this.props.noCascade)&&(p=C(C({},p),{},{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)}}),l=!1)),(e.type===k||e.type.prototype instanceof k)&&(null===(t=e.props)||void 0===t||!t.noCascade)){var f=this.childrenIndex++;p=C(C(C({},p),this.mergeProperties(e.props,this.props)),{},{parentLevel:this.parentLevel>0?this.parentLevel:this.level,ref:function(e){return r.children[f]={animatable:e,staggerIndex:s?a:-1}}})}var h=c.Children.map(e.props.children,(function(e,t){return r.deepClone(e,{index:t,useEvents:l})}));return c.cloneElement(e,p,h)}},{key:"countNestedLevels",value:function(e){var t=this;if(!e)return 0;var r=0,n=0;return c.Children.forEach(e,(function(e){var i;if(c.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,c.Children.map(t,(function(t,r){return e.deepClone(t,{index:r,useElements:!0})}))}}]),k}(c.Component);x.default(q,"defaultProps",{parentLevel:0,stagger:.1,viewportMargin:.25,animate:{},animations:{}}),exports.Animatable=q;

package/dist/esm/animatable-0f9adc1c.js

@@ -1 +0,0 @@
-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 u from"@babel/runtime/helpers/defineProperty";import l 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-9ea0228d.js";import{L as w}from"./link-67981677.js";import{i as b,c as g,a as k,r as x}from"./helper-6ed90764.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){u(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 E(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 E(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 E(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 A(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,u,L,E,C,D,F,P,M,V=A(R);function R(e){var t;n(this,R),(t=V.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 u in t.links={duration:i,interpolate:o,origin:s,useLayout:a},t.animations={default:t.parse(t.props.animate)},t.props.animations)t.animations[u]=t.parse(t.props.animations[u]);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(!b(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;g(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(l.mark((function r(){return l.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}),e.onScroll());case 5:case"end":return r.stop()}}),r)})))()}},{key:"componentDidUpdate",value:(M=r(l.mark((function e(){return l.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=this,r=!0,n=!0;if(this.elements.forEach((function(t){var i=t.getBoundingClientRect().y;r=r&&i+t.clientHeight*(1-e.viewportMargin)<window.innerHeight,n=n&&i>window.innerHeight+t.clientHeight*e.viewportMargin})),!this.elements.length){var i,o=O(this.children);try{for(o.s();!(i=o.n()).done;){var s=i.value.animatable.inViewport(),a=t(s,2),u=a[0],l=a[1];r=r&&u,n=n&&l}}catch(e){o.e(e)}finally{o.f()}}return[r,n]}},{key:"onScroll",value:(P=r(l.mark((function e(){var r,n,i,o;return l.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)),this.inView&&o&&(this.inView=!1,this.props.whileViewport&&this.play(this.props.whileViewport,{reverse:!0,immediate:!0}));case 6:case"end":return e.stop()}}),e,this)}))),function(){return P.apply(this,arguments)})},{key:"onResize",value:(F=r(l.mark((function e(){var t;return l.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(l.mark((function e(t){var r,n=arguments;return l.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(l.mark((function e(t){var r,n=arguments;return l.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:(E=r(l.mark((function e(t){var r,n=arguments;return l.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 E.apply(this,arguments)})},{key:"onBlur",value:(L=r(l.mark((function e(t){var r,n=arguments;return l.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:(u=r(l.mark((function e(t){var r,n=arguments;return l.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 u.apply(this,arguments)})},{key:"play",value:(a=r(l.mark((function e(t){var r,n,i,o,s,a,u,p,c,h,f,v,d,m,w,b,g,k,x,L,j,E=this,A=arguments;return l.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(r=A.length>1&&void 0!==A[1]?A[1]:{},n=r.callback,i=r.reverse,o=void 0!==i&&i,s=r.immediate,a=void 0!==s&&s,u=r.cascade,p=void 0!==u&&u,c=r.groupAdjust,h=void 0===c?0:c,f=r.cascadeDelay,v=void 0===f?0:f,d=r.staggerDelay,m=void 0===d?0:d,!(this.props.parentLevel>0)||p){e.next=3;break}return e.abrupt("return");case 3:if(w="string"==typeof t?this.animations[t]:this.animations.default){e.next=6;break}return e.abrupt("return");case 6:b=0,this.elements.forEach((function(e,t){var r="group"in E.props?E.props.parentLevel-E.props.group:E.level+h;v=o?w.duration:v;var n=o?r*v:(E.props.parentLevel-r)*v;n=E.props.stagger*t+n+m,b=n>b?n:b,w.play(e,{delay:n,reverse:o,immediate:a})})),g=O(this.children);try{for(g.s();!(k=g.n()).done;)x=k.value,L=x.animatable,j=x.staggerIndex,L.play(t,{reverse:o,immediate:a,cascade:!0,staggerDelay:j<0?0:this.props.stagger*j,cascadeDelay:w.duration,groupAdjust:j<0?0:1})}catch(e){g.e(e)}finally{g.f()}n&&y.delay(n,b+w.duration);case 11: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,u=n.useEvents,l=void 0===u||u;if(!p(e))return e;var f={};if(e.type===R||e.type.prototype instanceof R||(a&&(f={ref:function(e){return r.elements[o]=e}}),l&&(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)}}),l=!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:l})}));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}();u(C,"defaultProps",{parentLevel:0,stagger:.1,viewportMargin:.25,animate:{},animations:{}});export{C as A};