@lottiefiles/lottie-interactivity - npm Package Compare versions

Comparing version 1.3.4 to 1.3.5-beta.0

CHANGELOG.md

@@ -6,2 +6,53 @@ # Changelog
 
+## [1.5.1](https://github.com/LottieFiles/lottie-interactivity/compare/v1.5.0...v1.5.1) (2022-04-26)
+
+
+### Bug Fixes
+
+* fixed autoplay not being removed after onComplete transition ([c2ba40d](https://github.com/LottieFiles/lottie-interactivity/commit/c2ba40d5553133c9dd56c06508338ef6d853ba1a))
+* fixed forceflag not working on click ([fc4f818](https://github.com/LottieFiles/lottie-interactivity/commit/fc4f8183de8aa40b86aa42fd884eb1ce5148264e))
+
+# [1.5.0](https://github.com/LottieFiles/lottie-interactivity/compare/v1.4.0...v1.5.0) (2022-04-12)
+
+
+### Features
+
+* added jumptToInteraction method ([8def8b5](https://github.com/LottieFiles/lottie-interactivity/commit/8def8b503aad95c8156d729057b896c93dd32d66))
+
+# [1.4.0](https://github.com/LottieFiles/lottie-interactivity/compare/v1.3.8...v1.4.0) (2022-04-12)
+
+
+### Features
+
+* made nextInteraction method public ([642a64d](https://github.com/LottieFiles/lottie-interactivity/commit/642a64dc97c8a1eda969f3d7c3cf2e30bc0b9451))
+
+## [1.3.8](https://github.com/LottieFiles/lottie-interactivity/compare/v1.3.7...v1.3.8) (2022-03-16)
+
+
+### Bug Fixes
+
+* added fixes to click and hold transitions ([43eb8c5](https://github.com/LottieFiles/lottie-interactivity/commit/43eb8c514e29369535b4c2906976717399d86e51))
+
+## [1.3.7](https://github.com/LottieFiles/lottie-interactivity/compare/v1.3.6...v1.3.7) (2022-03-07)
+
+
+### Bug Fixes
+
+* fixed container null issue on wordpress ([fa0e5e7](https://github.com/LottieFiles/lottie-interactivity/commit/fa0e5e7b2128cf1c59cd7aa3385d43d535f72a8b))
+
+## [1.3.6](https://github.com/LottieFiles/lottie-interactivity/compare/v1.3.5...v1.3.6) (2022-02-21)
+
+
+### Bug Fixes
+
+* fixed error when player is destroyed and redefineOptions is called ([7d2c4e3](https://github.com/LottieFiles/lottie-interactivity/commit/7d2c4e31db3bca7fde206c9c77debaaeebcd6b3c))
+
+## [1.3.5](https://github.com/LottieFiles/lottie-interactivity/compare/v1.3.4...v1.3.5) (2022-02-17)
+
+
+### Bug Fixes
+
+* added usecapture to scroll listener ([763cc37](https://github.com/LottieFiles/lottie-interactivity/commit/763cc37d471c13792a86a57aedd271f137f9d836))
+* changed way window is used ([9a6e7b9](https://github.com/LottieFiles/lottie-interactivity/commit/9a6e7b9a5efcb0dd3cb7fe23b89d2cfbe110e5ac))
+
 ## [1.3.4](https://github.com/LottieFiles/lottie-interactivity/compare/v1.3.3...v1.3.4) (2022-02-01)
@@ -8,0 +59,0 @@

dist/lottie-interactivity.es.js

@@ -1,2 +0,2 @@
-function e(t){return(e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(t)}function t(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function n(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function i(e,t){if(null==e)return{};var n,i,a=function(e,t){if(null==e)return{};var n,i,a={},r=Object.keys(e);for(i=0;i<r.length;i++)n=r[i],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(i=0;i<r.length;i++)n=r[i],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}function a(e,t){var n=t.get(e);if(!n)throw new TypeError("attempted to get private field on non-instance");return n.get?n.get.call(e):n.value}var r={player:"lottie-player"},o="[lottieInteractivity]:",s=function(){function s(){var n=this,M=arguments.length>0&&void 0!==arguments[0]?arguments[0]:r,C=M.actions,A=M.container,T=M.mode,H=M.player,O=i(M,["actions","container","mode","player"]);if(t(this,s),l.set(this,{writable:!0,value:function(){if(n.player){var e=function(){n.player.addEventListener("enterFrame",a(n,L)),n.container.addEventListener("mouseenter",a(n,g)),n.container.addEventListener("mouseleave",a(n,E)),n.container.addEventListener("touchstart",a(n,g),{passive:!0}),n.container.addEventListener("touchend",a(n,E),{passive:!0})};n.stateHandler.set("loop",(function(){n.actions[n.interactionIdx].loop?n.player.loop=parseInt(n.actions[n.interactionIdx].loop)-1:n.player.loop=!0,n.player.autoplay=!0})),n.stateHandler.set("autoplay",(function(){n.player.loop=!1,n.player.autoplay=!0})),n.stateHandler.set("click",(function(){n.player.loop=!1,n.player.autoplay=!1,n.container.addEventListener("click",a(n,c))})),n.stateHandler.set("hover",(function(){n.player.loop=!1,n.player.autoplay=!1,n.container.addEventListener("mouseenter",a(n,c)),n.container.addEventListener("touchstart",a(n,c),{passive:!0})})),n.transitionHandler.set("click",(function(){n.container.addEventListener("click",a(n,d))})),n.transitionHandler.set("hover",(function(){n.container.addEventListener("mouseenter",a(n,d)),n.container.addEventListener("touchstart",a(n,d),{passive:!0})})),n.transitionHandler.set("hold",e),n.transitionHandler.set("pauseHold",e),n.transitionHandler.set("repeat",(function(){n.player.loop=!0,n.player.autoplay=!0;n.player.addEventListener("loopComplete",(function e(){a(n,m).call(n,{handler:e})}))})),n.transitionHandler.set("onComplete",(function(){"loop"===n.actions[n.interactionIdx].state?n.player.addEventListener("loopComplete",a(n,v)):n.player.addEventListener("complete",a(n,v))})),n.transitionHandler.set("seek",(function(){n.player.stop(),n.player.addEventListener("enterFrame",a(n,f)),n.container.addEventListener("mousemove",a(n,h)),n.container.addEventListener("touchmove",a(n,y),{passive:!1}),n.container.addEventListener("mouseout",a(n,u))}))}}}),c.set(this,{writable:!0,value:function(){var e=n.actions[n.interactionIdx].forceFlag;e||!0!==n.player.isPaused?e&&a(n,k).call(n,!0):a(n,k).call(n,!0)}}),p.set(this,{writable:!0,value:function(){0===n.clickCounter?(n.player.play(),n.clickCounter++):(n.clickCounter++,n.player.setDirection(-1*n.player.playDirection),n.player.play())}}),d.set(this,{writable:!0,value:function(){var e=n.actions[n.interactionIdx].forceFlag;if("chain"===n.mode){if(n.actions[n.interactionIdx].count){var t=parseInt(n.actions[n.interactionIdx].count);if(n.clickCounter<t-1)return void(n.clickCounter+=1)}return n.clickCounter=0,n.container.removeEventListener("click",a(n,d)),n.container.removeEventListener("mouseenter",a(n,d)),void a(n,b).call(n)}e||!0!==n.player.isPaused?e&&n.player.goToAndPlay(0,!0):n.player.goToAndPlay(0,!0)}}),h.set(this,{writable:!0,value:function(e){a(n,P).call(n,e.clientX,e.clientY)}}),y.set(this,{writable:!0,value:function(e){e.cancelable&&e.preventDefault(),a(n,P).call(n,e.touches[0].clientX,e.touches[0].clientY)}}),u.set(this,{writable:!0,value:function(){a(n,P).call(n,-1,-1)}}),v.set(this,{writable:!0,value:function(){"loop"===n.actions[n.interactionIdx].state?n.player.removeEventListener("loopComplete",a(n,v)):n.player.removeEventListener("complete",a(n,v)),a(n,b).call(n)}}),m.set(this,{writable:!0,value:function(e){var t=e.handler,i=1;n.actions[n.interactionIdx].repeat&&(i=n.actions[n.interactionIdx].repeat),n.playCounter>=i-1?(n.playCounter=0,n.player.removeEventListener("loopComplete",t),n.player.loop=!1,n.player.autoplay=!1,a(n,b).call(n)):n.playCounter+=1}}),f.set(this,{writable:!0,value:function(){var e=n.actions[n.interactionIdx].frames;e&&n.player.currentFrame>=parseInt(e[1])-1&&(n.player.removeEventListener("enterFrame",a(n,f)),n.container.removeEventListener("mousemove",a(n,h)),n.container.removeEventListener("mouseout",a(n,u)),setTimeout(a(n,b),0))}}),L.set(this,{writable:!0,value:function(){var e=n.actions[n.interactionIdx].frames;(e&&n.player.currentFrame>=e[1]||n.player.currentFrame>=n.player.totalFrames-1)&&(n.player.removeEventListener("enterFrame",a(n,L)),n.container.removeEventListener("mouseenter",a(n,g)),n.container.removeEventListener("mouseleave",a(n,E)),n.player.pause(),a(n,b).call(n))}}),g.set(this,{writable:!0,value:function(){-1!==n.player.playDirection&&0!==n.player.currentFrame&&"pauseHold"!==n.actions[n.interactionIdx].transition&&"pauseHold"!==n.actions[0].type||(n.player.setDirection(1),n.player.play())}}),E.set(this,{writable:!0,value:function(){"hold"===n.actions[n.interactionIdx].transition||"hold"===n.actions[0].type?(n.player.setDirection(-1),n.player.play()):"pauseHold"!==n.actions[n.interactionIdx].transition&&"pauseHold"!==n.actions[0].type||n.player.pause()}}),w.set(this,{writable:!0,value:function(){var e=n.actions[n.interactionIdx].state;"hover"!==e&&"click"!==e||(n.container.removeEventListener("click",a(n,c)),n.container.removeEventListener("mouseenter",a(n,c)))}}),b.set(this,{writable:!0,value:function(){var e=n.interactionIdx;a(n,w).call(n);var t=n.actions[n.interactionIdx].jumpTo;t?t>=0&&t<n.actions.length?(n.interactionIdx=t,a(n,I).call(n,{ignorePath:!1})):(n.interactionIdx=0,n.player.goToAndStop(0,!0),a(n,I).call(n,{ignorePath:!1})):(n.interactionIdx++,n.interactionIdx>=n.actions.length?n.actions[n.actions.length-1].reset?(n.interactionIdx=0,n.player.goToAndStop(0,!0),a(n,I).call(n,{ignorePath:!1})):(n.interactionIdx=n.actions.length-1,a(n,I).call(n,{ignorePath:!1})):a(n,I).call(n,{ignorePath:!1})),n.container.dispatchEvent(new CustomEvent("transition",{bubbles:!0,composed:!0,detail:{oldIndex:e,newIndex:n.interactionIdx}}))}}),k.set(this,{writable:!0,value:function(e){var t=n.actions[n.interactionIdx].frames;if(!t)return n.player.resetSegments(!0),void n.player.goToAndPlay(0,!0);"string"==typeof t?n.player.goToAndPlay(t,e):n.player.playSegments(t,e)}}),x.set(this,{writable:!0,value:function(){var t=n.actions[n.interactionIdx].path;if(!t)if("object"===e(n.enteredPlayer)&&"AnimationItem"===n.enteredPlayer.constructor.name){if(t=n.enteredPlayer,n.player===t)return void a(n,I).call(n,{ignorePath:!0})}else{var i=(t=n.loadedAnimation).substr(t.lastIndexOf("/")+1);if(i=i.substr(0,i.lastIndexOf(".json")),n.player.fileName===i)return void a(n,I).call(n,{ignorePath:!0})}var r=n.container.getBoundingClientRect(),s="width: "+r.width+"px !important; height: "+r.height+"px !important; background: "+n.container.style.background;if(n.container.setAttribute("style",s),"object"!==e(n.enteredPlayer)||"AnimationItem"!==n.enteredPlayer.constructor.name){if("string"==typeof n.enteredPlayer){var l=document.querySelector(n.enteredPlayer);l&&"LOTTIE-PLAYER"===l.nodeName&&(n.attachedListeners||(l.addEventListener("ready",(function(){n.container.style.width="",n.container.style.height=""})),l.addEventListener("load",(function(){n.player=l.getLottie(),a(n,I).call(n,{ignorePath:!0})})),n.attachedListeners=!0),l.load(t))}else n.enteredPlayer instanceof HTMLElement&&"LOTTIE-PLAYER"===n.enteredPlayer.nodeName&&(n.attachedListeners||(n.enteredPlayer.addEventListener("ready",(function(){n.container.style.width="",n.container.style.height=""})),n.enteredPlayer.addEventListener("load",(function(){n.player=n.enteredPlayer.getLottie(),a(n,I).call(n,{ignorePath:!0})})),n.attachedListeners=!0),n.enteredPlayer.load(t));if(!n.player)throw new Error("".concat(o," Specified player is invalid."),n.enteredPlayer)}else{if(!window.lottie)throw new Error("".concat(o," A Lottie player is required."));n.stop(),n.player.destroy(),n.container.innerHTML="","object"===e(t)&&"AnimationItem"===t.constructor.name?n.player=window.lottie.loadAnimation({loop:!1,autoplay:!1,animationData:t.animationData,container:n.container}):n.player=window.lottie.loadAnimation({loop:!1,autoplay:!1,path:t,container:n.container}),n.player.addEventListener("DOMLoaded",(function(){n.container.style.width="",n.container.style.height="",a(n,I).call(n,{ignorePath:!0})}))}n.clickCounter=0,n.playCounter=0}}),I.set(this,{writable:!0,value:function(e){var t=e.ignorePath,i=n.actions[n.interactionIdx].state,r=n.actions[n.interactionIdx].transition,o=n.actions[n.interactionIdx].path,s=n.stateHandler.get(i),l=n.transitionHandler.get(r),c=n.actions[n.interactionIdx].speed?n.actions[n.interactionIdx].speed:1,p=n.actions[n.interactionIdx].delay?n.actions[n.interactionIdx].delay:0;t||!(o||n.actions[n.actions.length-1].reset&&0===n.interactionIdx)?setTimeout((function(){s?s.call():"none"===i&&(n.player.loop=!1,n.player.autoplay=!1),l&&l.call(),n.player.autoplay&&(n.player.resetSegments(!0),a(n,k).call(n,!0)),n.player.setSpeed(c)}),p):a(n,x).call(n)}}),P.set(this,{writable:!0,value:function(e,t){if(-1!==e&&-1!==t){var i=n.getContainerCursorPosition(e,t);e=i.x,t=i.y}var a=n.actions.find((function(n){var i=n.position;if(i){if(Array.isArray(i.x)&&Array.isArray(i.y))return e>=i.x[0]&&e<=i.x[1]&&t>=i.y[0]&&t<=i.y[1];if(!Number.isNaN(i.x)&&!Number.isNaN(i.y))return e===i.x&&t===i.y}return!1}));if(a)if("seek"===a.type||"seek"===a.transition){var r=(e-a.position.x[0])/(a.position.x[1]-a.position.x[0]),o=(t-a.position.y[0])/(a.position.y[1]-a.position.y[0]);n.player.playSegments(a.frames,!0),a.position.y[0]<0&&a.position.y[1]>1?n.player.goToAndStop(Math.floor(r*n.player.totalFrames),!0):n.player.goToAndStop(Math.ceil((r+o)/2*n.player.totalFrames),!0)}else"loop"===a.type?n.player.playSegments(a.frames,!0):"play"===a.type?(!0===n.player.isPaused&&n.player.resetSegments(),n.player.playSegments(a.frames)):"stop"===a.type&&(n.player.resetSegments(!0),n.player.goToAndStop(a.frames[0],!0))}}),S.set(this,{writable:!0,value:function(){var e=n.getContainerVisibility(),t=n.actions.find((function(t){var n=t.visibility;return e>=n[0]&&e<=n[1]}));if(t)if("seek"===t.type){var i=t.frames[0],a=2==t.frames.length?t.frames[1]:n.player.totalFrames-1;null!==n.assignedSegment&&(n.player.resetSegments(!0),n.assignedSegment=null),n.player.goToAndStop(i+Math.round((e-t.visibility[0])/(t.visibility[1]-t.visibility[0])*(a-i)),!0)}else"loop"===t.type?(n.player.loop=!0,(null===n.assignedSegment||n.assignedSegment!==t.frames||!0===n.player.isPaused)&&(n.player.playSegments(t.frames,!0),n.assignedSegment=t.frames)):"play"===t.type?n.scrolledAndPlayed||(n.scrolledAndPlayed=!0,n.player.resetSegments(!0),t.frames?n.player.playSegments(t.frames,!0):n.player.play()):"stop"===t.type&&n.player.goToAndStop(t.frames[0],!0)}}),this.enteredPlayer=H,"object"!==e(H)||"AnimationItem"!==H.constructor.name){if("string"==typeof H){var W=document.querySelector(H);W&&"LOTTIE-PLAYER"===W.nodeName&&(H=W.getLottie())}else H instanceof HTMLElement&&"LOTTIE-PLAYER"===H.nodeName&&(H=H.getLottie());if(!H){var F=o+"Specified player:"+H+" is invalid.";throw new Error(F)}}"string"==typeof A&&(A=document.querySelector(A)),A||(A=H.wrapper),this.player=H,this.loadedAnimation=this.player.path+this.player.fileName+".json",this.attachedListeners=!1,this.container=A,this.mode=T,this.actions=C,this.options=O,this.assignedSegment=null,this.scrolledAndPlayed=!1,this.interactionIdx=0,this.clickCounter=0,this.playCounter=0,this.stateHandler=new Map,this.transitionHandler=new Map}var M,C,A;return M=s,(C=[{key:"getContainerVisibility",value:function(){var e=this.container.getBoundingClientRect(),t=e.top,n=e.height;return(window.innerHeight-t)/(window.innerHeight+n)}},{key:"getContainerCursorPosition",value:function(e,t){var n=this.container.getBoundingClientRect(),i=n.top;return{x:(e-n.left)/n.width,y:(t-i)/n.height}}},{key:"initScrollMode",value:function(){this.player.stop(),window.addEventListener("scroll",a(this,S))}},{key:"initCursorMode",value:function(){this.actions&&1===this.actions.length?"click"===this.actions[0].type?(this.player.loop=!1,this.player.stop(),this.container.addEventListener("click",a(this,d))):"hover"===this.actions[0].type?(this.player.loop=!1,this.player.stop(),this.container.addEventListener("mouseenter",a(this,d)),this.container.addEventListener("touchstart",a(this,d),{passive:!0})):"toggle"===this.actions[0].type?(this.player.loop=!1,this.player.stop(),this.container.addEventListener("click",a(this,p))):"hold"===this.actions[0].type||"pauseHold"===this.actions[0].type?(this.container.addEventListener("mouseenter",a(this,g)),this.container.addEventListener("mouseleave",a(this,E)),this.container.addEventListener("touchstart",a(this,g),{passive:!0}),this.container.addEventListener("touchend",a(this,E),{passive:!0})):"seek"===this.actions[0].type&&(this.player.loop=!0,this.player.stop(),this.container.addEventListener("mousemove",a(this,h)),this.container.addEventListener("touchmove",a(this,y),{passive:!1}),this.container.addEventListener("mouseout",a(this,u))):(this.player.loop=!0,this.player.stop(),this.container.addEventListener("mousemove",a(this,h)),this.container.addEventListener("mouseleave",a(this,u)),a(this,P).call(this,-1,-1))}},{key:"initChainMode",value:function(){a(this,l).call(this),this.player.loop=!1,this.player.stop(),a(this,I).call(this,{ignorePath:!1})}},{key:"start",value:function(){var e=this;"scroll"===this.mode?this.player.isLoaded?this.initScrollMode():this.player.addEventListener("DOMLoaded",(function(){e.initScrollMode()})):"cursor"===this.mode?this.player.isLoaded?this.initCursorMode():this.player.addEventListener("DOMLoaded",(function(){e.initCursorMode()})):"chain"===this.mode&&(this.player.isLoaded?this.initChainMode():this.player.addEventListener("DOMLoaded",(function(){e.initChainMode()})))}},{key:"redefineOptions",value:function(t){var n=t.actions,a=t.container,r=t.mode,s=t.player,l=i(t,["actions","container","mode","player"]);if(this.stop(),this.player.stop(),this.enteredPlayer=s,"object"!==e(s)||"AnimationItem"!==s.constructor.name){if("string"==typeof s){var c=document.querySelector(s);c&&"LOTTIE-PLAYER"===c.nodeName&&(s=c.getLottie())}else s instanceof HTMLElement&&"LOTTIE-PLAYER"===s.nodeName&&(s=s.getLottie());if(!s)throw new Error(o+"Specified player:"+s+" is invalid.",s)}"string"==typeof a&&(a=document.querySelector(a)),a||(a=s.wrapper),this.player=s,this.loadedAnimation=this.player.path+this.player.fileName+".json",this.attachedListeners=!1,this.container=a,this.mode=r,this.actions=n,this.options=l,this.assignedSegment=null,this.scrolledAndPlayed=!1,this.interactionIdx=0,this.clickCounter=0,this.playCounter=0,this.stateHandler=new Map,this.transitionHandler=new Map,this.start()}},{key:"stop",value:function(){"scroll"===this.mode&&window.removeEventListener("scroll",a(this,S)),"cursor"===this.mode&&(this.container.removeEventListener("click",a(this,d)),this.container.removeEventListener("click",a(this,p)),this.container.removeEventListener("mouseenter",a(this,d)),this.container.removeEventListener("touchstart",a(this,d)),this.container.removeEventListener("touchmove",a(this,y)),this.container.removeEventListener("mousemove",a(this,h)),this.container.removeEventListener("mouseleave",a(this,u)),this.container.removeEventListener("touchstart",a(this,g)),this.container.removeEventListener("touchend",a(this,E))),"chain"===this.mode&&(this.container.removeEventListener("click",a(this,d)),this.container.removeEventListener("click",a(this,c)),this.container.removeEventListener("mouseenter",a(this,d)),this.container.removeEventListener("touchstart",a(this,d)),this.container.removeEventListener("touchmove",a(this,y)),this.container.removeEventListener("mouseenter",a(this,c)),this.container.removeEventListener("touchstart",a(this,c)),this.container.removeEventListener("mouseenter",a(this,g)),this.container.removeEventListener("touchstart",a(this,g)),this.container.removeEventListener("mouseleave",a(this,E)),this.container.removeEventListener("mousemove",a(this,h)),this.container.removeEventListener("mouseout",a(this,u)),this.container.removeEventListener("touchend",a(this,E)),this.player.removeEventListener("loopComplete",a(this,v)),this.player.removeEventListener("complete",a(this,v)),this.player.removeEventListener("enterFrame",a(this,f)),this.player.removeEventListener("enterFrame",a(this,L)))}}])&&n(M.prototype,C),A&&n(M,A),s}(),l=new WeakMap,c=new WeakMap,p=new WeakMap,d=new WeakMap,h=new WeakMap,y=new WeakMap,u=new WeakMap,v=new WeakMap,m=new WeakMap,f=new WeakMap,L=new WeakMap,g=new WeakMap,E=new WeakMap,w=new WeakMap,b=new WeakMap,k=new WeakMap,x=new WeakMap,I=new WeakMap,P=new WeakMap,S=new WeakMap,M=function(e){var t=new s(e);return t.start(),t};export default M;export{s as LottieInteractivity,M as create};
+function e(t){return(e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(t)}function t(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function n(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){if(null==e)return{};var n,i,a=function(e,t){if(null==e)return{};var n,i,a={},r=Object.keys(e);for(i=0;i<r.length;i++)n=r[i],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(i=0;i<r.length;i++)n=r[i],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}function r(e,t){var n=t.get(e);if(!n)throw new TypeError("attempted to get private field on non-instance");return n.get?n.get.call(e):n.value}var o={player:"lottie-player"},s="[lottieInteractivity]:",l=function(){function l(){var n=this,M=arguments.length>0&&void 0!==arguments[0]?arguments[0]:o,A=M.actions,C=M.container,T=M.mode,H=M.player,O=a(M,["actions","container","mode","player"]);if(t(this,l),c.set(this,{writable:!0,value:function(){if(n.player){var e=function(){n.player.addEventListener("enterFrame",r(n,g)),n.container.addEventListener("mouseenter",r(n,E)),n.container.addEventListener("mouseleave",r(n,w)),n.container.addEventListener("touchstart",r(n,E),{passive:!0}),n.container.addEventListener("touchend",r(n,w),{passive:!0})};n.stateHandler.set("loop",(function(){n.actions[n.interactionIdx].loop?n.player.loop=parseInt(n.actions[n.interactionIdx].loop)-1:n.player.loop=!0,n.player.autoplay=!0})),n.stateHandler.set("autoplay",(function(){n.player.loop=!1,n.player.autoplay=!0})),n.stateHandler.set("click",(function(){n.player.loop=!1,n.player.autoplay=!1,n.container.addEventListener("click",r(n,p))})),n.stateHandler.set("hover",(function(){n.player.loop=!1,n.player.autoplay=!1,n.container.addEventListener("mouseenter",r(n,p)),n.container.addEventListener("touchstart",r(n,p),{passive:!0})})),n.transitionHandler.set("click",(function(){n.container.addEventListener("click",r(n,h))})),n.transitionHandler.set("hover",(function(){n.container.addEventListener("mouseenter",r(n,h)),n.container.addEventListener("touchstart",r(n,h),{passive:!0})})),n.transitionHandler.set("hold",e),n.transitionHandler.set("pauseHold",e),n.transitionHandler.set("repeat",(function(){n.player.loop=!0,n.player.autoplay=!0;n.player.addEventListener("loopComplete",(function e(){r(n,f).call(n,{handler:e})}))})),n.transitionHandler.set("onComplete",(function(){"loop"===n.actions[n.interactionIdx].state?n.player.addEventListener("loopComplete",r(n,m)):n.player.addEventListener("complete",r(n,m))})),n.transitionHandler.set("seek",(function(){n.player.stop(),n.player.addEventListener("enterFrame",r(n,L)),n.container.addEventListener("mousemove",r(n,y)),n.container.addEventListener("touchmove",r(n,u),{passive:!1}),n.container.addEventListener("mouseout",r(n,v))}))}}}),p.set(this,{writable:!0,value:function(){var e=n.actions[n.interactionIdx].forceFlag;e||!0!==n.player.isPaused?e&&r(n,x).call(n,!0):r(n,x).call(n,!0)}}),d.set(this,{writable:!0,value:function(){0===n.clickCounter?(n.player.play(),n.clickCounter++):(n.clickCounter++,n.player.setDirection(-1*n.player.playDirection),n.player.play())}}),h.set(this,{writable:!0,value:function(){var e=n.actions[n.interactionIdx].forceFlag,t=n.actions[n.interactionIdx].state,i=n.actions[n.interactionIdx].transition;if("chain"===n.mode){if(n.actions[n.interactionIdx].count){var a=parseInt(n.actions[n.interactionIdx].count);if(n.clickCounter<a-1)return void(n.clickCounter+=1)}return n.clickCounter=0,!e&&"click"===i&&"click"===t||"hover"===i&&"hover"===t?n.transitionHandler.get("onComplete").call():n.nextInteraction(),n.container.removeEventListener("click",r(n,h)),void n.container.removeEventListener("mouseenter",r(n,h))}e||!0!==n.player.isPaused?e&&n.player.goToAndPlay(0,!0):n.player.goToAndPlay(0,!0)}}),y.set(this,{writable:!0,value:function(e){r(n,S).call(n,e.clientX,e.clientY)}}),u.set(this,{writable:!0,value:function(e){e.cancelable&&e.preventDefault(),r(n,S).call(n,e.touches[0].clientX,e.touches[0].clientY)}}),v.set(this,{writable:!0,value:function(){r(n,S).call(n,-1,-1)}}),m.set(this,{writable:!0,value:function(){"loop"===n.actions[n.interactionIdx].state?n.player.removeEventListener("loopComplete",r(n,m)):n.player.removeEventListener("complete",r(n,m)),n.nextInteraction()}}),f.set(this,{writable:!0,value:function(e){var t=e.handler,i=1;n.actions[n.interactionIdx].repeat&&(i=n.actions[n.interactionIdx].repeat),n.playCounter>=i-1?(n.playCounter=0,n.player.removeEventListener("loopComplete",t),n.player.loop=!1,n.player.autoplay=!1,n.nextInteraction()):n.playCounter+=1}}),L.set(this,{writable:!0,value:function(){var e=n.actions[n.interactionIdx].frames;e&&n.player.currentFrame>=parseInt(e[1])-1&&(n.player.removeEventListener("enterFrame",r(n,L)),n.container.removeEventListener("mousemove",r(n,y)),n.container.removeEventListener("mouseout",r(n,v)),setTimeout(n.nextInteraction,0))}}),g.set(this,{writable:!0,value:function(){var e=n.actions[n.interactionIdx].frames;(e&&n.player.currentFrame>=e[1]||n.player.currentFrame>=n.player.totalFrames-1)&&(n.player.removeEventListener("enterFrame",r(n,g)),n.container.removeEventListener("mouseenter",r(n,E)),n.container.removeEventListener("mouseleave",r(n,w)),n.container.removeEventListener("touchstart",r(n,E),{passive:!0}),n.container.removeEventListener("touchend",r(n,w),{passive:!0}),n.player.pause(),n.holdStatus=!1,n.nextInteraction())}}),E.set(this,{writable:!0,value:function(){-1!==n.player.playDirection&&null!==n.holdStatus&&n.holdStatus||(n.player.setDirection(1),n.player.play(),n.holdStatus=!0)}}),w.set(this,{writable:!0,value:function(){"hold"===n.actions[n.interactionIdx].transition||"hold"===n.actions[0].type?(n.player.setDirection(-1),n.player.play()):"pauseHold"!==n.actions[n.interactionIdx].transition&&"pauseHold"!==n.actions[0].type||n.player.pause(),n.holdStatus=!1}}),I.set(this,{writable:!0,value:function(){var e=n.actions[n.interactionIdx].state,t=n.actions[n.interactionIdx].transition;"hover"!==e&&"click"!==e||(n.container.removeEventListener("click",r(n,p)),n.container.removeEventListener("mouseenter",r(n,p))),"hover"!==t&&"click"!==t||(n.container.removeEventListener("click",r(n,h)),n.container.removeEventListener("mouseenter",r(n,h)),n.container.removeEventListener("touchstart",r(n,h),{passive:!0}))}}),i(this,"jumpToInteraction",(function(e){r(n,I).call(n),n.interactionIdx=e,n.interactionIdx<0?n.interactionIdx=0:n.interactionIdx,n.nextInteraction(!1)})),i(this,"nextInteraction",(function(){var e=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];n.oldInterctionIdx=n.interactionIdx,r(n,I).call(n);var t=n.actions[n.interactionIdx].jumpTo;t?t>=0&&t<n.actions.length?(n.interactionIdx=t,r(n,k).call(n,{ignorePath:!1})):(n.interactionIdx=0,n.player.goToAndStop(0,!0),r(n,k).call(n,{ignorePath:!1})):(e&&n.interactionIdx++,n.interactionIdx>=n.actions.length?n.actions[n.actions.length-1].reset?(n.interactionIdx=0,n.player.resetSegments(!0),n.actions[n.interactionIdx].frames?n.player.goToAndStop(n.actions[n.interactionIdx].frames,!0):n.player.goToAndStop(0,!0),r(n,k).call(n,{ignorePath:!1})):(n.interactionIdx=n.actions.length-1,r(n,k).call(n,{ignorePath:!1})):r(n,k).call(n,{ignorePath:!1})),n.container.dispatchEvent(new CustomEvent("transition",{bubbles:!0,composed:!0,detail:{oldIndex:n.oldInterctionIdx,newIndex:n.interactionIdx}}))})),x.set(this,{writable:!0,value:function(e){var t=n.actions[n.interactionIdx].frames;if(!t)return n.player.resetSegments(!0),void n.player.goToAndPlay(0,!0);"string"==typeof t?n.player.goToAndPlay(t,e):n.player.playSegments(t,e)}}),b.set(this,{writable:!0,value:function(){var t=n.actions[n.interactionIdx].path;if(!t)if("object"===e(n.enteredPlayer)&&"AnimationItem"===n.enteredPlayer.constructor.name){if(t=n.enteredPlayer,n.player===t)return void r(n,k).call(n,{ignorePath:!0})}else{var i=(t=n.loadedAnimation).substr(t.lastIndexOf("/")+1);if(i=i.substr(0,i.lastIndexOf(".json")),n.player.fileName===i)return void r(n,k).call(n,{ignorePath:!0})}var a=n.container.getBoundingClientRect(),o="width: "+a.width+"px !important; height: "+a.height+"px !important; background: "+n.container.style.background;if(n.container.setAttribute("style",o),"object"!==e(n.enteredPlayer)||"AnimationItem"!==n.enteredPlayer.constructor.name){if("string"==typeof n.enteredPlayer){var l=document.querySelector(n.enteredPlayer);l&&"LOTTIE-PLAYER"===l.nodeName&&(n.attachedListeners||(l.addEventListener("ready",(function(){n.container.style.width="",n.container.style.height=""})),l.addEventListener("load",(function(){n.player=l.getLottie(),r(n,k).call(n,{ignorePath:!0})})),n.attachedListeners=!0),l.load(t))}else n.enteredPlayer instanceof HTMLElement&&"LOTTIE-PLAYER"===n.enteredPlayer.nodeName&&(n.attachedListeners||(n.enteredPlayer.addEventListener("ready",(function(){n.container.style.width="",n.container.style.height=""})),n.enteredPlayer.addEventListener("load",(function(){n.player=n.enteredPlayer.getLottie(),r(n,k).call(n,{ignorePath:!0})})),n.attachedListeners=!0),n.enteredPlayer.load(t));if(!n.player)throw new Error("".concat(s," Specified player is invalid."),n.enteredPlayer)}else{if(!window.lottie)throw new Error("".concat(s," A Lottie player is required."));n.stop(),n.player.destroy(),n.container.innerHTML="","object"===e(t)&&"AnimationItem"===t.constructor.name?n.player=window.lottie.loadAnimation({loop:!1,autoplay:!1,animationData:t.animationData,container:n.container}):n.player=window.lottie.loadAnimation({loop:!1,autoplay:!1,path:t,container:n.container}),n.player.addEventListener("DOMLoaded",(function(){n.container.style.width="",n.container.style.height="",r(n,k).call(n,{ignorePath:!0})}))}n.clickCounter=0,n.playCounter=0}}),k.set(this,{writable:!0,value:function(e){var t=e.ignorePath,i=n.actions[n.interactionIdx].frames,a=n.actions[n.interactionIdx].state,o=n.actions[n.interactionIdx].transition,s=n.actions[n.interactionIdx].path,l=n.stateHandler.get(a),c=n.transitionHandler.get(o),p=n.actions[n.interactionIdx].speed?n.actions[n.interactionIdx].speed:1,d=n.actions[n.interactionIdx].delay?n.actions[n.interactionIdx].delay:0;t||!(s||n.actions[n.actions.length-1].reset&&0===n.interactionIdx)?setTimeout((function(){i&&(n.player.autoplay=!1,n.player.resetSegments(!0),n.player.goToAndStop(i[0],!0)),l?l.call():"none"===a&&(n.player.loop=!1,n.player.autoplay=!1),c&&c.call(),n.player.autoplay&&(n.player.resetSegments(!0),r(n,x).call(n,!0)),n.player.setSpeed(p)}),d):r(n,b).call(n)}}),S.set(this,{writable:!0,value:function(e,t){if(-1!==e&&-1!==t){var i=n.getContainerCursorPosition(e,t);e=i.x,t=i.y}var a=n.actions.find((function(n){var i=n.position;if(i){if(Array.isArray(i.x)&&Array.isArray(i.y))return e>=i.x[0]&&e<=i.x[1]&&t>=i.y[0]&&t<=i.y[1];if(!Number.isNaN(i.x)&&!Number.isNaN(i.y))return e===i.x&&t===i.y}return!1}));if(a)if("seek"===a.type||"seek"===a.transition){var r=(e-a.position.x[0])/(a.position.x[1]-a.position.x[0]),o=(t-a.position.y[0])/(a.position.y[1]-a.position.y[0]);n.player.playSegments(a.frames,!0),a.position.y[0]<0&&a.position.y[1]>1?n.player.goToAndStop(Math.floor(r*n.player.totalFrames),!0):n.player.goToAndStop(Math.ceil((r+o)/2*n.player.totalFrames),!0)}else"loop"===a.type?n.player.playSegments(a.frames,!0):"play"===a.type?(!0===n.player.isPaused&&n.player.resetSegments(),n.player.playSegments(a.frames)):"stop"===a.type&&(n.player.resetSegments(!0),n.player.goToAndStop(a.frames[0],!0))}}),P.set(this,{writable:!0,value:function(){var e=n.getContainerVisibility(),t=n.actions.find((function(t){var n=t.visibility;return e>=n[0]&&e<=n[1]}));if(t)if("seek"===t.type){var i=t.frames[0],a=2==t.frames.length?t.frames[1]:n.player.totalFrames-1;null!==n.assignedSegment&&(n.player.resetSegments(!0),n.assignedSegment=null),n.player.goToAndStop(i+Math.round((e-t.visibility[0])/(t.visibility[1]-t.visibility[0])*(a-i)),!0)}else"loop"===t.type?(n.player.loop=!0,(null===n.assignedSegment||n.assignedSegment!==t.frames||!0===n.player.isPaused)&&(n.player.playSegments(t.frames,!0),n.assignedSegment=t.frames)):"play"===t.type?n.scrolledAndPlayed||(n.scrolledAndPlayed=!0,n.player.resetSegments(!0),t.frames?n.player.playSegments(t.frames,!0):n.player.play()):"stop"===t.type&&n.player.goToAndStop(t.frames[0],!0)}}),this.enteredPlayer=H,"object"!==e(H)||"AnimationItem"!==H.constructor.name){if("string"==typeof H){var W=document.querySelector(H);W&&"LOTTIE-PLAYER"===W.nodeName&&(H=W.getLottie())}else H instanceof HTMLElement&&"LOTTIE-PLAYER"===H.nodeName&&(H=H.getLottie());if(!H){var j=s+"Specified player:"+H+" is invalid.";throw new Error(j)}}"string"==typeof C&&(C=document.querySelector(C)),C||(C=H.wrapper),this.player=H,this.loadedAnimation=this.player.path+this.player.fileName+".json",this.attachedListeners=!1,this.container=C,this.mode=T,this.actions=A,this.options=O,this.assignedSegment=null,this.scrolledAndPlayed=!1,this.interactionIdx=0,this.oldInterctionIdx=0,this.clickCounter=0,this.playCounter=0,this.stateHandler=new Map,this.transitionHandler=new Map}var M,A,C;return M=l,(A=[{key:"getContainerVisibility",value:function(){var e=this.container.getBoundingClientRect(),t=e.top,n=e.height;return(window.innerHeight-t)/(window.innerHeight+n)}},{key:"getContainerCursorPosition",value:function(e,t){var n=this.container.getBoundingClientRect(),i=n.top;return{x:(e-n.left)/n.width,y:(t-i)/n.height}}},{key:"initScrollMode",value:function(){this.player.stop(),window.addEventListener("scroll",r(this,P),!0)}},{key:"initCursorMode",value:function(){this.actions&&1===this.actions.length?"click"===this.actions[0].type?(this.player.loop=!1,this.player.stop(),this.container.addEventListener("click",r(this,h))):"hover"===this.actions[0].type?(this.player.loop=!1,this.player.stop(),this.container.addEventListener("mouseenter",r(this,h)),this.container.addEventListener("touchstart",r(this,h),{passive:!0})):"toggle"===this.actions[0].type?(this.player.loop=!1,this.player.stop(),this.container.addEventListener("click",r(this,d))):"hold"===this.actions[0].type||"pauseHold"===this.actions[0].type?(this.container.addEventListener("mouseenter",r(this,E)),this.container.addEventListener("mouseleave",r(this,w)),this.container.addEventListener("touchstart",r(this,E),{passive:!0}),this.container.addEventListener("touchend",r(this,w),{passive:!0})):"seek"===this.actions[0].type&&(this.player.loop=!0,this.player.stop(),this.container.addEventListener("mousemove",r(this,y)),this.container.addEventListener("touchmove",r(this,u),{passive:!1}),this.container.addEventListener("mouseout",r(this,v))):(this.player.loop=!0,this.player.stop(),this.container.addEventListener("mousemove",r(this,y)),this.container.addEventListener("mouseleave",r(this,v)),r(this,S).call(this,-1,-1))}},{key:"initChainMode",value:function(){r(this,c).call(this),this.player.loop=!1,this.player.stop(),r(this,k).call(this,{ignorePath:!1})}},{key:"start",value:function(){var e=this;"scroll"===this.mode?this.player.isLoaded?this.initScrollMode():this.player.addEventListener("DOMLoaded",(function(){e.initScrollMode()})):"cursor"===this.mode?this.player.isLoaded?this.initCursorMode():this.player.addEventListener("DOMLoaded",(function(){e.initCursorMode()})):"chain"===this.mode&&(this.player.isLoaded?this.initChainMode():this.player.addEventListener("DOMLoaded",(function(){e.initChainMode()})))}},{key:"redefineOptions",value:function(t){var n=t.actions,i=t.container,r=t.mode,o=t.player,l=a(t,["actions","container","mode","player"]);if(this.stop(),this.enteredPlayer=o,"object"!==e(o)||"AnimationItem"!==o.constructor.name){if("string"==typeof o){var c=document.querySelector(o);c&&"LOTTIE-PLAYER"===c.nodeName&&(o=c.getLottie())}else o instanceof HTMLElement&&"LOTTIE-PLAYER"===o.nodeName&&(o=o.getLottie());if(!o)throw new Error(s+"Specified player:"+o+" is invalid.",o)}"string"==typeof i&&(i=document.querySelector(i)),i||(i=o.wrapper),this.player=o,this.loadedAnimation=this.player.path+this.player.fileName+".json",this.attachedListeners=!1,this.container=i,this.mode=r,this.actions=n,this.options=l,this.assignedSegment=null,this.scrolledAndPlayed=!1,this.interactionIdx=0,this.clickCounter=0,this.playCounter=0,this.holdStatus=null,this.stateHandler=new Map,this.transitionHandler=new Map,this.start()}},{key:"stop",value:function(){if("scroll"===this.mode&&window.removeEventListener("scroll",r(this,P),!0),"cursor"===this.mode&&(this.container.removeEventListener("click",r(this,h)),this.container.removeEventListener("click",r(this,d)),this.container.removeEventListener("mouseenter",r(this,h)),this.container.removeEventListener("touchstart",r(this,h)),this.container.removeEventListener("touchmove",r(this,u)),this.container.removeEventListener("mousemove",r(this,y)),this.container.removeEventListener("mouseleave",r(this,v)),this.container.removeEventListener("touchstart",r(this,E)),this.container.removeEventListener("touchend",r(this,w))),"chain"===this.mode&&(this.container.removeEventListener("click",r(this,h)),this.container.removeEventListener("click",r(this,p)),this.container.removeEventListener("mouseenter",r(this,h)),this.container.removeEventListener("touchstart",r(this,h)),this.container.removeEventListener("touchmove",r(this,u)),this.container.removeEventListener("mouseenter",r(this,p)),this.container.removeEventListener("touchstart",r(this,p)),this.container.removeEventListener("mouseenter",r(this,E)),this.container.removeEventListener("touchstart",r(this,E)),this.container.removeEventListener("mouseleave",r(this,w)),this.container.removeEventListener("mousemove",r(this,y)),this.container.removeEventListener("mouseout",r(this,v)),this.container.removeEventListener("touchend",r(this,w)),this.player))try{this.player.removeEventListener("loopComplete",r(this,m)),this.player.removeEventListener("complete",r(this,m)),this.player.removeEventListener("enterFrame",r(this,L)),this.player.removeEventListener("enterFrame",r(this,g))}catch(e){}this.player=null}}])&&n(M.prototype,A),C&&n(M,C),l}(),c=new WeakMap,p=new WeakMap,d=new WeakMap,h=new WeakMap,y=new WeakMap,u=new WeakMap,v=new WeakMap,m=new WeakMap,f=new WeakMap,L=new WeakMap,g=new WeakMap,E=new WeakMap,w=new WeakMap,I=new WeakMap,x=new WeakMap,b=new WeakMap,k=new WeakMap,S=new WeakMap,P=new WeakMap,M=function(e){var t=new l(e);return t.start(),t};export default M;export{l as LottieInteractivity,M as create};
 //# sourceMappingURL=lottie-interactivity.es.js.map

dist/lottie-interactivity.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).LottieInteractivity={})}(this,(function(e){"use strict";function t(e){return(t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function a(e,t){if(null==e)return{};var n,i,a=function(e,t){if(null==e)return{};var n,i,a={},r=Object.keys(e);for(i=0;i<r.length;i++)n=r[i],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(i=0;i<r.length;i++)n=r[i],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}function r(e,t){var n=t.get(e);if(!n)throw new TypeError("attempted to get private field on non-instance");return n.get?n.get.call(e):n.value}var o={player:"lottie-player"},s="[lottieInteractivity]:",l=function(){function e(){var i=this,l=arguments.length>0&&void 0!==arguments[0]?arguments[0]:o,C=l.actions,A=l.container,T=l.mode,H=l.player,O=a(l,["actions","container","mode","player"]);if(n(this,e),c.set(this,{writable:!0,value:function(){if(i.player){var e=function(){i.player.addEventListener("enterFrame",r(i,g)),i.container.addEventListener("mouseenter",r(i,E)),i.container.addEventListener("mouseleave",r(i,w)),i.container.addEventListener("touchstart",r(i,E),{passive:!0}),i.container.addEventListener("touchend",r(i,w),{passive:!0})};i.stateHandler.set("loop",(function(){i.actions[i.interactionIdx].loop?i.player.loop=parseInt(i.actions[i.interactionIdx].loop)-1:i.player.loop=!0,i.player.autoplay=!0})),i.stateHandler.set("autoplay",(function(){i.player.loop=!1,i.player.autoplay=!0})),i.stateHandler.set("click",(function(){i.player.loop=!1,i.player.autoplay=!1,i.container.addEventListener("click",r(i,p))})),i.stateHandler.set("hover",(function(){i.player.loop=!1,i.player.autoplay=!1,i.container.addEventListener("mouseenter",r(i,p)),i.container.addEventListener("touchstart",r(i,p),{passive:!0})})),i.transitionHandler.set("click",(function(){i.container.addEventListener("click",r(i,h))})),i.transitionHandler.set("hover",(function(){i.container.addEventListener("mouseenter",r(i,h)),i.container.addEventListener("touchstart",r(i,h),{passive:!0})})),i.transitionHandler.set("hold",e),i.transitionHandler.set("pauseHold",e),i.transitionHandler.set("repeat",(function(){i.player.loop=!0,i.player.autoplay=!0;i.player.addEventListener("loopComplete",(function e(){r(i,f).call(i,{handler:e})}))})),i.transitionHandler.set("onComplete",(function(){"loop"===i.actions[i.interactionIdx].state?i.player.addEventListener("loopComplete",r(i,m)):i.player.addEventListener("complete",r(i,m))})),i.transitionHandler.set("seek",(function(){i.player.stop(),i.player.addEventListener("enterFrame",r(i,L)),i.container.addEventListener("mousemove",r(i,y)),i.container.addEventListener("touchmove",r(i,u),{passive:!1}),i.container.addEventListener("mouseout",r(i,v))}))}}}),p.set(this,{writable:!0,value:function(){var e=i.actions[i.interactionIdx].forceFlag;e||!0!==i.player.isPaused?e&&r(i,I).call(i,!0):r(i,I).call(i,!0)}}),d.set(this,{writable:!0,value:function(){0===i.clickCounter?(i.player.play(),i.clickCounter++):(i.clickCounter++,i.player.setDirection(-1*i.player.playDirection),i.player.play())}}),h.set(this,{writable:!0,value:function(){var e=i.actions[i.interactionIdx].forceFlag;if("chain"===i.mode){if(i.actions[i.interactionIdx].count){var t=parseInt(i.actions[i.interactionIdx].count);if(i.clickCounter<t-1)return void(i.clickCounter+=1)}return i.clickCounter=0,i.container.removeEventListener("click",r(i,h)),i.container.removeEventListener("mouseenter",r(i,h)),void r(i,k).call(i)}e||!0!==i.player.isPaused?e&&i.player.goToAndPlay(0,!0):i.player.goToAndPlay(0,!0)}}),y.set(this,{writable:!0,value:function(e){r(i,M).call(i,e.clientX,e.clientY)}}),u.set(this,{writable:!0,value:function(e){e.cancelable&&e.preventDefault(),r(i,M).call(i,e.touches[0].clientX,e.touches[0].clientY)}}),v.set(this,{writable:!0,value:function(){r(i,M).call(i,-1,-1)}}),m.set(this,{writable:!0,value:function(){"loop"===i.actions[i.interactionIdx].state?i.player.removeEventListener("loopComplete",r(i,m)):i.player.removeEventListener("complete",r(i,m)),r(i,k).call(i)}}),f.set(this,{writable:!0,value:function(e){var t=e.handler,n=1;i.actions[i.interactionIdx].repeat&&(n=i.actions[i.interactionIdx].repeat),i.playCounter>=n-1?(i.playCounter=0,i.player.removeEventListener("loopComplete",t),i.player.loop=!1,i.player.autoplay=!1,r(i,k).call(i)):i.playCounter+=1}}),L.set(this,{writable:!0,value:function(){var e=i.actions[i.interactionIdx].frames;e&&i.player.currentFrame>=parseInt(e[1])-1&&(i.player.removeEventListener("enterFrame",r(i,L)),i.container.removeEventListener("mousemove",r(i,y)),i.container.removeEventListener("mouseout",r(i,v)),setTimeout(r(i,k),0))}}),g.set(this,{writable:!0,value:function(){var e=i.actions[i.interactionIdx].frames;(e&&i.player.currentFrame>=e[1]||i.player.currentFrame>=i.player.totalFrames-1)&&(i.player.removeEventListener("enterFrame",r(i,g)),i.container.removeEventListener("mouseenter",r(i,E)),i.container.removeEventListener("mouseleave",r(i,w)),i.player.pause(),r(i,k).call(i))}}),E.set(this,{writable:!0,value:function(){-1!==i.player.playDirection&&0!==i.player.currentFrame&&"pauseHold"!==i.actions[i.interactionIdx].transition&&"pauseHold"!==i.actions[0].type||(i.player.setDirection(1),i.player.play())}}),w.set(this,{writable:!0,value:function(){"hold"===i.actions[i.interactionIdx].transition||"hold"===i.actions[0].type?(i.player.setDirection(-1),i.player.play()):"pauseHold"!==i.actions[i.interactionIdx].transition&&"pauseHold"!==i.actions[0].type||i.player.pause()}}),b.set(this,{writable:!0,value:function(){var e=i.actions[i.interactionIdx].state;"hover"!==e&&"click"!==e||(i.container.removeEventListener("click",r(i,p)),i.container.removeEventListener("mouseenter",r(i,p)))}}),k.set(this,{writable:!0,value:function(){var e=i.interactionIdx;r(i,b).call(i);var t=i.actions[i.interactionIdx].jumpTo;t?t>=0&&t<i.actions.length?(i.interactionIdx=t,r(i,P).call(i,{ignorePath:!1})):(i.interactionIdx=0,i.player.goToAndStop(0,!0),r(i,P).call(i,{ignorePath:!1})):(i.interactionIdx++,i.interactionIdx>=i.actions.length?i.actions[i.actions.length-1].reset?(i.interactionIdx=0,i.player.goToAndStop(0,!0),r(i,P).call(i,{ignorePath:!1})):(i.interactionIdx=i.actions.length-1,r(i,P).call(i,{ignorePath:!1})):r(i,P).call(i,{ignorePath:!1})),i.container.dispatchEvent(new CustomEvent("transition",{bubbles:!0,composed:!0,detail:{oldIndex:e,newIndex:i.interactionIdx}}))}}),I.set(this,{writable:!0,value:function(e){var t=i.actions[i.interactionIdx].frames;if(!t)return i.player.resetSegments(!0),void i.player.goToAndPlay(0,!0);"string"==typeof t?i.player.goToAndPlay(t,e):i.player.playSegments(t,e)}}),x.set(this,{writable:!0,value:function(){var e=i.actions[i.interactionIdx].path;if(!e)if("object"===t(i.enteredPlayer)&&"AnimationItem"===i.enteredPlayer.constructor.name){if(e=i.enteredPlayer,i.player===e)return void r(i,P).call(i,{ignorePath:!0})}else{var n=(e=i.loadedAnimation).substr(e.lastIndexOf("/")+1);if(n=n.substr(0,n.lastIndexOf(".json")),i.player.fileName===n)return void r(i,P).call(i,{ignorePath:!0})}var a=i.container.getBoundingClientRect(),o="width: "+a.width+"px !important; height: "+a.height+"px !important; background: "+i.container.style.background;if(i.container.setAttribute("style",o),"object"!==t(i.enteredPlayer)||"AnimationItem"!==i.enteredPlayer.constructor.name){if("string"==typeof i.enteredPlayer){var l=document.querySelector(i.enteredPlayer);l&&"LOTTIE-PLAYER"===l.nodeName&&(i.attachedListeners||(l.addEventListener("ready",(function(){i.container.style.width="",i.container.style.height=""})),l.addEventListener("load",(function(){i.player=l.getLottie(),r(i,P).call(i,{ignorePath:!0})})),i.attachedListeners=!0),l.load(e))}else i.enteredPlayer instanceof HTMLElement&&"LOTTIE-PLAYER"===i.enteredPlayer.nodeName&&(i.attachedListeners||(i.enteredPlayer.addEventListener("ready",(function(){i.container.style.width="",i.container.style.height=""})),i.enteredPlayer.addEventListener("load",(function(){i.player=i.enteredPlayer.getLottie(),r(i,P).call(i,{ignorePath:!0})})),i.attachedListeners=!0),i.enteredPlayer.load(e));if(!i.player)throw new Error("".concat(s," Specified player is invalid."),i.enteredPlayer)}else{if(!window.lottie)throw new Error("".concat(s," A Lottie player is required."));i.stop(),i.player.destroy(),i.container.innerHTML="","object"===t(e)&&"AnimationItem"===e.constructor.name?i.player=window.lottie.loadAnimation({loop:!1,autoplay:!1,animationData:e.animationData,container:i.container}):i.player=window.lottie.loadAnimation({loop:!1,autoplay:!1,path:e,container:i.container}),i.player.addEventListener("DOMLoaded",(function(){i.container.style.width="",i.container.style.height="",r(i,P).call(i,{ignorePath:!0})}))}i.clickCounter=0,i.playCounter=0}}),P.set(this,{writable:!0,value:function(e){var t=e.ignorePath,n=i.actions[i.interactionIdx].state,a=i.actions[i.interactionIdx].transition,o=i.actions[i.interactionIdx].path,s=i.stateHandler.get(n),l=i.transitionHandler.get(a),c=i.actions[i.interactionIdx].speed?i.actions[i.interactionIdx].speed:1,p=i.actions[i.interactionIdx].delay?i.actions[i.interactionIdx].delay:0;t||!(o||i.actions[i.actions.length-1].reset&&0===i.interactionIdx)?setTimeout((function(){s?s.call():"none"===n&&(i.player.loop=!1,i.player.autoplay=!1),l&&l.call(),i.player.autoplay&&(i.player.resetSegments(!0),r(i,I).call(i,!0)),i.player.setSpeed(c)}),p):r(i,x).call(i)}}),M.set(this,{writable:!0,value:function(e,t){if(-1!==e&&-1!==t){var n=i.getContainerCursorPosition(e,t);e=n.x,t=n.y}var a=i.actions.find((function(n){var i=n.position;if(i){if(Array.isArray(i.x)&&Array.isArray(i.y))return e>=i.x[0]&&e<=i.x[1]&&t>=i.y[0]&&t<=i.y[1];if(!Number.isNaN(i.x)&&!Number.isNaN(i.y))return e===i.x&&t===i.y}return!1}));if(a)if("seek"===a.type||"seek"===a.transition){var r=(e-a.position.x[0])/(a.position.x[1]-a.position.x[0]),o=(t-a.position.y[0])/(a.position.y[1]-a.position.y[0]);i.player.playSegments(a.frames,!0),a.position.y[0]<0&&a.position.y[1]>1?i.player.goToAndStop(Math.floor(r*i.player.totalFrames),!0):i.player.goToAndStop(Math.ceil((r+o)/2*i.player.totalFrames),!0)}else"loop"===a.type?i.player.playSegments(a.frames,!0):"play"===a.type?(!0===i.player.isPaused&&i.player.resetSegments(),i.player.playSegments(a.frames)):"stop"===a.type&&(i.player.resetSegments(!0),i.player.goToAndStop(a.frames[0],!0))}}),S.set(this,{writable:!0,value:function(){var e=i.getContainerVisibility(),t=i.actions.find((function(t){var n=t.visibility;return e>=n[0]&&e<=n[1]}));if(t)if("seek"===t.type){var n=t.frames[0],a=2==t.frames.length?t.frames[1]:i.player.totalFrames-1;null!==i.assignedSegment&&(i.player.resetSegments(!0),i.assignedSegment=null),i.player.goToAndStop(n+Math.round((e-t.visibility[0])/(t.visibility[1]-t.visibility[0])*(a-n)),!0)}else"loop"===t.type?(i.player.loop=!0,(null===i.assignedSegment||i.assignedSegment!==t.frames||!0===i.player.isPaused)&&(i.player.playSegments(t.frames,!0),i.assignedSegment=t.frames)):"play"===t.type?i.scrolledAndPlayed||(i.scrolledAndPlayed=!0,i.player.resetSegments(!0),t.frames?i.player.playSegments(t.frames,!0):i.player.play()):"stop"===t.type&&i.player.goToAndStop(t.frames[0],!0)}}),this.enteredPlayer=H,"object"!==t(H)||"AnimationItem"!==H.constructor.name){if("string"==typeof H){var W=document.querySelector(H);W&&"LOTTIE-PLAYER"===W.nodeName&&(H=W.getLottie())}else H instanceof HTMLElement&&"LOTTIE-PLAYER"===H.nodeName&&(H=H.getLottie());if(!H){var j=s+"Specified player:"+H+" is invalid.";throw new Error(j)}}"string"==typeof A&&(A=document.querySelector(A)),A||(A=H.wrapper),this.player=H,this.loadedAnimation=this.player.path+this.player.fileName+".json",this.attachedListeners=!1,this.container=A,this.mode=T,this.actions=C,this.options=O,this.assignedSegment=null,this.scrolledAndPlayed=!1,this.interactionIdx=0,this.clickCounter=0,this.playCounter=0,this.stateHandler=new Map,this.transitionHandler=new Map}var l,C,A;return l=e,(C=[{key:"getContainerVisibility",value:function(){var e=this.container.getBoundingClientRect(),t=e.top,n=e.height;return(window.innerHeight-t)/(window.innerHeight+n)}},{key:"getContainerCursorPosition",value:function(e,t){var n=this.container.getBoundingClientRect(),i=n.top;return{x:(e-n.left)/n.width,y:(t-i)/n.height}}},{key:"initScrollMode",value:function(){this.player.stop(),window.addEventListener("scroll",r(this,S))}},{key:"initCursorMode",value:function(){this.actions&&1===this.actions.length?"click"===this.actions[0].type?(this.player.loop=!1,this.player.stop(),this.container.addEventListener("click",r(this,h))):"hover"===this.actions[0].type?(this.player.loop=!1,this.player.stop(),this.container.addEventListener("mouseenter",r(this,h)),this.container.addEventListener("touchstart",r(this,h),{passive:!0})):"toggle"===this.actions[0].type?(this.player.loop=!1,this.player.stop(),this.container.addEventListener("click",r(this,d))):"hold"===this.actions[0].type||"pauseHold"===this.actions[0].type?(this.container.addEventListener("mouseenter",r(this,E)),this.container.addEventListener("mouseleave",r(this,w)),this.container.addEventListener("touchstart",r(this,E),{passive:!0}),this.container.addEventListener("touchend",r(this,w),{passive:!0})):"seek"===this.actions[0].type&&(this.player.loop=!0,this.player.stop(),this.container.addEventListener("mousemove",r(this,y)),this.container.addEventListener("touchmove",r(this,u),{passive:!1}),this.container.addEventListener("mouseout",r(this,v))):(this.player.loop=!0,this.player.stop(),this.container.addEventListener("mousemove",r(this,y)),this.container.addEventListener("mouseleave",r(this,v)),r(this,M).call(this,-1,-1))}},{key:"initChainMode",value:function(){r(this,c).call(this),this.player.loop=!1,this.player.stop(),r(this,P).call(this,{ignorePath:!1})}},{key:"start",value:function(){var e=this;"scroll"===this.mode?this.player.isLoaded?this.initScrollMode():this.player.addEventListener("DOMLoaded",(function(){e.initScrollMode()})):"cursor"===this.mode?this.player.isLoaded?this.initCursorMode():this.player.addEventListener("DOMLoaded",(function(){e.initCursorMode()})):"chain"===this.mode&&(this.player.isLoaded?this.initChainMode():this.player.addEventListener("DOMLoaded",(function(){e.initChainMode()})))}},{key:"redefineOptions",value:function(e){var n=e.actions,i=e.container,r=e.mode,o=e.player,l=a(e,["actions","container","mode","player"]);if(this.stop(),this.player.stop(),this.enteredPlayer=o,"object"!==t(o)||"AnimationItem"!==o.constructor.name){if("string"==typeof o){var c=document.querySelector(o);c&&"LOTTIE-PLAYER"===c.nodeName&&(o=c.getLottie())}else o instanceof HTMLElement&&"LOTTIE-PLAYER"===o.nodeName&&(o=o.getLottie());if(!o)throw new Error(s+"Specified player:"+o+" is invalid.",o)}"string"==typeof i&&(i=document.querySelector(i)),i||(i=o.wrapper),this.player=o,this.loadedAnimation=this.player.path+this.player.fileName+".json",this.attachedListeners=!1,this.container=i,this.mode=r,this.actions=n,this.options=l,this.assignedSegment=null,this.scrolledAndPlayed=!1,this.interactionIdx=0,this.clickCounter=0,this.playCounter=0,this.stateHandler=new Map,this.transitionHandler=new Map,this.start()}},{key:"stop",value:function(){"scroll"===this.mode&&window.removeEventListener("scroll",r(this,S)),"cursor"===this.mode&&(this.container.removeEventListener("click",r(this,h)),this.container.removeEventListener("click",r(this,d)),this.container.removeEventListener("mouseenter",r(this,h)),this.container.removeEventListener("touchstart",r(this,h)),this.container.removeEventListener("touchmove",r(this,u)),this.container.removeEventListener("mousemove",r(this,y)),this.container.removeEventListener("mouseleave",r(this,v)),this.container.removeEventListener("touchstart",r(this,E)),this.container.removeEventListener("touchend",r(this,w))),"chain"===this.mode&&(this.container.removeEventListener("click",r(this,h)),this.container.removeEventListener("click",r(this,p)),this.container.removeEventListener("mouseenter",r(this,h)),this.container.removeEventListener("touchstart",r(this,h)),this.container.removeEventListener("touchmove",r(this,u)),this.container.removeEventListener("mouseenter",r(this,p)),this.container.removeEventListener("touchstart",r(this,p)),this.container.removeEventListener("mouseenter",r(this,E)),this.container.removeEventListener("touchstart",r(this,E)),this.container.removeEventListener("mouseleave",r(this,w)),this.container.removeEventListener("mousemove",r(this,y)),this.container.removeEventListener("mouseout",r(this,v)),this.container.removeEventListener("touchend",r(this,w)),this.player.removeEventListener("loopComplete",r(this,m)),this.player.removeEventListener("complete",r(this,m)),this.player.removeEventListener("enterFrame",r(this,L)),this.player.removeEventListener("enterFrame",r(this,g)))}}])&&i(l.prototype,C),A&&i(l,A),e}(),c=new WeakMap,p=new WeakMap,d=new WeakMap,h=new WeakMap,y=new WeakMap,u=new WeakMap,v=new WeakMap,m=new WeakMap,f=new WeakMap,L=new WeakMap,g=new WeakMap,E=new WeakMap,w=new WeakMap,b=new WeakMap,k=new WeakMap,I=new WeakMap,x=new WeakMap,P=new WeakMap,M=new WeakMap,S=new WeakMap,C=function(e){var t=new l(e);return t.start(),t};e.LottieInteractivity=l,e.create=C,e.default=C,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).LottieInteractivity={})}(this,(function(e){"use strict";function t(e){return(t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){if(null==e)return{};var n,i,a=function(e,t){if(null==e)return{};var n,i,a={},r=Object.keys(e);for(i=0;i<r.length;i++)n=r[i],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(i=0;i<r.length;i++)n=r[i],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}function o(e,t){var n=t.get(e);if(!n)throw new TypeError("attempted to get private field on non-instance");return n.get?n.get.call(e):n.value}var s={player:"lottie-player"},l="[lottieInteractivity]:",c=function(){function e(){var i=this,c=arguments.length>0&&void 0!==arguments[0]?arguments[0]:s,A=c.actions,C=c.container,T=c.mode,H=c.player,O=r(c,["actions","container","mode","player"]);if(n(this,e),p.set(this,{writable:!0,value:function(){if(i.player){var e=function(){i.player.addEventListener("enterFrame",o(i,E)),i.container.addEventListener("mouseenter",o(i,w)),i.container.addEventListener("mouseleave",o(i,I)),i.container.addEventListener("touchstart",o(i,w),{passive:!0}),i.container.addEventListener("touchend",o(i,I),{passive:!0})};i.stateHandler.set("loop",(function(){i.actions[i.interactionIdx].loop?i.player.loop=parseInt(i.actions[i.interactionIdx].loop)-1:i.player.loop=!0,i.player.autoplay=!0})),i.stateHandler.set("autoplay",(function(){i.player.loop=!1,i.player.autoplay=!0})),i.stateHandler.set("click",(function(){i.player.loop=!1,i.player.autoplay=!1,i.container.addEventListener("click",o(i,d))})),i.stateHandler.set("hover",(function(){i.player.loop=!1,i.player.autoplay=!1,i.container.addEventListener("mouseenter",o(i,d)),i.container.addEventListener("touchstart",o(i,d),{passive:!0})})),i.transitionHandler.set("click",(function(){i.container.addEventListener("click",o(i,y))})),i.transitionHandler.set("hover",(function(){i.container.addEventListener("mouseenter",o(i,y)),i.container.addEventListener("touchstart",o(i,y),{passive:!0})})),i.transitionHandler.set("hold",e),i.transitionHandler.set("pauseHold",e),i.transitionHandler.set("repeat",(function(){i.player.loop=!0,i.player.autoplay=!0;i.player.addEventListener("loopComplete",(function e(){o(i,L).call(i,{handler:e})}))})),i.transitionHandler.set("onComplete",(function(){"loop"===i.actions[i.interactionIdx].state?i.player.addEventListener("loopComplete",o(i,f)):i.player.addEventListener("complete",o(i,f))})),i.transitionHandler.set("seek",(function(){i.player.stop(),i.player.addEventListener("enterFrame",o(i,g)),i.container.addEventListener("mousemove",o(i,u)),i.container.addEventListener("touchmove",o(i,v),{passive:!1}),i.container.addEventListener("mouseout",o(i,m))}))}}}),d.set(this,{writable:!0,value:function(){var e=i.actions[i.interactionIdx].forceFlag;e||!0!==i.player.isPaused?e&&o(i,b).call(i,!0):o(i,b).call(i,!0)}}),h.set(this,{writable:!0,value:function(){0===i.clickCounter?(i.player.play(),i.clickCounter++):(i.clickCounter++,i.player.setDirection(-1*i.player.playDirection),i.player.play())}}),y.set(this,{writable:!0,value:function(){var e=i.actions[i.interactionIdx].forceFlag,t=i.actions[i.interactionIdx].state,n=i.actions[i.interactionIdx].transition;if("chain"===i.mode){if(i.actions[i.interactionIdx].count){var a=parseInt(i.actions[i.interactionIdx].count);if(i.clickCounter<a-1)return void(i.clickCounter+=1)}return i.clickCounter=0,!e&&"click"===n&&"click"===t||"hover"===n&&"hover"===t?i.transitionHandler.get("onComplete").call():i.nextInteraction(),i.container.removeEventListener("click",o(i,y)),void i.container.removeEventListener("mouseenter",o(i,y))}e||!0!==i.player.isPaused?e&&i.player.goToAndPlay(0,!0):i.player.goToAndPlay(0,!0)}}),u.set(this,{writable:!0,value:function(e){o(i,P).call(i,e.clientX,e.clientY)}}),v.set(this,{writable:!0,value:function(e){e.cancelable&&e.preventDefault(),o(i,P).call(i,e.touches[0].clientX,e.touches[0].clientY)}}),m.set(this,{writable:!0,value:function(){o(i,P).call(i,-1,-1)}}),f.set(this,{writable:!0,value:function(){"loop"===i.actions[i.interactionIdx].state?i.player.removeEventListener("loopComplete",o(i,f)):i.player.removeEventListener("complete",o(i,f)),i.nextInteraction()}}),L.set(this,{writable:!0,value:function(e){var t=e.handler,n=1;i.actions[i.interactionIdx].repeat&&(n=i.actions[i.interactionIdx].repeat),i.playCounter>=n-1?(i.playCounter=0,i.player.removeEventListener("loopComplete",t),i.player.loop=!1,i.player.autoplay=!1,i.nextInteraction()):i.playCounter+=1}}),g.set(this,{writable:!0,value:function(){var e=i.actions[i.interactionIdx].frames;e&&i.player.currentFrame>=parseInt(e[1])-1&&(i.player.removeEventListener("enterFrame",o(i,g)),i.container.removeEventListener("mousemove",o(i,u)),i.container.removeEventListener("mouseout",o(i,m)),setTimeout(i.nextInteraction,0))}}),E.set(this,{writable:!0,value:function(){var e=i.actions[i.interactionIdx].frames;(e&&i.player.currentFrame>=e[1]||i.player.currentFrame>=i.player.totalFrames-1)&&(i.player.removeEventListener("enterFrame",o(i,E)),i.container.removeEventListener("mouseenter",o(i,w)),i.container.removeEventListener("mouseleave",o(i,I)),i.container.removeEventListener("touchstart",o(i,w),{passive:!0}),i.container.removeEventListener("touchend",o(i,I),{passive:!0}),i.player.pause(),i.holdStatus=!1,i.nextInteraction())}}),w.set(this,{writable:!0,value:function(){-1!==i.player.playDirection&&null!==i.holdStatus&&i.holdStatus||(i.player.setDirection(1),i.player.play(),i.holdStatus=!0)}}),I.set(this,{writable:!0,value:function(){"hold"===i.actions[i.interactionIdx].transition||"hold"===i.actions[0].type?(i.player.setDirection(-1),i.player.play()):"pauseHold"!==i.actions[i.interactionIdx].transition&&"pauseHold"!==i.actions[0].type||i.player.pause(),i.holdStatus=!1}}),x.set(this,{writable:!0,value:function(){var e=i.actions[i.interactionIdx].state,t=i.actions[i.interactionIdx].transition;"hover"!==e&&"click"!==e||(i.container.removeEventListener("click",o(i,d)),i.container.removeEventListener("mouseenter",o(i,d))),"hover"!==t&&"click"!==t||(i.container.removeEventListener("click",o(i,y)),i.container.removeEventListener("mouseenter",o(i,y)),i.container.removeEventListener("touchstart",o(i,y),{passive:!0}))}}),a(this,"jumpToInteraction",(function(e){o(i,x).call(i),i.interactionIdx=e,i.interactionIdx<0?i.interactionIdx=0:i.interactionIdx,i.nextInteraction(!1)})),a(this,"nextInteraction",(function(){var e=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];i.oldInterctionIdx=i.interactionIdx,o(i,x).call(i);var t=i.actions[i.interactionIdx].jumpTo;t?t>=0&&t<i.actions.length?(i.interactionIdx=t,o(i,S).call(i,{ignorePath:!1})):(i.interactionIdx=0,i.player.goToAndStop(0,!0),o(i,S).call(i,{ignorePath:!1})):(e&&i.interactionIdx++,i.interactionIdx>=i.actions.length?i.actions[i.actions.length-1].reset?(i.interactionIdx=0,i.player.resetSegments(!0),i.actions[i.interactionIdx].frames?i.player.goToAndStop(i.actions[i.interactionIdx].frames,!0):i.player.goToAndStop(0,!0),o(i,S).call(i,{ignorePath:!1})):(i.interactionIdx=i.actions.length-1,o(i,S).call(i,{ignorePath:!1})):o(i,S).call(i,{ignorePath:!1})),i.container.dispatchEvent(new CustomEvent("transition",{bubbles:!0,composed:!0,detail:{oldIndex:i.oldInterctionIdx,newIndex:i.interactionIdx}}))})),b.set(this,{writable:!0,value:function(e){var t=i.actions[i.interactionIdx].frames;if(!t)return i.player.resetSegments(!0),void i.player.goToAndPlay(0,!0);"string"==typeof t?i.player.goToAndPlay(t,e):i.player.playSegments(t,e)}}),k.set(this,{writable:!0,value:function(){var e=i.actions[i.interactionIdx].path;if(!e)if("object"===t(i.enteredPlayer)&&"AnimationItem"===i.enteredPlayer.constructor.name){if(e=i.enteredPlayer,i.player===e)return void o(i,S).call(i,{ignorePath:!0})}else{var n=(e=i.loadedAnimation).substr(e.lastIndexOf("/")+1);if(n=n.substr(0,n.lastIndexOf(".json")),i.player.fileName===n)return void o(i,S).call(i,{ignorePath:!0})}var a=i.container.getBoundingClientRect(),r="width: "+a.width+"px !important; height: "+a.height+"px !important; background: "+i.container.style.background;if(i.container.setAttribute("style",r),"object"!==t(i.enteredPlayer)||"AnimationItem"!==i.enteredPlayer.constructor.name){if("string"==typeof i.enteredPlayer){var s=document.querySelector(i.enteredPlayer);s&&"LOTTIE-PLAYER"===s.nodeName&&(i.attachedListeners||(s.addEventListener("ready",(function(){i.container.style.width="",i.container.style.height=""})),s.addEventListener("load",(function(){i.player=s.getLottie(),o(i,S).call(i,{ignorePath:!0})})),i.attachedListeners=!0),s.load(e))}else i.enteredPlayer instanceof HTMLElement&&"LOTTIE-PLAYER"===i.enteredPlayer.nodeName&&(i.attachedListeners||(i.enteredPlayer.addEventListener("ready",(function(){i.container.style.width="",i.container.style.height=""})),i.enteredPlayer.addEventListener("load",(function(){i.player=i.enteredPlayer.getLottie(),o(i,S).call(i,{ignorePath:!0})})),i.attachedListeners=!0),i.enteredPlayer.load(e));if(!i.player)throw new Error("".concat(l," Specified player is invalid."),i.enteredPlayer)}else{if(!window.lottie)throw new Error("".concat(l," A Lottie player is required."));i.stop(),i.player.destroy(),i.container.innerHTML="","object"===t(e)&&"AnimationItem"===e.constructor.name?i.player=window.lottie.loadAnimation({loop:!1,autoplay:!1,animationData:e.animationData,container:i.container}):i.player=window.lottie.loadAnimation({loop:!1,autoplay:!1,path:e,container:i.container}),i.player.addEventListener("DOMLoaded",(function(){i.container.style.width="",i.container.style.height="",o(i,S).call(i,{ignorePath:!0})}))}i.clickCounter=0,i.playCounter=0}}),S.set(this,{writable:!0,value:function(e){var t=e.ignorePath,n=i.actions[i.interactionIdx].frames,a=i.actions[i.interactionIdx].state,r=i.actions[i.interactionIdx].transition,s=i.actions[i.interactionIdx].path,l=i.stateHandler.get(a),c=i.transitionHandler.get(r),p=i.actions[i.interactionIdx].speed?i.actions[i.interactionIdx].speed:1,d=i.actions[i.interactionIdx].delay?i.actions[i.interactionIdx].delay:0;t||!(s||i.actions[i.actions.length-1].reset&&0===i.interactionIdx)?setTimeout((function(){n&&(i.player.autoplay=!1,i.player.resetSegments(!0),i.player.goToAndStop(n[0],!0)),l?l.call():"none"===a&&(i.player.loop=!1,i.player.autoplay=!1),c&&c.call(),i.player.autoplay&&(i.player.resetSegments(!0),o(i,b).call(i,!0)),i.player.setSpeed(p)}),d):o(i,k).call(i)}}),P.set(this,{writable:!0,value:function(e,t){if(-1!==e&&-1!==t){var n=i.getContainerCursorPosition(e,t);e=n.x,t=n.y}var a=i.actions.find((function(n){var i=n.position;if(i){if(Array.isArray(i.x)&&Array.isArray(i.y))return e>=i.x[0]&&e<=i.x[1]&&t>=i.y[0]&&t<=i.y[1];if(!Number.isNaN(i.x)&&!Number.isNaN(i.y))return e===i.x&&t===i.y}return!1}));if(a)if("seek"===a.type||"seek"===a.transition){var r=(e-a.position.x[0])/(a.position.x[1]-a.position.x[0]),o=(t-a.position.y[0])/(a.position.y[1]-a.position.y[0]);i.player.playSegments(a.frames,!0),a.position.y[0]<0&&a.position.y[1]>1?i.player.goToAndStop(Math.floor(r*i.player.totalFrames),!0):i.player.goToAndStop(Math.ceil((r+o)/2*i.player.totalFrames),!0)}else"loop"===a.type?i.player.playSegments(a.frames,!0):"play"===a.type?(!0===i.player.isPaused&&i.player.resetSegments(),i.player.playSegments(a.frames)):"stop"===a.type&&(i.player.resetSegments(!0),i.player.goToAndStop(a.frames[0],!0))}}),M.set(this,{writable:!0,value:function(){var e=i.getContainerVisibility(),t=i.actions.find((function(t){var n=t.visibility;return e>=n[0]&&e<=n[1]}));if(t)if("seek"===t.type){var n=t.frames[0],a=2==t.frames.length?t.frames[1]:i.player.totalFrames-1;null!==i.assignedSegment&&(i.player.resetSegments(!0),i.assignedSegment=null),i.player.goToAndStop(n+Math.round((e-t.visibility[0])/(t.visibility[1]-t.visibility[0])*(a-n)),!0)}else"loop"===t.type?(i.player.loop=!0,(null===i.assignedSegment||i.assignedSegment!==t.frames||!0===i.player.isPaused)&&(i.player.playSegments(t.frames,!0),i.assignedSegment=t.frames)):"play"===t.type?i.scrolledAndPlayed||(i.scrolledAndPlayed=!0,i.player.resetSegments(!0),t.frames?i.player.playSegments(t.frames,!0):i.player.play()):"stop"===t.type&&i.player.goToAndStop(t.frames[0],!0)}}),this.enteredPlayer=H,"object"!==t(H)||"AnimationItem"!==H.constructor.name){if("string"==typeof H){var W=document.querySelector(H);W&&"LOTTIE-PLAYER"===W.nodeName&&(H=W.getLottie())}else H instanceof HTMLElement&&"LOTTIE-PLAYER"===H.nodeName&&(H=H.getLottie());if(!H){var j=l+"Specified player:"+H+" is invalid.";throw new Error(j)}}"string"==typeof C&&(C=document.querySelector(C)),C||(C=H.wrapper),this.player=H,this.loadedAnimation=this.player.path+this.player.fileName+".json",this.attachedListeners=!1,this.container=C,this.mode=T,this.actions=A,this.options=O,this.assignedSegment=null,this.scrolledAndPlayed=!1,this.interactionIdx=0,this.oldInterctionIdx=0,this.clickCounter=0,this.playCounter=0,this.stateHandler=new Map,this.transitionHandler=new Map}var c,A,C;return c=e,(A=[{key:"getContainerVisibility",value:function(){var e=this.container.getBoundingClientRect(),t=e.top,n=e.height;return(window.innerHeight-t)/(window.innerHeight+n)}},{key:"getContainerCursorPosition",value:function(e,t){var n=this.container.getBoundingClientRect(),i=n.top;return{x:(e-n.left)/n.width,y:(t-i)/n.height}}},{key:"initScrollMode",value:function(){this.player.stop(),window.addEventListener("scroll",o(this,M),!0)}},{key:"initCursorMode",value:function(){this.actions&&1===this.actions.length?"click"===this.actions[0].type?(this.player.loop=!1,this.player.stop(),this.container.addEventListener("click",o(this,y))):"hover"===this.actions[0].type?(this.player.loop=!1,this.player.stop(),this.container.addEventListener("mouseenter",o(this,y)),this.container.addEventListener("touchstart",o(this,y),{passive:!0})):"toggle"===this.actions[0].type?(this.player.loop=!1,this.player.stop(),this.container.addEventListener("click",o(this,h))):"hold"===this.actions[0].type||"pauseHold"===this.actions[0].type?(this.container.addEventListener("mouseenter",o(this,w)),this.container.addEventListener("mouseleave",o(this,I)),this.container.addEventListener("touchstart",o(this,w),{passive:!0}),this.container.addEventListener("touchend",o(this,I),{passive:!0})):"seek"===this.actions[0].type&&(this.player.loop=!0,this.player.stop(),this.container.addEventListener("mousemove",o(this,u)),this.container.addEventListener("touchmove",o(this,v),{passive:!1}),this.container.addEventListener("mouseout",o(this,m))):(this.player.loop=!0,this.player.stop(),this.container.addEventListener("mousemove",o(this,u)),this.container.addEventListener("mouseleave",o(this,m)),o(this,P).call(this,-1,-1))}},{key:"initChainMode",value:function(){o(this,p).call(this),this.player.loop=!1,this.player.stop(),o(this,S).call(this,{ignorePath:!1})}},{key:"start",value:function(){var e=this;"scroll"===this.mode?this.player.isLoaded?this.initScrollMode():this.player.addEventListener("DOMLoaded",(function(){e.initScrollMode()})):"cursor"===this.mode?this.player.isLoaded?this.initCursorMode():this.player.addEventListener("DOMLoaded",(function(){e.initCursorMode()})):"chain"===this.mode&&(this.player.isLoaded?this.initChainMode():this.player.addEventListener("DOMLoaded",(function(){e.initChainMode()})))}},{key:"redefineOptions",value:function(e){var n=e.actions,i=e.container,a=e.mode,o=e.player,s=r(e,["actions","container","mode","player"]);if(this.stop(),this.enteredPlayer=o,"object"!==t(o)||"AnimationItem"!==o.constructor.name){if("string"==typeof o){var c=document.querySelector(o);c&&"LOTTIE-PLAYER"===c.nodeName&&(o=c.getLottie())}else o instanceof HTMLElement&&"LOTTIE-PLAYER"===o.nodeName&&(o=o.getLottie());if(!o)throw new Error(l+"Specified player:"+o+" is invalid.",o)}"string"==typeof i&&(i=document.querySelector(i)),i||(i=o.wrapper),this.player=o,this.loadedAnimation=this.player.path+this.player.fileName+".json",this.attachedListeners=!1,this.container=i,this.mode=a,this.actions=n,this.options=s,this.assignedSegment=null,this.scrolledAndPlayed=!1,this.interactionIdx=0,this.clickCounter=0,this.playCounter=0,this.holdStatus=null,this.stateHandler=new Map,this.transitionHandler=new Map,this.start()}},{key:"stop",value:function(){if("scroll"===this.mode&&window.removeEventListener("scroll",o(this,M),!0),"cursor"===this.mode&&(this.container.removeEventListener("click",o(this,y)),this.container.removeEventListener("click",o(this,h)),this.container.removeEventListener("mouseenter",o(this,y)),this.container.removeEventListener("touchstart",o(this,y)),this.container.removeEventListener("touchmove",o(this,v)),this.container.removeEventListener("mousemove",o(this,u)),this.container.removeEventListener("mouseleave",o(this,m)),this.container.removeEventListener("touchstart",o(this,w)),this.container.removeEventListener("touchend",o(this,I))),"chain"===this.mode&&(this.container.removeEventListener("click",o(this,y)),this.container.removeEventListener("click",o(this,d)),this.container.removeEventListener("mouseenter",o(this,y)),this.container.removeEventListener("touchstart",o(this,y)),this.container.removeEventListener("touchmove",o(this,v)),this.container.removeEventListener("mouseenter",o(this,d)),this.container.removeEventListener("touchstart",o(this,d)),this.container.removeEventListener("mouseenter",o(this,w)),this.container.removeEventListener("touchstart",o(this,w)),this.container.removeEventListener("mouseleave",o(this,I)),this.container.removeEventListener("mousemove",o(this,u)),this.container.removeEventListener("mouseout",o(this,m)),this.container.removeEventListener("touchend",o(this,I)),this.player))try{this.player.removeEventListener("loopComplete",o(this,f)),this.player.removeEventListener("complete",o(this,f)),this.player.removeEventListener("enterFrame",o(this,g)),this.player.removeEventListener("enterFrame",o(this,E))}catch(e){}this.player=null}}])&&i(c.prototype,A),C&&i(c,C),e}(),p=new WeakMap,d=new WeakMap,h=new WeakMap,y=new WeakMap,u=new WeakMap,v=new WeakMap,m=new WeakMap,f=new WeakMap,L=new WeakMap,g=new WeakMap,E=new WeakMap,w=new WeakMap,I=new WeakMap,x=new WeakMap,b=new WeakMap,k=new WeakMap,S=new WeakMap,P=new WeakMap,M=new WeakMap,A=function(e){var t=new c(e);return t.start(),t};e.LottieInteractivity=c,e.create=A,e.default=A,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=lottie-interactivity.min.js.map

package.json

 {
   "name": "@lottiefiles/lottie-interactivity",
   "description": "This is a small effects and interactivity library written to be paired with the Lottie Web Player",
-  "version": "1.3.4",
+  "version": "1.3.5-beta.0",
   "license": "MIT",
@@ -85,2 +85,2 @@ "main": "./dist/lottie-interactivity.min.js",
   }
-}
+}

README.md

@@ -5,3 +5,2 @@ # Lottie Interactivity
 ![NPM](https://img.shields.io/npm/l/@lottiefiles/lottie-interactivity?style=flat-square)
-![David](https://img.shields.io/david/LottieFiles/lottie-interactivity?style=flat-square)
 ![npm bundle size (scoped)](https://img.shields.io/bundlephobia/min/@lottiefiles/lottie-interactivity?style=flat-square)
@@ -13,2 +12,7 @@
 
+## Documentation
+
+For full documentation, visit [docs.lottiefiles.com/lottie-interactivity](https://docs.lottiefiles.com/lottie-interactivity/)
+
+
 ## Installation
@@ -36,8 +40,6 @@
 
-### To see examples of all these features, please visit the [LottieFiles interactivity page.](https://lottiefiles.com/interactivity#LI-chaining)
+#### To see examples of all these features, please visit the [LottieFiles interactivity page.](https://lottiefiles.com/interactivity#LI-chaining)
 
+---
 
-If you would like to take a look at some examples, feel free to have a look in the examples folder to see how each of
-the Lotties have been implemented.
-
 ## Getting started
@@ -48,3 +50,3 @@
 ```javascript
-<script src="https://unpkg.com/@lottiefiles/lottie-player@0.4.0/dist/lottie-player.js"></script> // place this in your body element
+<script src="https://unpkg.com/@lottiefiles/lottie-player@1/dist/lottie-player.js"></script> // place this in your body element
 ```
@@ -77,4 +79,4 @@
 
-Configuration modes include "scroll" where the animation will be synced to the scrolling of the window and "cursor"
-where the scrolling of the animation will be synced to the cursor position within the container.
+Configuration modes include "scroll" where the animation will be synced to the scrolling of the window, "cursor"
+where the scrolling of the animation will be synced to the cursor position within the container. And "chain" allowing you to interact with multiple Lottie animations one after the other.
 
@@ -201,396 +203,83 @@ The configuration can include a container field as shown in the next example. If a container is not provided the parent
 
-## Examples
+Lottie-Interactivity has a wide variety of interactions and modes possible, allowing you to easily add interactions to your Lottie animations. For the full documentation on what's possible and how to use this library [click here](https://docs.lottiefiles.com/lottie-interactivity/).
 
-### Scroll effect relative to container
 
-There may be situations where you would like to wrap the lottie player inside a container or just in general sync the
-lottie scroll with a div on your page. In which case you may pass a container variable with the container id into the
-action object as shown below. The scroll effect in this case will be activate once the "MyContainerId" is in viewport.
 
-```javascript
-LottieInteractivity.create({
-  player: '#secondLottie',
-  container: '#MyContainerId',
-  mode: 'scroll',
-  actions: [
-    {
-      visibility: [0, 1.0],
-      type: 'seek',
-      frames: [0, 100],
-    },
-  ],
-});
-```
+##### To see examples of all these features, please visit the [LottieFiles interactivity page.](https://lottiefiles.com/interactivity#LI-chaining)
 
-### Scroll effect with offset
+---
 
-If you would like to add an offset to the top of the container or player you may add an extra action object to the
-array. As per the example config below, from 0 to 30% visibility of the container, the lottie will be stopped and from
-30% to 100% visibility of the container the lottie will be synced with the scroll.
+## Our other Lottie related libraries
 
-```javascript
-LottieInteractivity.create({
-  player: '#firstLottie',
-  mode: 'scroll',
-  actions: [
-    {
-      visibility: [0, 0.3],
-      type: 'stop',
-      frames: [0],
-    },
-    {
-      visibility: [0.3, 1],
-      type: 'seek',
-      frames: [0, 100],
-    },
-  ],
-});
-```
+<table style="table-layout:fixed; white-space: nowrap;">
+  <tr>
+    <th>Project</th>
+    <th>Description</th>
+  </tr>
+  <!-- TEMPLATE FOR NEW ROW -->
+  <!-- START ROW
+  <tr>
+    <td>lang</td>
+    <td><a href="" target="_blank" rel="noopener noreferrer">supabase-lang</a></td>
+  </tr>
+  END ROW -->
+  <tr>
+    <td><a href="https://github.com/LottieFiles/lottie-player" target="_blank" rel="noopener noreferrer">lottie-player</a></td>
+    <td>
+      A Web Component for easily embedding and playing Lottie animations and the Lottie-based Telegram Sticker (tgs) animations in websites.
+    </td>
+  </tr>  
+  <tr>
+    <td><a href="https://github.com/LottieFiles/lottie-react" target="_blank" rel="noopener noreferrer">lottie-react</a></td>
+    <td>
+    A React component for the Lottie Web player.
+    </td>
+  </tr>
+  <tr>
+    <td><a href="https://github.com/LottieFiles/lottie-vue" target="_blank" rel="noopener noreferrer">lottie-vue</a></td>
+    <td>
+    A Vue component for the Lottie player.
+    </td>
+  </tr>
+  <tr>
+    <td><a href="https://github.com/LottieFiles/svelte-lottie-player" target="_blank" rel="noopener noreferrer">svelte-lottie-player</a></td>
+    <td>
+    Lottie player component for use with Svelte.
+    </td>
+  </tr>
+  <tr>
+    <td><a href="https://github.com/LottieFiles/jlottie" target="_blank" rel="noopener noreferrer">jLottie</a></td>
+    <td>
+    jLottie is suitable as a general purpose lottie player, though implements a subset of the features in the core player - this approach leads to a tiny footprint and great performance.
+    </td>
+  </tr>
+  <tr>
+    <td><a href="https://github.com/orgs/dotlottie/repositories" target="_blank" rel="noopener noreferrer">dotLottie</a></td>
+    <td>
+    dotLottie is an open-source file format that aggregates one or more Lottie files and their associated resources into a single file. They are ZIP archives compressed with the Deflate compression method and carry the file extension of ".lottie".
+    </td>
+  </tr>
+  <tr>
+    <td><a href="https://github.com/LottieFiles/lottie-js" target="_blank" rel="noopener noreferrer">lottie-js</a></td>
+    <td>
+    The library consists of methods to map the Lottie JSON to the object model and interact with properties as well as manipulate them.
+    </td>
+  </tr>
+  <tr>
+    <td><a href="https://github.com/LottieFiles/lottie-theming" target="_blank" rel="noopener noreferrer">lottie-theming</a></td>
+    <td>
+    A library to extract themable properties and apply different themes to a given Lottie
+    </td>
+  </tr>
 
-### Scroll effect with offset and segment looping
 
-In cases where you would like the animation to loop from a specific frame to a specific frame, you can add an additional
-object to actions in which you can specify the frames. In the example below, the lottie loops frame 150 to 300 once 45%
-of the container is reached.
+</table>
 
-```javascript
-LottieInteractivity.create({
-  player: '#firstLottie',
-  mode: 'scroll',
-  actions: [
-    {
-      visibility: [0, 0.3],
-      type: 'stop',
-      frames: [0],
-    },
-    {
-      visibility: [0.3, 0.45],
-      type: 'seek',
-      frames: [0, 150],
-    },
-    {
-      visibility: [0.45, 1],
-      type: 'loop',
-      frames: [150, 300],
-    },
-  ],
-});
-```
+## Community & Support
 
-### Play segments
+- [Github issues.](https://github.com/LottieFiles/lottie-interactivity/issues) For bugs and errors you encounter using this player.
+- [Discord.](https://lottiefiles.com/discord) For hanging out with the community and sharing your awesome Lottie animations!
 
-If you would like to play the animation and loop it only from a certain frame to a certain frame of your choosing, then
-you can utilize the loop action and frames variable. The config below shows this example.
+## License
 
-```javascript
-LottieInteractivity.create({
-  player: '#firstLottie',
-  mode: 'scroll',
-  actions: [
-    {
-      visibility: [0.45, 1],
-      type: 'loop',
-      frames: [17, 63],
-    },
-  ],
-});
-```
-
-### Play segments on hover
-
-To play the animation on hover you can pair the cursor mode with the play action. You may even utilize this to stop the
-animation on hover via the "stop" type action instead of "play". Available cursor actions are "loop","seek","play" and
-"stop".
-
-```javascript
-LottieInteractivity.create({
-  player: '#firstLottie',
-  mode: 'cursor',
-  actions: [
-    {
-      position: { x: [0, 1], y: [0, 1] },
-      type: 'loop',
-      frames: [50, 139],
-    },
-  ],
-});
-```
-
-### Sync animation with cursor movement
-
-To sync the position of the cursor with the frames of the animation , you will need to add a position object to the
-action. This tells the library which position in the container that the animation should end at. As you move the cursor
-along the given container (No container provided in this example and the library takes the wrapper div for the Lottie as
-the container) the frames will move according to the cursors position.
-
-```javascript
-LottieInteractivity.create({
-  player: '#firstLottie',
-  mode: 'cursor',
-  actions: [
-    {
-      position: { x: [0, 1], y: [0, 1] },
-      type: 'seek',
-      frames: [0, 100],
-    },
-  ],
-});
-```
-
-### Sync animation with cursor horizontal movement
-
-The cursor sync function can be used to either sync with the horizontal movement of the cursor or the vertical movement
-of the cursor. This example shows the horizontal sync.
-
-```javascript
-LottieInteractivity.create({
-  player: '#firstLottie',
-  mode: 'cursor',
-  actions: [
-    {
-      position: { x: [0, 1], y: [-1, 2] },
-      type: 'seek',
-      frames: [0, 179],
-    },
-    {
-      position: { x: -1, y: -1 },
-      type: 'stop',
-      frames: [0],
-    },
-  ],
-});
-```
-
-### Play animation on click
-
-Play a Lottie when clicked on. Clicking multiple times won't restart
-the animation if its already playing. However if you want the animation to restart as soon as it's clicked on
-set the 'forceFlag' property to true.
-
-```javascript
-LottieInteractivity.create({
-  player:'#firstLottie',
-  mode:"cursor",
-    actions: [{
-        type: "click",
-        forceFlag: false
-      }]
-});
-```
-
-### Play animation on hover
-
-Play a Lottie when hovered. Hovering multiple times won't restart
-the animation if its already playing. However if you want the animation to restart as soon as it's hovered on
-set the 'forceFlag' property to true.
-
-```javascript
-LottieInteractivity.create({
-  player:'#firstLottie',
-  mode:"cursor",
-  actions: [{
-    type: "hover",
-    forceFlag: false
-  }]
-});
-```
-
-### Toggle animations
-
-Toggle a Lottie when clicked on.
-
-```javascript
-LottieInteractivity.create({
-  player:'#toggleLottie',
-  mode: "cursor",
-  actions: [{
-      type: "toggle",
-    }]
-});
-```
-
-### Play animation when visible
-
-Play a Lottie when it is visible. Visibility can be customised to play the
-animation when a percentage of the container is reached. Here [0.50, 1.0] means the animation will play when 50% of the container is
-reached, [0, 1.0] will play as soon as the container is visible.
-
-```javascript
-LottieInteractivity.create({
-  mode:"cursor",
-  player:'#firstLottie',
-  actions: [{
-    visibility: [0.50, 1.0],
-    type: "play"
-  }]
-});
-```
-
-### Play animation on hold
-
-The animation will play when the cursor is placed over the animation,
-and in reverse if the cursor leaves the animation.
-
-```javascript
-LottieInteractivity.create({
-  mode:"cursor",
-  player:'#firstLottie',
-  actions: [{
-    type: "hold"
-  }]
-});
-```
-
-### Play animation on hold and pause when released
-
-The animation will play when the cursor is placed over the animation,
-and pause if the cursor leaves the animation.
-
-```javascript
-LottieInteractivity.create({
-  mode:"cursor",
-  player:'#fourteenthLottie',
-  actions: [{
-    type: "pauseHold"
-  }]
-});
-```
-
-## Chaining mode
-
-When using this mode you now have the power to chain different segments of animations depending on how
-the user interacts (click x amount of times, hover..) with the segment but also with Lottie events (onComplete).
-By using the 'chain' mode Lottie-interactivity can even load separate animations in succession depending on the interaction.
-
-In this example 3 segments are present. The pigeon running on loop, an explosion when the user clicks and the feathers falling once
-the explosion has finished.
-
-```javascript
-LottieInteractivity.create({
-  mode:"chain",
-  player:'#explodingBird',
-  actions: [
-    {
-      state: 'loop',
-      transition: 'click',
-      frames: 'bird'
-    },
-    {
-      state: 'autoplay',
-      transition: 'onComplete',
-      frames: 'explosion'
-    },
-    {
-      state: 'autoplay',
-      transition: 'onComplete',
-      frames: 'feathers',
-      reset: true
-    }
-  ],
-});
-```
-
-## Getting started
-
-The name of the player ie: 'explodingBird' in this example is the ID set to the lottie-player component on the
-html page. Interaction chaining can be activated by using the 'chain' mode. An 'actions' array serves to
-configure each segment and how to interact with it.
-Multiple objects can be added into this array and therefore multiple different ways to interact and transit
-through different segments of an animation.
-
-Each object in the actions array should have a 'state' and 'transition' property.
-
-### State
-
-State defines how the segment of the animation will be playing when loaded and waiting for an interaction.
-
-State can have the following values:
-
-#### autoplay
-Plays the animation once on load.
-
-#### loop
-Loops the animation.
-
-Optionally a 'loop' property can be defined to loop x amount of times
-
-#### click
-Plays the animation on click.
-
-#### hover
-Plays the animation on hover.
-
-#### none
-Animation won't play
-
-
-### Transition
-
-Transition defines the interaction that will cause Lottie-Interactivity to go to the next interaction link in the chain.
-
-Transition can have the following values:
-
-#### click
-Causes a transition when clicking on the animation is detected.
-
-Optionally a 'count' property can be defined to transit after x amount of clicks
-
-#### hover
-Causes a transition when hovering over the animation is detected.
-
-Optionally a 'count' property can be defined to transit after x amount of hovers
-
-#### repeat
-Play the animation x amount of times before transiting.
-
-A 'repeat' property containing a number can then be used to define how many times the animation will repeat before transiting
-
-#### hold
-Hover over the animation for the length of the 'frames' property to cause a transition. If the cursor leaves the animation, it plays in reverse.
-
-#### pauseHold
-Hover over the animation for the length of the 'frames' property to cause a transition. If the cursor leaves the animation, it pauses.
-
-#### seek
-Sync animation with cursor position. A 'position' object will be needed as well as a 'frames' array.
-
-#### onComplete
-When the animation has finished playing the defined segment, a transition will occur.
-
-#### none
-Animation won't transit.
-
-### Frames
-
-Each link in the interaction chain can have a defined segment of frames to play. The 'frames' array's first value
-is the start and the second value is the end. If you don't like defining frame numbers, named markers can also be used.
-More information about named markers <a href="https://github.com/airbnb/lottie-web/wiki/Markers" class="lf-link text-grey-dark font-lf-bold" target="_blank"> here. </a>
-
-If no frames are provided the entirety of the animation is played.
-
-### Path
-
-A 'path' property can be used to define where to load the animation from.
-
-### Additional properties
-
-#### jumpTo: [interaction index]
-Jumps to the action defined at the submitted index after the necessary interaction is detected.
-
-#### reset: [true/false]
-Useful for the last action, if true will go back to the first action.
-The 'transition' event is fired from the lottie-player element every time a transition occurs.
-The event contains the following details:
-oldIndex
-newIndex
-
-#### forceFlag: [true/false]
-If true, click and hover interactions will play straight away. Otherwise, will ignore if animation is already playing.
-
-#### delay: [time in milliseconds]
-Will delay all interactions and playback of the animation until the delay is finished.
-
-#### speed: [integer]
-Set the speed of the animation, 1 being the default speed.
-
-### To see examples of all these features, please visit the [LottieFiles interactivity page.](https://lottiefiles.com/interactivity#LI-chaining)
+MIT License © LottieFiles.com

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No v1

Quality

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Lines of code

281

increased by3.69%

Number of medium supply chain risk alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

174429

decreased by-15.41%

Number of low quality alerts

1

increased byInfinity%

Number of lines in readme file

280

decreased by-52.62%

No dependency changes