@lottiefiles/lottie-interactivity - npm Package Compare versions

Comparing version 0.1.4 to 0.1.5

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,o=function(e,t){if(null==e)return{};var n,i,o={},r=Object.keys(e);for(i=0;i<r.length;i++)n=r[i],t.indexOf(n)>=0||(o[n]=e[n]);return o}(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)&&(o[n]=e[n])}return o}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 r={player:"lottie-player"},a=function(){function a(){var n=this,u=arguments.length>0&&void 0!==arguments[0]?arguments[0]:r,c=u.actions,f=u.container,d=u.mode,m=u.player,v=i(u,["actions","container","mode","player"]);if(t(this,a),s.set(this,{writable:!0,value:function(e){o(n,p).call(n,e.clientX,e.clientY)}}),l.set(this,{writable:!0,value:function(){o(n,p).call(n,-1,-1)}}),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 o=n.actions.find((function(n){var i=n.position;return Array.isArray(i.x)&&Array.isArray(i.y)?e>=i.x[0]&&e<=i.x[1]&&t>=i.y[0]&&t<=i.y[1]:!Number.isNaN(i.x)&&!Number.isNaN(i.y)&&(e===i.x&&t===i.y)}));if(o)if("seek"===o.type){var r=(e-o.position.x[0])/(o.position.x[1]-o.position.x[0]),a=(t-o.position.y[0])/(o.position.y[1]-o.position.y[0]);n.player.playSegments(o.frames,!0),o.position.y[0]<0&&o.position.y[1]>1?n.player.goToAndStop(Math.floor(r*n.player.totalFrames),!0):n.player.goToAndStop(Math.ceil((r+a)/2*n.player.totalFrames),!0)}else"loop"===o.type?n.player.playSegments(o.frames,!0):"play"===o.type?(!0===n.player.isPaused&&n.player.resetSegments(),n.player.playSegments(o.frames)):"stop"===o.type&&n.player.goToAndStop(o.frames[0],!0)}}),y.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]}));t&&("seek"===t.type?n.player.goToAndStop(Math.ceil((e-t.visibility[0])/(t.visibility[1]-t.visibility[0])*n.player.totalFrames),!0):"loop"===t.type?(null===n.assignedSegment||n.assignedSegment!==t.frames||!0===n.player.isPaused)&&(n.player.playSegments(t.frames,!0),n.assignedSegment=t.frames):"play"===t.type?!0===n.player.isPaused&&(n.player.resetSegments(),n.player.play()):"stop"===t.type&&n.player.goToAndStop(t.frames[0],!0))}}),"object"!==e(m)||"AnimationItem"!==m.constructor.name){if("string"==typeof m){var g=document.querySelector(m);g&&"LOTTIE-PLAYER"===g.nodeName&&(m=g.getLottie())}else m instanceof HTMLElement&&"LOTTIE-PLAYER"===m.nodeName&&(m=m.getLottie());if(!m)throw new Error("".concat("[lottieInteractivity]:"," Specified player is invalid."),m)}"string"==typeof f&&(f=document.querySelector(f)),f||(f=m.wrapper),this.player=m,this.container=f,this.mode=d,this.actions=c,this.options=v,this.assignedSegment=null}var u,c,f;return u=a,(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:"start",value:function(){var e=this;"scroll"===this.mode&&this.player.addEventListener("DOMLoaded",(function(){e.player.loop=!0,e.player.stop(),window.addEventListener("scroll",o(e,y))})),"cursor"===this.mode&&this.player.addEventListener("DOMLoaded",(function(){e.player.loop=!0,e.player.stop(),e.container.addEventListener("mousemove",o(e,s)),e.container.addEventListener("mouseout",o(e,l))}))}},{key:"stop",value:function(){"scroll"===this.mode&&window.removeEventListener("scroll",o(this,y)),"cursor"===this.mode&&(this.container.addEventListener("mousemove",o(this,s)),this.container.addEventListener("mouseout",o(this,l)))}}])&&n(u.prototype,c),f&&n(u,f),a}(),s=new WeakMap,l=new WeakMap,p=new WeakMap,y=new WeakMap,u=function(e){var t=new a(e);return t.start(),t};export default u;export{a as LottieInteractivity,u 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){if(null==e)return{};var n,i,o=function(e,t){if(null==e)return{};var n,i,o={},r=Object.keys(e);for(i=0;i<r.length;i++)n=r[i],t.indexOf(n)>=0||(o[n]=e[n]);return o}(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)&&(o[n]=e[n])}return o}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 r={player:"lottie-player"},a=function(){function a(){var n=this,u=arguments.length>0&&void 0!==arguments[0]?arguments[0]:r,c=u.actions,f=u.container,d=u.mode,m=u.player,v=i(u,["actions","container","mode","player"]);if(t(this,a),s.set(this,{writable:!0,value:function(e){o(n,y).call(n,e.clientX,e.clientY)}}),l.set(this,{writable:!0,value:function(){o(n,y).call(n,-1,-1)}}),y.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 o=n.actions.find((function(n){var i=n.position;return Array.isArray(i.x)&&Array.isArray(i.y)?e>=i.x[0]&&e<=i.x[1]&&t>=i.y[0]&&t<=i.y[1]:!Number.isNaN(i.x)&&!Number.isNaN(i.y)&&(e===i.x&&t===i.y)}));if(o)if("seek"===o.type){var r=(e-o.position.x[0])/(o.position.x[1]-o.position.x[0]),a=(t-o.position.y[0])/(o.position.y[1]-o.position.y[0]);n.player.playSegments(o.frames,!0),o.position.y[0]<0&&o.position.y[1]>1?n.player.goToAndStop(Math.floor(r*n.player.totalFrames),!0):n.player.goToAndStop(Math.ceil((r+a)/2*n.player.totalFrames),!0)}else"loop"===o.type?n.player.playSegments(o.frames,!0):"play"===o.type?(!0===n.player.isPaused&&n.player.resetSegments(),n.player.playSegments(o.frames)):"stop"===o.type&&n.player.goToAndStop(o.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]}));t&&("seek"===t.type?n.player.goToAndStop(Math.ceil((e-t.visibility[0])/(t.visibility[1]-t.visibility[0])*n.player.totalFrames),!0):"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),n.player.play()):"stop"===t.type&&n.player.goToAndStop(t.frames[0],!0))}}),"object"!==e(m)||"AnimationItem"!==m.constructor.name){if("string"==typeof m){var g=document.querySelector(m);g&&"LOTTIE-PLAYER"===g.nodeName&&(m=g.getLottie())}else m instanceof HTMLElement&&"LOTTIE-PLAYER"===m.nodeName&&(m=m.getLottie());if(!m)throw new Error("".concat("[lottieInteractivity]:"," Specified player is invalid."),m)}"string"==typeof f&&(f=document.querySelector(f)),f||(f=m.wrapper),this.player=m,this.container=f,this.mode=d,this.actions=c,this.options=v,this.assignedSegment=null,this.scrolledAndPlayed=!1}var u,c,f;return u=a,(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:"start",value:function(){var e=this;"scroll"===this.mode&&this.player.addEventListener("DOMLoaded",(function(){e.player.stop(),window.addEventListener("scroll",o(e,p))})),"cursor"===this.mode&&this.player.addEventListener("DOMLoaded",(function(){e.player.loop=!0,e.player.stop(),e.container.addEventListener("mousemove",o(e,s)),e.container.addEventListener("mouseout",o(e,l))}))}},{key:"stop",value:function(){"scroll"===this.mode&&window.removeEventListener("scroll",o(this,p)),"cursor"===this.mode&&(this.container.addEventListener("mousemove",o(this,s)),this.container.addEventListener("mouseout",o(this,l)))}},{key:"animate",value:function(e){var t=e.timing,n=e.draw,i=e.duration,o=performance.now();requestAnimationFrame((function e(r){var a=(r-o)/i;a>1&&(a=1);var s=t(a);n(s),a<1&&requestAnimationFrame(e)}))}}])&&n(u.prototype,c),f&&n(u,f),a}(),s=new WeakMap,l=new WeakMap,y=new WeakMap,p=new WeakMap,u=function(e){var t=new a(e);return t.start(),t};export default u;export{a as LottieInteractivity,u 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 o(e,t){if(null==e)return{};var n,i,o=function(e,t){if(null==e)return{};var n,i,o={},r=Object.keys(e);for(i=0;i<r.length;i++)n=r[i],t.indexOf(n)>=0||(o[n]=e[n]);return o}(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)&&(o[n]=e[n])}return o}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 a={player:"lottie-player"},s=function(){function e(){var i=this,s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:a,c=s.actions,f=s.container,d=s.mode,m=s.player,v=o(s,["actions","container","mode","player"]);if(n(this,e),l.set(this,{writable:!0,value:function(e){r(i,y).call(i,e.clientX,e.clientY)}}),p.set(this,{writable:!0,value:function(){r(i,y).call(i,-1,-1)}}),y.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 o=i.actions.find((function(n){var i=n.position;return Array.isArray(i.x)&&Array.isArray(i.y)?e>=i.x[0]&&e<=i.x[1]&&t>=i.y[0]&&t<=i.y[1]:!Number.isNaN(i.x)&&!Number.isNaN(i.y)&&(e===i.x&&t===i.y)}));if(o)if("seek"===o.type){var r=(e-o.position.x[0])/(o.position.x[1]-o.position.x[0]),a=(t-o.position.y[0])/(o.position.y[1]-o.position.y[0]);i.player.playSegments(o.frames,!0),o.position.y[0]<0&&o.position.y[1]>1?i.player.goToAndStop(Math.floor(r*i.player.totalFrames),!0):i.player.goToAndStop(Math.ceil((r+a)/2*i.player.totalFrames),!0)}else"loop"===o.type?i.player.playSegments(o.frames,!0):"play"===o.type?(!0===i.player.isPaused&&i.player.resetSegments(),i.player.playSegments(o.frames)):"stop"===o.type&&i.player.goToAndStop(o.frames[0],!0)}}),u.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]}));t&&("seek"===t.type?i.player.goToAndStop(Math.ceil((e-t.visibility[0])/(t.visibility[1]-t.visibility[0])*i.player.totalFrames),!0):"loop"===t.type?(null===i.assignedSegment||i.assignedSegment!==t.frames||!0===i.player.isPaused)&&(i.player.playSegments(t.frames,!0),i.assignedSegment=t.frames):"play"===t.type?!0===i.player.isPaused&&(i.player.resetSegments(),i.player.play()):"stop"===t.type&&i.player.goToAndStop(t.frames[0],!0))}}),"object"!==t(m)||"AnimationItem"!==m.constructor.name){if("string"==typeof m){var g=document.querySelector(m);g&&"LOTTIE-PLAYER"===g.nodeName&&(m=g.getLottie())}else m instanceof HTMLElement&&"LOTTIE-PLAYER"===m.nodeName&&(m=m.getLottie());if(!m)throw new Error("".concat("[lottieInteractivity]:"," Specified player is invalid."),m)}"string"==typeof f&&(f=document.querySelector(f)),f||(f=m.wrapper),this.player=m,this.container=f,this.mode=d,this.actions=c,this.options=v,this.assignedSegment=null}var s,c,f;return s=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:"start",value:function(){var e=this;"scroll"===this.mode&&this.player.addEventListener("DOMLoaded",(function(){e.player.loop=!0,e.player.stop(),window.addEventListener("scroll",r(e,u))})),"cursor"===this.mode&&this.player.addEventListener("DOMLoaded",(function(){e.player.loop=!0,e.player.stop(),e.container.addEventListener("mousemove",r(e,l)),e.container.addEventListener("mouseout",r(e,p))}))}},{key:"stop",value:function(){"scroll"===this.mode&&window.removeEventListener("scroll",r(this,u)),"cursor"===this.mode&&(this.container.addEventListener("mousemove",r(this,l)),this.container.addEventListener("mouseout",r(this,p)))}}])&&i(s.prototype,c),f&&i(s,f),e}(),l=new WeakMap,p=new WeakMap,y=new WeakMap,u=new WeakMap,c=function(e){var t=new s(e);return t.start(),t};e.LottieInteractivity=s,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 o(e,t){if(null==e)return{};var n,i,o=function(e,t){if(null==e)return{};var n,i,o={},r=Object.keys(e);for(i=0;i<r.length;i++)n=r[i],t.indexOf(n)>=0||(o[n]=e[n]);return o}(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)&&(o[n]=e[n])}return o}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 a={player:"lottie-player"},s=function(){function e(){var i=this,s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:a,u=s.actions,f=s.container,d=s.mode,m=s.player,v=o(s,["actions","container","mode","player"]);if(n(this,e),l.set(this,{writable:!0,value:function(e){r(i,p).call(i,e.clientX,e.clientY)}}),y.set(this,{writable:!0,value:function(){r(i,p).call(i,-1,-1)}}),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 o=i.actions.find((function(n){var i=n.position;return Array.isArray(i.x)&&Array.isArray(i.y)?e>=i.x[0]&&e<=i.x[1]&&t>=i.y[0]&&t<=i.y[1]:!Number.isNaN(i.x)&&!Number.isNaN(i.y)&&(e===i.x&&t===i.y)}));if(o)if("seek"===o.type){var r=(e-o.position.x[0])/(o.position.x[1]-o.position.x[0]),a=(t-o.position.y[0])/(o.position.y[1]-o.position.y[0]);i.player.playSegments(o.frames,!0),o.position.y[0]<0&&o.position.y[1]>1?i.player.goToAndStop(Math.floor(r*i.player.totalFrames),!0):i.player.goToAndStop(Math.ceil((r+a)/2*i.player.totalFrames),!0)}else"loop"===o.type?i.player.playSegments(o.frames,!0):"play"===o.type?(!0===i.player.isPaused&&i.player.resetSegments(),i.player.playSegments(o.frames)):"stop"===o.type&&i.player.goToAndStop(o.frames[0],!0)}}),c.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]}));t&&("seek"===t.type?i.player.goToAndStop(Math.ceil((e-t.visibility[0])/(t.visibility[1]-t.visibility[0])*i.player.totalFrames),!0):"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),i.player.play()):"stop"===t.type&&i.player.goToAndStop(t.frames[0],!0))}}),"object"!==t(m)||"AnimationItem"!==m.constructor.name){if("string"==typeof m){var g=document.querySelector(m);g&&"LOTTIE-PLAYER"===g.nodeName&&(m=g.getLottie())}else m instanceof HTMLElement&&"LOTTIE-PLAYER"===m.nodeName&&(m=m.getLottie());if(!m)throw new Error("".concat("[lottieInteractivity]:"," Specified player is invalid."),m)}"string"==typeof f&&(f=document.querySelector(f)),f||(f=m.wrapper),this.player=m,this.container=f,this.mode=d,this.actions=u,this.options=v,this.assignedSegment=null,this.scrolledAndPlayed=!1}var s,u,f;return s=e,(u=[{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:"start",value:function(){var e=this;"scroll"===this.mode&&this.player.addEventListener("DOMLoaded",(function(){e.player.stop(),window.addEventListener("scroll",r(e,c))})),"cursor"===this.mode&&this.player.addEventListener("DOMLoaded",(function(){e.player.loop=!0,e.player.stop(),e.container.addEventListener("mousemove",r(e,l)),e.container.addEventListener("mouseout",r(e,y))}))}},{key:"stop",value:function(){"scroll"===this.mode&&window.removeEventListener("scroll",r(this,c)),"cursor"===this.mode&&(this.container.addEventListener("mousemove",r(this,l)),this.container.addEventListener("mouseout",r(this,y)))}},{key:"animate",value:function(e){var t=e.timing,n=e.draw,i=e.duration,o=performance.now();requestAnimationFrame((function e(r){var a=(r-o)/i;a>1&&(a=1);var s=t(a);n(s),a<1&&requestAnimationFrame(e)}))}}])&&i(s.prototype,u),f&&i(s,f),e}(),l=new WeakMap,y=new WeakMap,p=new WeakMap,c=new WeakMap,u=function(e){var t=new s(e);return t.start(),t};e.LottieInteractivity=s,e.create=u,e.default=u,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": "0.1.4",
+  "version": "0.1.5",
   "license": "MIT",
@@ -16,5 +16,13 @@ "main": "./dist/lottie-interactivity.min.js",
     "@babel/preset-env": "^7.9.5",
+    "@commitlint/cli": "^12.1.1",
+    "@commitlint/config-conventional": "^12.1.1",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-strip": "^1.3.2",
+    "@semantic-release/changelog": "^5.0.1",
+    "@semantic-release/commit-analyzer": "^8.0.1",
+    "@semantic-release/git": "^9.0.0",
+    "@semantic-release/github": "^7.2.1",
+    "@semantic-release/npm": "^7.1.1",
+    "@semantic-release/release-notes-generator": "^9.0.2",
     "babel-eslint": "^10.1.0",
@@ -29,3 +37,4 @@ "eslint": "^6.8.0",
     "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-terser": "^5.3.0"
+    "rollup-plugin-terser": "^5.3.0",
+    "semantic-release": "^17.4.2"
   },
@@ -40,3 +49,4 @@ "dependencies": {
     "lint:fix": "eslint . --ext .ts,.tsx,.js --fix",
-    "prepublishOnly": "yarn build"
+    "prepublishOnly": "yarn build",
+    "release": "semantic-release"
   },
@@ -60,2 +70,3 @@ "repository": {
     "hooks": {
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
       "pre-commit": "lint-staged"
@@ -62,0 +73,0 @@ }

README.md

@@ -148,2 +148,49 @@ # Lottie Interactivity
 
+##### 3.2 Vue config
+
+The configuration for the library remains the same for vue apps. However usage and initialization is as follows.
+Import the create function from the lottie interactivity library and call the create function. With frameworks like
+vue it is ideal to add an event listener that waits for the lottie player to load before calling the interactivity
+library. An example is as follows for a very basic vue class component.
+
+```javascript
+<template>
+  <!--  1. Create a lottie player with a reference -->
+  <lottie-player id="firstLottie"
+                 ref="lottie"
+                 controls
+                 mode="normal"
+                 src="https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json"
+                 style="width: 320px;">
+  </lottie-player>
+</template>
+
+<script>
+  import '@lottiefiles/lottie-player';
+  import { create } from '@lottiefiles/lottie-interactivity';
+
+  export default {
+  name: 'App',
+
+  mounted() {
+    // 2. listen for player load. See lottie player repo for other events
+    this.$refs.lottie.addEventListener('load', function() {
+      // 3. configure the interactivity library
+      create({
+        mode: 'scroll',
+        player: '#firstLottie',
+        actions: [
+          {
+            visibility: [0, 1],
+            type: 'seek',
+            frames: [0, 100],
+          },
+        ],
+      });
+    })
+  }
+}
+</script>
+```
+
 ## Examples
@@ -150,0 +197,0 @@

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

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

New author

Supply chain risk

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

57665

increased by26.43%

Number of package files

22

increased by69.23%

Lines of code

162

increased by65.31%

Number of lines in readme file

356

increased by15.21%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

29

increased by45%

No dependency changes