lottie-react - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

build/index.d.ts

@@ -31,3 +31,3 @@ /// <reference types="react" />
     rendererSettings?: SVGRendererConfig | CanvasRendererConfig | HTMLRendererConfig;
-    initialSegment?: number[] | null;
+    initialSegment?: AnimationSegment;
 } & {
@@ -45,7 +45,9 @@ lottieRef?: LottieRef;
     onDestroy?: AnimationEventHandler | null;
-};
+} & React.HTMLProps<HTMLDivElement>;
 declare type PartialLottieOptions = Omit<LottieOptions, "animationData"> & {
     animationData?: LottieOptions["animationData"];
 };
-declare type LottieComponentProps = LottieOptions & React.HTMLProps<HTMLDivElement>;
+declare type LottieComponentProps = LottieOptions & React.HTMLProps<HTMLDivElement> & {
+    interactivity?: Omit<InteractivityProps, "lottieObj">;
+};
 declare type PartialLottieComponentProps = Omit<LottieComponentProps, "animationData"> & {
@@ -61,2 +63,19 @@ animationData?: LottieOptions["animationData"];
 };
+declare type Axis = "x" | "y";
+declare type Position = {
+    [key in Axis]: number | [number, number];
+};
+declare type Action = {
+    type: "seek" | "play" | "stop" | "loop";
+    frames: [number] | [number, number];
+    visibility?: [number, number];
+    position?: Position;
+};
+declare type InteractivityProps = {
+    lottieObj: {
+        View: ReactElement;
+    } & LottieRefCurrentProps;
+    actions: Action[];
+    mode: "scroll" | "cursor";
+};
 
@@ -104,2 +123,4 @@ declare const Lottie: {
 
+declare const useLottieInteractivity: ({ actions, mode, lottieObj, }: InteractivityProps) => ReactElement;
+
 declare const Animator: typeof Lottie;
@@ -109,2 +130,2 @@ declare const useAnimator: typeof useLottie;
 export default Lottie;
-export { Animator, Listener, LottieComponentProps, LottieOptions, LottieRef, LottieRefCurrentProps, PartialListener, PartialLottieComponentProps, PartialLottieOptions, useAnimator, useLottie };
+export { Action, Animator, Axis, InteractivityProps, Listener, LottieComponentProps, LottieOptions, LottieRef, LottieRefCurrentProps, PartialListener, PartialLottieComponentProps, PartialLottieOptions, Position, useAnimator, useLottie, useLottieInteractivity };

build/index.es.js

@@ -161,3 +161,9 @@ import lottie from 'lottie-web';
       onDOMLoaded = props.onDOMLoaded,
-      onDestroy = props.onDestroy;
+      onDestroy = props.onDestroy,
+      lottieRef = props.lottieRef,
+      renderer = props.renderer,
+      name = props.name,
+      assetsPath = props.assetsPath,
+      rendererSettings = props.rendererSettings,
+      rest = _objectWithoutProperties(props, ["animationData", "loop", "autoplay", "initialSegment", "onComplete", "onLoopComplete", "onEnterFrame", "onSegmentStart", "onConfigReady", "onDataReady", "onDataFailed", "onLoadedImages", "onDOMLoaded", "onDestroy", "lottieRef", "renderer", "name", "assetsPath", "rendererSettings"]);
 
@@ -415,6 +421,6 @@ var _useState = useState(false),
 
-  var View = /*#__PURE__*/React.createElement("div", {
+  var View = /*#__PURE__*/React.createElement("div", Object.assign({
     style: style,
     ref: animationContainer
-  });
+  }, rest));
   return {
@@ -438,2 +444,203 @@ View: View,
 
+function getContainerVisibility(container) {
+  var _container$getBoundin = container.getBoundingClientRect(),
+      top = _container$getBoundin.top,
+      height = _container$getBoundin.height;
+
+  var current = window.innerHeight - top;
+  var max = window.innerHeight + height;
+  return current / max;
+}
+function getContainerCursorPosition(container, cursorX, cursorY) {
+  var _container$getBoundin2 = container.getBoundingClientRect(),
+      top = _container$getBoundin2.top,
+      left = _container$getBoundin2.left,
+      width = _container$getBoundin2.width,
+      height = _container$getBoundin2.height;
+
+  var x = (cursorX - left) / width;
+  var y = (cursorY - top) / height;
+  return {
+    x: x,
+    y: y
+  };
+}
+var useInitInteractivity = function useInitInteractivity(_ref) {
+  var wrapperRef = _ref.wrapperRef,
+      animationItem = _ref.animationItem,
+      mode = _ref.mode,
+      actions = _ref.actions;
+  useEffect(function () {
+    var wrapper = wrapperRef.current;
+
+    if (!wrapper || !animationItem) {
+      return;
+    }
+
+    animationItem.stop();
+
+    var scrollModeHandler = function scrollModeHandler() {
+      var assignedSegment = null;
+
+      var scrollHandler = function scrollHandler() {
+        var currentPercent = getContainerVisibility(wrapper); // Find the first action that satisfies the current position conditions
+
+        var action = actions.find(function (_ref2) {
+          var visibility = _ref2.visibility;
+          return visibility && currentPercent >= visibility[0] && currentPercent <= visibility[1];
+        }); // Skip if no matching action was found!
+
+        if (!action) {
+          return;
+        }
+
+        if (action.type === "seek" && action.visibility && action.frames.length === 2) {
+          // Seek: Go to a frame based on player scroll position action
+          var frameToGo = action.frames[0] + Math.ceil((currentPercent - action.visibility[0]) / (action.visibility[1] - action.visibility[0]) * action.frames[1]); //! goToAndStop must be relative to the start of the current segment
+
+          animationItem.goToAndStop(frameToGo - animationItem.firstFrame - 1, true);
+        }
+
+        if (action.type === "loop") {
+          // Loop: Loop a given frames
+          if (assignedSegment === null) {
+            // if not playing any segments currently. play those segments and save to state
+            animationItem.playSegments(action.frames, true);
+            assignedSegment = action.frames;
+          } else {
+            // if playing any segments currently.
+            //check if segments in state are equal to the frames selected by action
+            if (assignedSegment !== action.frames) {
+              // if they are not equal. new segments are to be loaded
+              animationItem.playSegments(action.frames, true);
+              assignedSegment = action.frames;
+            } else if (animationItem.isPaused) {
+              // if they are equal the play method must be called only if lottie is paused
+              animationItem.playSegments(action.frames, true);
+              assignedSegment = action.frames;
+            }
+          }
+        }
+
+        if (action.type === "play" && animationItem.isPaused) {
+          // Play: Reset segments and continue playing full animation from current position
+          animationItem.resetSegments(true);
+          animationItem.play();
+        }
+
+        if (action.type === "stop") {
+          // Stop: Stop playback
+          animationItem.goToAndStop(action.frames[0] - animationItem.firstFrame - 1, true);
+        }
+      };
+
+      document.addEventListener("scroll", scrollHandler);
+      return function () {
+        document.removeEventListener("scroll", scrollHandler);
+      };
+    };
+
+    var cursorModeHandler = function cursorModeHandler() {
+      var handleCursor = function handleCursor(_x, _y) {
+        var x = _x;
+        var y = _y; // Resolve cursor position if cursor is inside container
+
+        if (x !== -1 && y !== -1) {
+          // Get container cursor position
+          var pos = getContainerCursorPosition(wrapper, x, y); // Use the resolved position
+
+          x = pos.x;
+          y = pos.y;
+        } // Find the first action that satisfies the current position conditions
+
+
+        var action = actions.find(function (_ref3) {
+          var position = _ref3.position;
+
+          if (position && Array.isArray(position.x) && Array.isArray(position.y)) {
+            return x >= position.x[0] && x <= position.x[1] && y >= position.y[0] && y <= position.y[1];
+          }
+
+          if (position && !Number.isNaN(position.x) && !Number.isNaN(position.y)) {
+            return x === position.x && y === position.y;
+          }
+
+          return false;
+        }); // Skip if no matching action was found!
+
+        if (!action) {
+          return;
+        } // Process action types:
+
+
+        if (action.type === "seek" && action.position && Array.isArray(action.position.x) && Array.isArray(action.position.y) && action.frames.length === 2) {
+          // Seek: Go to a frame based on player scroll position action
+          var xPercent = (x - action.position.x[0]) / (action.position.x[1] - action.position.x[0]);
+          var yPercent = (y - action.position.y[0]) / (action.position.y[1] - action.position.y[0]);
+          animationItem.playSegments(action.frames, true);
+          animationItem.goToAndStop(Math.ceil((xPercent + yPercent) / 2 * (action.frames[1] - action.frames[0])), true);
+        }
+
+        if (action.type === "loop") {
+          animationItem.playSegments(action.frames, true);
+        }
+
+        if (action.type === "play") {
+          // Play: Reset segments and continue playing full animation from current position
+          if (animationItem.isPaused) {
+            animationItem.resetSegments(false);
+          }
+
+          animationItem.playSegments(action.frames);
+        }
+
+        if (action.type === "stop") {
+          animationItem.goToAndStop(action.frames[0], true);
+        }
+      };
+
+      var mouseMoveHandler = function mouseMoveHandler(ev) {
+        handleCursor(ev.clientX, ev.clientY);
+      };
+
+      var mouseOutHandler = function mouseOutHandler() {
+        handleCursor(-1, -1);
+      };
+
+      wrapper.addEventListener("mousemove", mouseMoveHandler);
+      wrapper.addEventListener("mouseout", mouseOutHandler);
+      return function () {
+        wrapper.removeEventListener("mousemove", mouseMoveHandler);
+        wrapper.removeEventListener("mouseout", mouseOutHandler);
+      };
+    };
+
+    switch (mode) {
+      case "scroll":
+        return scrollModeHandler();
+
+      case "cursor":
+        return cursorModeHandler();
+    }
+  }, [mode, animationItem]);
+};
+
+var useLottieInteractivity = function useLottieInteractivity(_ref4) {
+  var actions = _ref4.actions,
+      mode = _ref4.mode,
+      lottieObj = _ref4.lottieObj;
+  var animationItem = lottieObj.animationItem,
+      View = lottieObj.View;
+  var wrapperRef = useRef(null);
+  useInitInteractivity({
+    actions: actions,
+    animationItem: animationItem,
+    mode: mode,
+    wrapperRef: wrapperRef
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    ref: wrapperRef
+  }, View);
+};
+
 var Lottie = function Lottie(props) {
@@ -443,3 +650,4 @@ var _a;
   var style = props.style,
-      lottieProps = _objectWithoutProperties(props, ["style"]);
+      interactivity = props.interactivity,
+      lottieProps = _objectWithoutProperties(props, ["style", "interactivity"]);
   /**
@@ -489,2 +697,25 @@ * Initialize the 'useLottie' hook
   }, [(_a = props.lottieRef) === null || _a === void 0 ? void 0 : _a.current]);
+
+  if (interactivity) {
+    var EnhancedView = useLottieInteractivity(_objectSpread2({
+      lottieObj: {
+        View: View,
+        play: play,
+        stop: stop,
+        pause: pause,
+        setSpeed: setSpeed,
+        goToAndStop: goToAndStop,
+        goToAndPlay: goToAndPlay,
+        setDirection: setDirection,
+        playSegments: playSegments,
+        setSubframe: setSubframe,
+        getDuration: getDuration,
+        destroy: destroy,
+        animationLoaded: animationLoaded,
+        animationItem: animationItem
+      }
+    }, interactivity));
+    return EnhancedView;
+  }
+
   return View;
@@ -531,3 +762,3 @@ };
 export default Lottie;
-export { Animator, useAnimator, useLottie };
+export { Animator, useAnimator, useLottie, useLottieInteractivity };
 //# sourceMappingURL=index.es.js.map

build/index.es.min.js

@@ -1,1 +0,2 @@
-import e from"lottie-web";export{default as LottiePlayer}from"lottie-web";import n,{useState as t,useRef as r,useEffect as o}from"react";import{shape as a,oneOfType as i,bool as l,number as u,arrayOf as d,func as c}from"prop-types";function f(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function p(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function m(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?p(Object(t),!0).forEach((function(n){f(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):p(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function s(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}function y(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var t=[],r=!0,o=!1,a=void 0;try{for(var i,l=e[Symbol.iterator]();!(r=(i=l.next()).done)&&(t.push(i.value),!n||t.length!==n);r=!0);}catch(e){o=!0,a=e}finally{try{r||null==l.return||l.return()}finally{if(o)throw a}}return t}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return v(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return v(e,n)}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function v(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}var g=function(a,i){var l=a.animationData,u=a.loop,d=a.autoplay,c=a.initialSegment,f=a.onComplete,p=a.onLoopComplete,s=a.onEnterFrame,v=a.onSegmentStart,g=a.onConfigReady,b=a.onDataReady,S=a.onDataFailed,O=a.onLoadedImages,h=a.onDOMLoaded,D=a.onDestroy,j=y(t(!1),2),w=j[0],P=j[1],L=r(),A=r(null);return o((function(){!function(){var n,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(A.current){null===(n=L.current)||void 0===n||n.destroy();var r=m(m(m({},a),t),{},{container:A.current});L.current=e.loadAnimation(r),P(!!L.current)}}()}),[l,u,d,c]),o((function(){var e=[{name:"complete",handler:f},{name:"loopComplete",handler:p},{name:"enterFrame",handler:s},{name:"segmentStart",handler:v},{name:"config_ready",handler:g},{name:"data_ready",handler:b},{name:"data_failed",handler:S},{name:"loaded_images",handler:O},{name:"DOMLoaded",handler:h},{name:"destroy",handler:D}].filter((function(e){return null!=e.handler}));if(e.length){var n=e.map((function(e){var n;return null===(n=L.current)||void 0===n||n.addEventListener(e.name,e.handler),function(){var n;null===(n=L.current)||void 0===n||n.removeEventListener(e.name,e.handler)}}));return function(){n.forEach((function(e){return e()}))}}}),[f,p,s,v,g,b,S,O,h,D]),{View:n.createElement("div",{style:i,ref:A}),play:function(){var e;null===(e=L.current)||void 0===e||e.play()},stop:function(){var e;null===(e=L.current)||void 0===e||e.stop()},pause:function(){var e;null===(e=L.current)||void 0===e||e.pause()},setSpeed:function(e){var n;null===(n=L.current)||void 0===n||n.setSpeed(e)},goToAndStop:function(e,n){var t;null===(t=L.current)||void 0===t||t.goToAndStop(e,n)},goToAndPlay:function(e,n){var t;null===(t=L.current)||void 0===t||t.goToAndPlay(e,n)},setDirection:function(e){var n;null===(n=L.current)||void 0===n||n.setDirection(e)},playSegments:function(e,n){var t;null===(t=L.current)||void 0===t||t.playSegments(e,n)},setSubframe:function(e){var n;null===(n=L.current)||void 0===n||n.setSubframe(e)},getDuration:function(e){var n;return null===(n=L.current)||void 0===n?void 0:n.getDuration(e)},destroy:function(){var e;null===(e=L.current)||void 0===e||e.destroy()},animationLoaded:w,animationItem:L.current}},b=function(e){var n,t=e.style,r=s(e,["style"]),a=g(r,t),i=a.View,l=a.play,u=a.stop,d=a.pause,c=a.setSpeed,f=a.goToAndStop,p=a.goToAndPlay,m=a.setDirection,y=a.playSegments,v=a.setSubframe,b=a.getDuration,S=a.destroy,O=a.animationLoaded,h=a.animationItem;return o((function(){e.lottieRef&&(e.lottieRef.current={play:l,stop:u,pause:d,setSpeed:c,goToAndPlay:p,goToAndStop:f,setDirection:m,playSegments:y,setSubframe:v,getDuration:b,destroy:S,animationLoaded:O,animationItem:h})}),[null===(n=e.lottieRef)||void 0===n?void 0:n.current]),i};b.propTypes={animationData:a(void 0).isRequired,loop:i([l,u]),autoplay:l,initialSegment:d(u.isRequired),onComplete:c,onLoopComplete:c,onEnterFrame:c,onSegmentStart:c,onConfigReady:c,onDataReady:c,onDataFailed:c,onLoadedImages:c,onDOMLoaded:c,onDestroy:c,style:a(void 0)},b.defaultProps={loop:!0,autoplay:!0,initialSegment:null,onComplete:null,onLoopComplete:null,onEnterFrame:null,onSegmentStart:null,onConfigReady:null,onDataReady:null,onDataFailed:null,onLoadedImages:null,onDOMLoaded:null,onDestroy:null,style:void 0};var S=b,O=g;export default b;export{S as Animator,O as useAnimator,g as useLottie};
+import e from"lottie-web";export{default as LottiePlayer}from"lottie-web";import t,{useState as n,useRef as r,useEffect as o}from"react";import{shape as a,oneOfType as i,bool as l,number as u,arrayOf as s,func as d}from"prop-types";function m(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function c(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function p(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){m(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function f(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function y(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var n=[],r=!0,o=!1,a=void 0;try{for(var i,l=e[Symbol.iterator]();!(r=(i=l.next()).done)&&(n.push(i.value),!t||n.length!==t);r=!0);}catch(e){o=!0,a=e}finally{try{r||null==l.return||l.return()}finally{if(o)throw a}}return n}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return v(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return v(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function v(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var g=function(a,i){var l=a.animationData,u=a.loop,s=a.autoplay,d=a.initialSegment,m=a.onComplete,c=a.onLoopComplete,v=a.onEnterFrame,g=a.onSegmentStart,S=a.onConfigReady,b=a.onDataReady,h=a.onDataFailed,O=a.onLoadedImages,D=a.onDOMLoaded,A=a.onDestroy,w=(a.lottieRef,a.renderer,a.name,a.assetsPath,a.rendererSettings,f(a,["animationData","loop","autoplay","initialSegment","onComplete","onLoopComplete","onEnterFrame","onSegmentStart","onConfigReady","onDataReady","onDataFailed","onLoadedImages","onDOMLoaded","onDestroy","lottieRef","renderer","name","assetsPath","rendererSettings"])),L=y(n(!1),2),j=L[0],P=L[1],E=r(),R=r(null);return o((function(){!function(){var t,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(R.current){null===(t=E.current)||void 0===t||t.destroy();var r=p(p(p({},a),n),{},{container:R.current});E.current=e.loadAnimation(r),P(!!E.current)}}()}),[l,u,s,d]),o((function(){var e=[{name:"complete",handler:m},{name:"loopComplete",handler:c},{name:"enterFrame",handler:v},{name:"segmentStart",handler:g},{name:"config_ready",handler:S},{name:"data_ready",handler:b},{name:"data_failed",handler:h},{name:"loaded_images",handler:O},{name:"DOMLoaded",handler:D},{name:"destroy",handler:A}].filter((function(e){return null!=e.handler}));if(e.length){var t=e.map((function(e){var t;return null===(t=E.current)||void 0===t||t.addEventListener(e.name,e.handler),function(){var t;null===(t=E.current)||void 0===t||t.removeEventListener(e.name,e.handler)}}));return function(){t.forEach((function(e){return e()}))}}}),[m,c,v,g,S,b,h,O,D,A]),{View:t.createElement("div",Object.assign({style:i,ref:R},w)),play:function(){var e;null===(e=E.current)||void 0===e||e.play()},stop:function(){var e;null===(e=E.current)||void 0===e||e.stop()},pause:function(){var e;null===(e=E.current)||void 0===e||e.pause()},setSpeed:function(e){var t;null===(t=E.current)||void 0===t||t.setSpeed(e)},goToAndStop:function(e,t){var n;null===(n=E.current)||void 0===n||n.goToAndStop(e,t)},goToAndPlay:function(e,t){var n;null===(n=E.current)||void 0===n||n.goToAndPlay(e,t)},setDirection:function(e){var t;null===(t=E.current)||void 0===t||t.setDirection(e)},playSegments:function(e,t){var n;null===(n=E.current)||void 0===n||n.playSegments(e,t)},setSubframe:function(e){var t;null===(t=E.current)||void 0===t||t.setSubframe(e)},getDuration:function(e){var t;return null===(t=E.current)||void 0===t?void 0:t.getDuration(e)},destroy:function(){var e;null===(e=E.current)||void 0===e||e.destroy()},animationLoaded:j,animationItem:E.current}};var S=function(e){var t=e.wrapperRef,n=e.animationItem,r=e.mode,a=e.actions;o((function(){var e=t.current;if(e&&n){n.stop();var o,i,l,u,s;switch(r){case"scroll":return u=null,s=function(){var t,r,o,i=(t=e.getBoundingClientRect(),r=t.top,o=t.height,(window.innerHeight-r)/(window.innerHeight+o)),l=a.find((function(e){var t=e.visibility;return t&&i>=t[0]&&i<=t[1]}));if(l){if("seek"===l.type&&l.visibility&&2===l.frames.length){var s=l.frames[0]+Math.ceil((i-l.visibility[0])/(l.visibility[1]-l.visibility[0])*l.frames[1]);//! goToAndStop must be relative to the start of the current segment
+n.goToAndStop(s-n.firstFrame-1,!0)}"loop"===l.type&&(null===u||u!==l.frames||n.isPaused)&&(n.playSegments(l.frames,!0),u=l.frames),"play"===l.type&&n.isPaused&&(n.resetSegments(!0),n.play()),"stop"===l.type&&n.goToAndStop(l.frames[0]-n.firstFrame-1,!0)}},document.addEventListener("scroll",s),function(){document.removeEventListener("scroll",s)};case"cursor":return o=function(t,r){var o,i,l,u,s=t,d=r;if(-1!==s&&-1!==d){var m=(o=s,i=d,l=e.getBoundingClientRect(),u=l.top,{x:(o-l.left)/l.width,y:(i-u)/l.height});s=m.x,d=m.y}var c=a.find((function(e){var t=e.position;return t&&Array.isArray(t.x)&&Array.isArray(t.y)?s>=t.x[0]&&s<=t.x[1]&&d>=t.y[0]&&d<=t.y[1]:!(!t||Number.isNaN(t.x)||Number.isNaN(t.y))&&s===t.x&&d===t.y}));if(c){if("seek"===c.type&&c.position&&Array.isArray(c.position.x)&&Array.isArray(c.position.y)&&2===c.frames.length){var p=(s-c.position.x[0])/(c.position.x[1]-c.position.x[0]),f=(d-c.position.y[0])/(c.position.y[1]-c.position.y[0]);n.playSegments(c.frames,!0),n.goToAndStop(Math.ceil((p+f)/2*(c.frames[1]-c.frames[0])),!0)}"loop"===c.type&&n.playSegments(c.frames,!0),"play"===c.type&&(n.isPaused&&n.resetSegments(!1),n.playSegments(c.frames)),"stop"===c.type&&n.goToAndStop(c.frames[0],!0)}},i=function(e){o(e.clientX,e.clientY)},l=function(){o(-1,-1)},e.addEventListener("mousemove",i),e.addEventListener("mouseout",l),function(){e.removeEventListener("mousemove",i),e.removeEventListener("mouseout",l)}}}}),[r,n])},b=function(e){var n=e.actions,o=e.mode,a=e.lottieObj,i=a.animationItem,l=a.View,u=r(null);return S({actions:n,animationItem:i,mode:o,wrapperRef:u}),t.createElement("div",{ref:u},l)},h=function(e){var t,n=e.style,r=e.interactivity,a=f(e,["style","interactivity"]),i=g(a,n),l=i.View,u=i.play,s=i.stop,d=i.pause,m=i.setSpeed,c=i.goToAndStop,y=i.goToAndPlay,v=i.setDirection,S=i.playSegments,h=i.setSubframe,O=i.getDuration,D=i.destroy,A=i.animationLoaded,w=i.animationItem;return o((function(){e.lottieRef&&(e.lottieRef.current={play:u,stop:s,pause:d,setSpeed:m,goToAndPlay:y,goToAndStop:c,setDirection:v,playSegments:S,setSubframe:h,getDuration:O,destroy:D,animationLoaded:A,animationItem:w})}),[null===(t=e.lottieRef)||void 0===t?void 0:t.current]),r?b(p({lottieObj:{View:l,play:u,stop:s,pause:d,setSpeed:m,goToAndStop:c,goToAndPlay:y,setDirection:v,playSegments:S,setSubframe:h,getDuration:O,destroy:D,animationLoaded:A,animationItem:w}},r)):l};h.propTypes={animationData:a(void 0).isRequired,loop:i([l,u]),autoplay:l,initialSegment:s(u.isRequired),onComplete:d,onLoopComplete:d,onEnterFrame:d,onSegmentStart:d,onConfigReady:d,onDataReady:d,onDataFailed:d,onLoadedImages:d,onDOMLoaded:d,onDestroy:d,style:a(void 0)},h.defaultProps={loop:!0,autoplay:!0,initialSegment:null,onComplete:null,onLoopComplete:null,onEnterFrame:null,onSegmentStart:null,onConfigReady:null,onDataReady:null,onDataFailed:null,onLoadedImages:null,onDOMLoaded:null,onDestroy:null,style:void 0};var O=h,D=g;export default h;export{O as Animator,D as useAnimator,g as useLottie,b as useLottieInteractivity};

build/index.js

@@ -167,3 +167,9 @@ 'use strict';
       onDOMLoaded = props.onDOMLoaded,
-      onDestroy = props.onDestroy;
+      onDestroy = props.onDestroy,
+      lottieRef = props.lottieRef,
+      renderer = props.renderer,
+      name = props.name,
+      assetsPath = props.assetsPath,
+      rendererSettings = props.rendererSettings,
+      rest = _objectWithoutProperties(props, ["animationData", "loop", "autoplay", "initialSegment", "onComplete", "onLoopComplete", "onEnterFrame", "onSegmentStart", "onConfigReady", "onDataReady", "onDataFailed", "onLoadedImages", "onDOMLoaded", "onDestroy", "lottieRef", "renderer", "name", "assetsPath", "rendererSettings"]);
 
@@ -421,6 +427,6 @@ var _useState = React.useState(false),
 
-  var View = /*#__PURE__*/React__default.createElement("div", {
+  var View = /*#__PURE__*/React__default.createElement("div", Object.assign({
     style: style,
     ref: animationContainer
-  });
+  }, rest));
   return {
@@ -444,2 +450,203 @@ View: View,
 
+function getContainerVisibility(container) {
+  var _container$getBoundin = container.getBoundingClientRect(),
+      top = _container$getBoundin.top,
+      height = _container$getBoundin.height;
+
+  var current = window.innerHeight - top;
+  var max = window.innerHeight + height;
+  return current / max;
+}
+function getContainerCursorPosition(container, cursorX, cursorY) {
+  var _container$getBoundin2 = container.getBoundingClientRect(),
+      top = _container$getBoundin2.top,
+      left = _container$getBoundin2.left,
+      width = _container$getBoundin2.width,
+      height = _container$getBoundin2.height;
+
+  var x = (cursorX - left) / width;
+  var y = (cursorY - top) / height;
+  return {
+    x: x,
+    y: y
+  };
+}
+var useInitInteractivity = function useInitInteractivity(_ref) {
+  var wrapperRef = _ref.wrapperRef,
+      animationItem = _ref.animationItem,
+      mode = _ref.mode,
+      actions = _ref.actions;
+  React.useEffect(function () {
+    var wrapper = wrapperRef.current;
+
+    if (!wrapper || !animationItem) {
+      return;
+    }
+
+    animationItem.stop();
+
+    var scrollModeHandler = function scrollModeHandler() {
+      var assignedSegment = null;
+
+      var scrollHandler = function scrollHandler() {
+        var currentPercent = getContainerVisibility(wrapper); // Find the first action that satisfies the current position conditions
+
+        var action = actions.find(function (_ref2) {
+          var visibility = _ref2.visibility;
+          return visibility && currentPercent >= visibility[0] && currentPercent <= visibility[1];
+        }); // Skip if no matching action was found!
+
+        if (!action) {
+          return;
+        }
+
+        if (action.type === "seek" && action.visibility && action.frames.length === 2) {
+          // Seek: Go to a frame based on player scroll position action
+          var frameToGo = action.frames[0] + Math.ceil((currentPercent - action.visibility[0]) / (action.visibility[1] - action.visibility[0]) * action.frames[1]); //! goToAndStop must be relative to the start of the current segment
+
+          animationItem.goToAndStop(frameToGo - animationItem.firstFrame - 1, true);
+        }
+
+        if (action.type === "loop") {
+          // Loop: Loop a given frames
+          if (assignedSegment === null) {
+            // if not playing any segments currently. play those segments and save to state
+            animationItem.playSegments(action.frames, true);
+            assignedSegment = action.frames;
+          } else {
+            // if playing any segments currently.
+            //check if segments in state are equal to the frames selected by action
+            if (assignedSegment !== action.frames) {
+              // if they are not equal. new segments are to be loaded
+              animationItem.playSegments(action.frames, true);
+              assignedSegment = action.frames;
+            } else if (animationItem.isPaused) {
+              // if they are equal the play method must be called only if lottie is paused
+              animationItem.playSegments(action.frames, true);
+              assignedSegment = action.frames;
+            }
+          }
+        }
+
+        if (action.type === "play" && animationItem.isPaused) {
+          // Play: Reset segments and continue playing full animation from current position
+          animationItem.resetSegments(true);
+          animationItem.play();
+        }
+
+        if (action.type === "stop") {
+          // Stop: Stop playback
+          animationItem.goToAndStop(action.frames[0] - animationItem.firstFrame - 1, true);
+        }
+      };
+
+      document.addEventListener("scroll", scrollHandler);
+      return function () {
+        document.removeEventListener("scroll", scrollHandler);
+      };
+    };
+
+    var cursorModeHandler = function cursorModeHandler() {
+      var handleCursor = function handleCursor(_x, _y) {
+        var x = _x;
+        var y = _y; // Resolve cursor position if cursor is inside container
+
+        if (x !== -1 && y !== -1) {
+          // Get container cursor position
+          var pos = getContainerCursorPosition(wrapper, x, y); // Use the resolved position
+
+          x = pos.x;
+          y = pos.y;
+        } // Find the first action that satisfies the current position conditions
+
+
+        var action = actions.find(function (_ref3) {
+          var position = _ref3.position;
+
+          if (position && Array.isArray(position.x) && Array.isArray(position.y)) {
+            return x >= position.x[0] && x <= position.x[1] && y >= position.y[0] && y <= position.y[1];
+          }
+
+          if (position && !Number.isNaN(position.x) && !Number.isNaN(position.y)) {
+            return x === position.x && y === position.y;
+          }
+
+          return false;
+        }); // Skip if no matching action was found!
+
+        if (!action) {
+          return;
+        } // Process action types:
+
+
+        if (action.type === "seek" && action.position && Array.isArray(action.position.x) && Array.isArray(action.position.y) && action.frames.length === 2) {
+          // Seek: Go to a frame based on player scroll position action
+          var xPercent = (x - action.position.x[0]) / (action.position.x[1] - action.position.x[0]);
+          var yPercent = (y - action.position.y[0]) / (action.position.y[1] - action.position.y[0]);
+          animationItem.playSegments(action.frames, true);
+          animationItem.goToAndStop(Math.ceil((xPercent + yPercent) / 2 * (action.frames[1] - action.frames[0])), true);
+        }
+
+        if (action.type === "loop") {
+          animationItem.playSegments(action.frames, true);
+        }
+
+        if (action.type === "play") {
+          // Play: Reset segments and continue playing full animation from current position
+          if (animationItem.isPaused) {
+            animationItem.resetSegments(false);
+          }
+
+          animationItem.playSegments(action.frames);
+        }
+
+        if (action.type === "stop") {
+          animationItem.goToAndStop(action.frames[0], true);
+        }
+      };
+
+      var mouseMoveHandler = function mouseMoveHandler(ev) {
+        handleCursor(ev.clientX, ev.clientY);
+      };
+
+      var mouseOutHandler = function mouseOutHandler() {
+        handleCursor(-1, -1);
+      };
+
+      wrapper.addEventListener("mousemove", mouseMoveHandler);
+      wrapper.addEventListener("mouseout", mouseOutHandler);
+      return function () {
+        wrapper.removeEventListener("mousemove", mouseMoveHandler);
+        wrapper.removeEventListener("mouseout", mouseOutHandler);
+      };
+    };
+
+    switch (mode) {
+      case "scroll":
+        return scrollModeHandler();
+
+      case "cursor":
+        return cursorModeHandler();
+    }
+  }, [mode, animationItem]);
+};
+
+var useLottieInteractivity = function useLottieInteractivity(_ref4) {
+  var actions = _ref4.actions,
+      mode = _ref4.mode,
+      lottieObj = _ref4.lottieObj;
+  var animationItem = lottieObj.animationItem,
+      View = lottieObj.View;
+  var wrapperRef = React.useRef(null);
+  useInitInteractivity({
+    actions: actions,
+    animationItem: animationItem,
+    mode: mode,
+    wrapperRef: wrapperRef
+  });
+  return /*#__PURE__*/React__default.createElement("div", {
+    ref: wrapperRef
+  }, View);
+};
+
 var Lottie = function Lottie(props) {
@@ -449,3 +656,4 @@ var _a;
   var style = props.style,
-      lottieProps = _objectWithoutProperties(props, ["style"]);
+      interactivity = props.interactivity,
+      lottieProps = _objectWithoutProperties(props, ["style", "interactivity"]);
   /**
@@ -495,2 +703,25 @@ * Initialize the 'useLottie' hook
   }, [(_a = props.lottieRef) === null || _a === void 0 ? void 0 : _a.current]);
+
+  if (interactivity) {
+    var EnhancedView = useLottieInteractivity(_objectSpread2({
+      lottieObj: {
+        View: View,
+        play: play,
+        stop: stop,
+        pause: pause,
+        setSpeed: setSpeed,
+        goToAndStop: goToAndStop,
+        goToAndPlay: goToAndPlay,
+        setDirection: setDirection,
+        playSegments: playSegments,
+        setSubframe: setSubframe,
+        getDuration: getDuration,
+        destroy: destroy,
+        animationLoaded: animationLoaded,
+        animationItem: animationItem
+      }
+    }, interactivity));
+    return EnhancedView;
+  }
+
   return View;
@@ -541,2 +772,3 @@ };
 exports.useLottie = useLottie;
+exports.useLottieInteractivity = useLottieInteractivity;
 //# sourceMappingURL=index.js.map

build/index.min.js

@@ -1,1 +0,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n=e(require("lottie-web")),t=require("react"),r=e(t),o=require("prop-types");function a(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function u(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function i(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?u(Object(t),!0).forEach((function(n){a(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):u(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function l(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}function c(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var t=[],r=!0,o=!1,a=void 0;try{for(var u,i=e[Symbol.iterator]();!(r=(u=i.next()).done)&&(t.push(u.value),!n||t.length!==n);r=!0);}catch(e){o=!0,a=e}finally{try{r||null==i.return||i.return()}finally{if(o)throw a}}return t}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return d(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return d(e,n)}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function d(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}var f=function(e,o){var a=e.animationData,u=e.loop,l=e.autoplay,d=e.initialSegment,f=e.onComplete,s=e.onLoopComplete,p=e.onEnterFrame,y=e.onSegmentStart,m=e.onConfigReady,v=e.onDataReady,g=e.onDataFailed,b=e.onLoadedImages,S=e.onDOMLoaded,O=e.onDestroy,h=c(t.useState(!1),2),D=h[0],j=h[1],P=t.useRef(),A=t.useRef(null);return t.useEffect((function(){!function(){var t,r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(A.current){null===(t=P.current)||void 0===t||t.destroy();var o=i(i(i({},e),r),{},{container:A.current});P.current=n.loadAnimation(o),j(!!P.current)}}()}),[a,u,l,d]),t.useEffect((function(){var e=[{name:"complete",handler:f},{name:"loopComplete",handler:s},{name:"enterFrame",handler:p},{name:"segmentStart",handler:y},{name:"config_ready",handler:m},{name:"data_ready",handler:v},{name:"data_failed",handler:g},{name:"loaded_images",handler:b},{name:"DOMLoaded",handler:S},{name:"destroy",handler:O}].filter((function(e){return null!=e.handler}));if(e.length){var n=e.map((function(e){var n;return null===(n=P.current)||void 0===n||n.addEventListener(e.name,e.handler),function(){var n;null===(n=P.current)||void 0===n||n.removeEventListener(e.name,e.handler)}}));return function(){n.forEach((function(e){return e()}))}}}),[f,s,p,y,m,v,g,b,S,O]),{View:r.createElement("div",{style:o,ref:A}),play:function(){var e;null===(e=P.current)||void 0===e||e.play()},stop:function(){var e;null===(e=P.current)||void 0===e||e.stop()},pause:function(){var e;null===(e=P.current)||void 0===e||e.pause()},setSpeed:function(e){var n;null===(n=P.current)||void 0===n||n.setSpeed(e)},goToAndStop:function(e,n){var t;null===(t=P.current)||void 0===t||t.goToAndStop(e,n)},goToAndPlay:function(e,n){var t;null===(t=P.current)||void 0===t||t.goToAndPlay(e,n)},setDirection:function(e){var n;null===(n=P.current)||void 0===n||n.setDirection(e)},playSegments:function(e,n){var t;null===(t=P.current)||void 0===t||t.playSegments(e,n)},setSubframe:function(e){var n;null===(n=P.current)||void 0===n||n.setSubframe(e)},getDuration:function(e){var n;return null===(n=P.current)||void 0===n?void 0:n.getDuration(e)},destroy:function(){var e;null===(e=P.current)||void 0===e||e.destroy()},animationLoaded:D,animationItem:P.current}},s=function(e){var n,r=e.style,o=l(e,["style"]),a=f(o,r),u=a.View,i=a.play,c=a.stop,d=a.pause,s=a.setSpeed,p=a.goToAndStop,y=a.goToAndPlay,m=a.setDirection,v=a.playSegments,g=a.setSubframe,b=a.getDuration,S=a.destroy,O=a.animationLoaded,h=a.animationItem;return t.useEffect((function(){e.lottieRef&&(e.lottieRef.current={play:i,stop:c,pause:d,setSpeed:s,goToAndPlay:y,goToAndStop:p,setDirection:m,playSegments:v,setSubframe:g,getDuration:b,destroy:S,animationLoaded:O,animationItem:h})}),[null===(n=e.lottieRef)||void 0===n?void 0:n.current]),u};s.propTypes={animationData:o.shape(void 0).isRequired,loop:o.oneOfType([o.bool,o.number]),autoplay:o.bool,initialSegment:o.arrayOf(o.number.isRequired),onComplete:o.func,onLoopComplete:o.func,onEnterFrame:o.func,onSegmentStart:o.func,onConfigReady:o.func,onDataReady:o.func,onDataFailed:o.func,onLoadedImages:o.func,onDOMLoaded:o.func,onDestroy:o.func,style:o.shape(void 0)},s.defaultProps={loop:!0,autoplay:!0,initialSegment:null,onComplete:null,onLoopComplete:null,onEnterFrame:null,onSegmentStart:null,onConfigReady:null,onDataReady:null,onDataFailed:null,onLoadedImages:null,onDOMLoaded:null,onDestroy:null,style:void 0};var p=s,y=f;exports.LottiePlayer=n,exports.Animator=p,exports.default=s,exports.useAnimator=y,exports.useLottie=f;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("lottie-web")),n=require("react"),r=e(n),o=require("prop-types");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 i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function u(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function s(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var n=[],r=!0,o=!1,a=void 0;try{for(var i,u=e[Symbol.iterator]();!(r=(i=u.next()).done)&&(n.push(i.value),!t||n.length!==t);r=!0);}catch(e){o=!0,a=e}finally{try{r||null==u.return||u.return()}finally{if(o)throw a}}return n}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return c(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return c(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var d=function(e,o){var a=e.animationData,i=e.loop,c=e.autoplay,d=e.initialSegment,f=e.onComplete,p=e.onLoopComplete,m=e.onEnterFrame,y=e.onSegmentStart,v=e.onConfigReady,g=e.onDataReady,b=e.onDataFailed,S=e.onLoadedImages,h=e.onDOMLoaded,O=e.onDestroy,D=(e.lottieRef,e.renderer,e.name,e.assetsPath,e.rendererSettings,l(e,["animationData","loop","autoplay","initialSegment","onComplete","onLoopComplete","onEnterFrame","onSegmentStart","onConfigReady","onDataReady","onDataFailed","onLoadedImages","onDOMLoaded","onDestroy","lottieRef","renderer","name","assetsPath","rendererSettings"])),A=s(n.useState(!1),2),L=A[0],w=A[1],j=n.useRef(),P=n.useRef(null);return n.useEffect((function(){!function(){var n,r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(P.current){null===(n=j.current)||void 0===n||n.destroy();var o=u(u(u({},e),r),{},{container:P.current});j.current=t.loadAnimation(o),w(!!j.current)}}()}),[a,i,c,d]),n.useEffect((function(){var e=[{name:"complete",handler:f},{name:"loopComplete",handler:p},{name:"enterFrame",handler:m},{name:"segmentStart",handler:y},{name:"config_ready",handler:v},{name:"data_ready",handler:g},{name:"data_failed",handler:b},{name:"loaded_images",handler:S},{name:"DOMLoaded",handler:h},{name:"destroy",handler:O}].filter((function(e){return null!=e.handler}));if(e.length){var t=e.map((function(e){var t;return null===(t=j.current)||void 0===t||t.addEventListener(e.name,e.handler),function(){var t;null===(t=j.current)||void 0===t||t.removeEventListener(e.name,e.handler)}}));return function(){t.forEach((function(e){return e()}))}}}),[f,p,m,y,v,g,b,S,h,O]),{View:r.createElement("div",Object.assign({style:o,ref:P},D)),play:function(){var e;null===(e=j.current)||void 0===e||e.play()},stop:function(){var e;null===(e=j.current)||void 0===e||e.stop()},pause:function(){var e;null===(e=j.current)||void 0===e||e.pause()},setSpeed:function(e){var t;null===(t=j.current)||void 0===t||t.setSpeed(e)},goToAndStop:function(e,t){var n;null===(n=j.current)||void 0===n||n.goToAndStop(e,t)},goToAndPlay:function(e,t){var n;null===(n=j.current)||void 0===n||n.goToAndPlay(e,t)},setDirection:function(e){var t;null===(t=j.current)||void 0===t||t.setDirection(e)},playSegments:function(e,t){var n;null===(n=j.current)||void 0===n||n.playSegments(e,t)},setSubframe:function(e){var t;null===(t=j.current)||void 0===t||t.setSubframe(e)},getDuration:function(e){var t;return null===(t=j.current)||void 0===t?void 0:t.getDuration(e)},destroy:function(){var e;null===(e=j.current)||void 0===e||e.destroy()},animationLoaded:L,animationItem:j.current}};var f=function(e){var t=e.wrapperRef,r=e.animationItem,o=e.mode,a=e.actions;n.useEffect((function(){var e=t.current;if(e&&r){r.stop();var n,i,u,l,s;switch(o){case"scroll":return l=null,s=function(){var t,n,o,i=(t=e.getBoundingClientRect(),n=t.top,o=t.height,(window.innerHeight-n)/(window.innerHeight+o)),u=a.find((function(e){var t=e.visibility;return t&&i>=t[0]&&i<=t[1]}));if(u){if("seek"===u.type&&u.visibility&&2===u.frames.length){var s=u.frames[0]+Math.ceil((i-u.visibility[0])/(u.visibility[1]-u.visibility[0])*u.frames[1]);//! goToAndStop must be relative to the start of the current segment
+r.goToAndStop(s-r.firstFrame-1,!0)}"loop"===u.type&&(null===l||l!==u.frames||r.isPaused)&&(r.playSegments(u.frames,!0),l=u.frames),"play"===u.type&&r.isPaused&&(r.resetSegments(!0),r.play()),"stop"===u.type&&r.goToAndStop(u.frames[0]-r.firstFrame-1,!0)}},document.addEventListener("scroll",s),function(){document.removeEventListener("scroll",s)};case"cursor":return n=function(t,n){var o,i,u,l,s=t,c=n;if(-1!==s&&-1!==c){var d=(o=s,i=c,u=e.getBoundingClientRect(),l=u.top,{x:(o-u.left)/u.width,y:(i-l)/u.height});s=d.x,c=d.y}var f=a.find((function(e){var t=e.position;return t&&Array.isArray(t.x)&&Array.isArray(t.y)?s>=t.x[0]&&s<=t.x[1]&&c>=t.y[0]&&c<=t.y[1]:!(!t||Number.isNaN(t.x)||Number.isNaN(t.y))&&s===t.x&&c===t.y}));if(f){if("seek"===f.type&&f.position&&Array.isArray(f.position.x)&&Array.isArray(f.position.y)&&2===f.frames.length){var p=(s-f.position.x[0])/(f.position.x[1]-f.position.x[0]),m=(c-f.position.y[0])/(f.position.y[1]-f.position.y[0]);r.playSegments(f.frames,!0),r.goToAndStop(Math.ceil((p+m)/2*(f.frames[1]-f.frames[0])),!0)}"loop"===f.type&&r.playSegments(f.frames,!0),"play"===f.type&&(r.isPaused&&r.resetSegments(!1),r.playSegments(f.frames)),"stop"===f.type&&r.goToAndStop(f.frames[0],!0)}},i=function(e){n(e.clientX,e.clientY)},u=function(){n(-1,-1)},e.addEventListener("mousemove",i),e.addEventListener("mouseout",u),function(){e.removeEventListener("mousemove",i),e.removeEventListener("mouseout",u)}}}}),[o,r])},p=function(e){var t=e.actions,o=e.mode,a=e.lottieObj,i=a.animationItem,u=a.View,l=n.useRef(null);return f({actions:t,animationItem:i,mode:o,wrapperRef:l}),r.createElement("div",{ref:l},u)},m=function(e){var t,r=e.style,o=e.interactivity,a=l(e,["style","interactivity"]),i=d(a,r),s=i.View,c=i.play,f=i.stop,m=i.pause,y=i.setSpeed,v=i.goToAndStop,g=i.goToAndPlay,b=i.setDirection,S=i.playSegments,h=i.setSubframe,O=i.getDuration,D=i.destroy,A=i.animationLoaded,L=i.animationItem;return n.useEffect((function(){e.lottieRef&&(e.lottieRef.current={play:c,stop:f,pause:m,setSpeed:y,goToAndPlay:g,goToAndStop:v,setDirection:b,playSegments:S,setSubframe:h,getDuration:O,destroy:D,animationLoaded:A,animationItem:L})}),[null===(t=e.lottieRef)||void 0===t?void 0:t.current]),o?p(u({lottieObj:{View:s,play:c,stop:f,pause:m,setSpeed:y,goToAndStop:v,goToAndPlay:g,setDirection:b,playSegments:S,setSubframe:h,getDuration:O,destroy:D,animationLoaded:A,animationItem:L}},o)):s};m.propTypes={animationData:o.shape(void 0).isRequired,loop:o.oneOfType([o.bool,o.number]),autoplay:o.bool,initialSegment:o.arrayOf(o.number.isRequired),onComplete:o.func,onLoopComplete:o.func,onEnterFrame:o.func,onSegmentStart:o.func,onConfigReady:o.func,onDataReady:o.func,onDataFailed:o.func,onLoadedImages:o.func,onDOMLoaded:o.func,onDestroy:o.func,style:o.shape(void 0)},m.defaultProps={loop:!0,autoplay:!0,initialSegment:null,onComplete:null,onLoopComplete:null,onEnterFrame:null,onSegmentStart:null,onConfigReady:null,onDataReady:null,onDataFailed:null,onLoadedImages:null,onDOMLoaded:null,onDestroy:null,style:void 0};var y=m,v=d;exports.LottiePlayer=t,exports.Animator=y,exports.default=m,exports.useAnimator=v,exports.useLottie=d,exports.useLottieInteractivity=p;

build/index.umd.js

@@ -165,3 +165,9 @@ (function (global, factory) {
         onDOMLoaded = props.onDOMLoaded,
-        onDestroy = props.onDestroy;
+        onDestroy = props.onDestroy,
+        lottieRef = props.lottieRef,
+        renderer = props.renderer,
+        name = props.name,
+        assetsPath = props.assetsPath,
+        rendererSettings = props.rendererSettings,
+        rest = _objectWithoutProperties(props, ["animationData", "loop", "autoplay", "initialSegment", "onComplete", "onLoopComplete", "onEnterFrame", "onSegmentStart", "onConfigReady", "onDataReady", "onDataFailed", "onLoadedImages", "onDOMLoaded", "onDestroy", "lottieRef", "renderer", "name", "assetsPath", "rendererSettings"]);
 
@@ -419,6 +425,6 @@ var _useState = React.useState(false),
 
-    var View = /*#__PURE__*/React__default.createElement("div", {
+    var View = /*#__PURE__*/React__default.createElement("div", Object.assign({
       style: style,
       ref: animationContainer
-    });
+    }, rest));
     return {
@@ -442,2 +448,203 @@ View: View,
 
+  function getContainerVisibility(container) {
+    var _container$getBoundin = container.getBoundingClientRect(),
+        top = _container$getBoundin.top,
+        height = _container$getBoundin.height;
+
+    var current = window.innerHeight - top;
+    var max = window.innerHeight + height;
+    return current / max;
+  }
+  function getContainerCursorPosition(container, cursorX, cursorY) {
+    var _container$getBoundin2 = container.getBoundingClientRect(),
+        top = _container$getBoundin2.top,
+        left = _container$getBoundin2.left,
+        width = _container$getBoundin2.width,
+        height = _container$getBoundin2.height;
+
+    var x = (cursorX - left) / width;
+    var y = (cursorY - top) / height;
+    return {
+      x: x,
+      y: y
+    };
+  }
+  var useInitInteractivity = function useInitInteractivity(_ref) {
+    var wrapperRef = _ref.wrapperRef,
+        animationItem = _ref.animationItem,
+        mode = _ref.mode,
+        actions = _ref.actions;
+    React.useEffect(function () {
+      var wrapper = wrapperRef.current;
+
+      if (!wrapper || !animationItem) {
+        return;
+      }
+
+      animationItem.stop();
+
+      var scrollModeHandler = function scrollModeHandler() {
+        var assignedSegment = null;
+
+        var scrollHandler = function scrollHandler() {
+          var currentPercent = getContainerVisibility(wrapper); // Find the first action that satisfies the current position conditions
+
+          var action = actions.find(function (_ref2) {
+            var visibility = _ref2.visibility;
+            return visibility && currentPercent >= visibility[0] && currentPercent <= visibility[1];
+          }); // Skip if no matching action was found!
+
+          if (!action) {
+            return;
+          }
+
+          if (action.type === "seek" && action.visibility && action.frames.length === 2) {
+            // Seek: Go to a frame based on player scroll position action
+            var frameToGo = action.frames[0] + Math.ceil((currentPercent - action.visibility[0]) / (action.visibility[1] - action.visibility[0]) * action.frames[1]); //! goToAndStop must be relative to the start of the current segment
+
+            animationItem.goToAndStop(frameToGo - animationItem.firstFrame - 1, true);
+          }
+
+          if (action.type === "loop") {
+            // Loop: Loop a given frames
+            if (assignedSegment === null) {
+              // if not playing any segments currently. play those segments and save to state
+              animationItem.playSegments(action.frames, true);
+              assignedSegment = action.frames;
+            } else {
+              // if playing any segments currently.
+              //check if segments in state are equal to the frames selected by action
+              if (assignedSegment !== action.frames) {
+                // if they are not equal. new segments are to be loaded
+                animationItem.playSegments(action.frames, true);
+                assignedSegment = action.frames;
+              } else if (animationItem.isPaused) {
+                // if they are equal the play method must be called only if lottie is paused
+                animationItem.playSegments(action.frames, true);
+                assignedSegment = action.frames;
+              }
+            }
+          }
+
+          if (action.type === "play" && animationItem.isPaused) {
+            // Play: Reset segments and continue playing full animation from current position
+            animationItem.resetSegments(true);
+            animationItem.play();
+          }
+
+          if (action.type === "stop") {
+            // Stop: Stop playback
+            animationItem.goToAndStop(action.frames[0] - animationItem.firstFrame - 1, true);
+          }
+        };
+
+        document.addEventListener("scroll", scrollHandler);
+        return function () {
+          document.removeEventListener("scroll", scrollHandler);
+        };
+      };
+
+      var cursorModeHandler = function cursorModeHandler() {
+        var handleCursor = function handleCursor(_x, _y) {
+          var x = _x;
+          var y = _y; // Resolve cursor position if cursor is inside container
+
+          if (x !== -1 && y !== -1) {
+            // Get container cursor position
+            var pos = getContainerCursorPosition(wrapper, x, y); // Use the resolved position
+
+            x = pos.x;
+            y = pos.y;
+          } // Find the first action that satisfies the current position conditions
+
+
+          var action = actions.find(function (_ref3) {
+            var position = _ref3.position;
+
+            if (position && Array.isArray(position.x) && Array.isArray(position.y)) {
+              return x >= position.x[0] && x <= position.x[1] && y >= position.y[0] && y <= position.y[1];
+            }
+
+            if (position && !Number.isNaN(position.x) && !Number.isNaN(position.y)) {
+              return x === position.x && y === position.y;
+            }
+
+            return false;
+          }); // Skip if no matching action was found!
+
+          if (!action) {
+            return;
+          } // Process action types:
+
+
+          if (action.type === "seek" && action.position && Array.isArray(action.position.x) && Array.isArray(action.position.y) && action.frames.length === 2) {
+            // Seek: Go to a frame based on player scroll position action
+            var xPercent = (x - action.position.x[0]) / (action.position.x[1] - action.position.x[0]);
+            var yPercent = (y - action.position.y[0]) / (action.position.y[1] - action.position.y[0]);
+            animationItem.playSegments(action.frames, true);
+            animationItem.goToAndStop(Math.ceil((xPercent + yPercent) / 2 * (action.frames[1] - action.frames[0])), true);
+          }
+
+          if (action.type === "loop") {
+            animationItem.playSegments(action.frames, true);
+          }
+
+          if (action.type === "play") {
+            // Play: Reset segments and continue playing full animation from current position
+            if (animationItem.isPaused) {
+              animationItem.resetSegments(false);
+            }
+
+            animationItem.playSegments(action.frames);
+          }
+
+          if (action.type === "stop") {
+            animationItem.goToAndStop(action.frames[0], true);
+          }
+        };
+
+        var mouseMoveHandler = function mouseMoveHandler(ev) {
+          handleCursor(ev.clientX, ev.clientY);
+        };
+
+        var mouseOutHandler = function mouseOutHandler() {
+          handleCursor(-1, -1);
+        };
+
+        wrapper.addEventListener("mousemove", mouseMoveHandler);
+        wrapper.addEventListener("mouseout", mouseOutHandler);
+        return function () {
+          wrapper.removeEventListener("mousemove", mouseMoveHandler);
+          wrapper.removeEventListener("mouseout", mouseOutHandler);
+        };
+      };
+
+      switch (mode) {
+        case "scroll":
+          return scrollModeHandler();
+
+        case "cursor":
+          return cursorModeHandler();
+      }
+    }, [mode, animationItem]);
+  };
+
+  var useLottieInteractivity = function useLottieInteractivity(_ref4) {
+    var actions = _ref4.actions,
+        mode = _ref4.mode,
+        lottieObj = _ref4.lottieObj;
+    var animationItem = lottieObj.animationItem,
+        View = lottieObj.View;
+    var wrapperRef = React.useRef(null);
+    useInitInteractivity({
+      actions: actions,
+      animationItem: animationItem,
+      mode: mode,
+      wrapperRef: wrapperRef
+    });
+    return /*#__PURE__*/React__default.createElement("div", {
+      ref: wrapperRef
+    }, View);
+  };
+
   var Lottie = function Lottie(props) {
@@ -447,3 +654,4 @@ var _a;
     var style = props.style,
-        lottieProps = _objectWithoutProperties(props, ["style"]);
+        interactivity = props.interactivity,
+        lottieProps = _objectWithoutProperties(props, ["style", "interactivity"]);
     /**
@@ -493,2 +701,25 @@ * Initialize the 'useLottie' hook
     }, [(_a = props.lottieRef) === null || _a === void 0 ? void 0 : _a.current]);
+
+    if (interactivity) {
+      var EnhancedView = useLottieInteractivity(_objectSpread2({
+        lottieObj: {
+          View: View,
+          play: play,
+          stop: stop,
+          pause: pause,
+          setSpeed: setSpeed,
+          goToAndStop: goToAndStop,
+          goToAndPlay: goToAndPlay,
+          setDirection: setDirection,
+          playSegments: playSegments,
+          setSubframe: setSubframe,
+          getDuration: getDuration,
+          destroy: destroy,
+          animationLoaded: animationLoaded,
+          animationItem: animationItem
+        }
+      }, interactivity));
+      return EnhancedView;
+    }
+
     return View;
@@ -539,2 +770,3 @@ };
   exports.useLottie = useLottie;
+  exports.useLottieInteractivity = useLottieInteractivity;
 
@@ -541,0 +773,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

build/index.umd.min.js

@@ -1,1 +0,2 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("lottie-web"),require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["exports","lottie-web","react","prop-types"],n):n((e=e||self)["lottie-react"]={},e.Lottie,e.React,e.PropTypes)}(this,(function(e,n,t,r){"use strict";n=n&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n;var o="default"in t?t.default:t;function a(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function i(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function u(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?i(Object(t),!0).forEach((function(n){a(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function l(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}function c(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var t=[],r=!0,o=!1,a=void 0;try{for(var i,u=e[Symbol.iterator]();!(r=(i=u.next()).done)&&(t.push(i.value),!n||t.length!==n);r=!0);}catch(e){o=!0,a=e}finally{try{r||null==u.return||u.return()}finally{if(o)throw a}}return t}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return d(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return d(e,n)}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function d(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}var f=function(e,r){var a=e.animationData,i=e.loop,l=e.autoplay,d=e.initialSegment,f=e.onComplete,p=e.onLoopComplete,s=e.onEnterFrame,y=e.onSegmentStart,m=e.onConfigReady,v=e.onDataReady,g=e.onDataFailed,b=e.onLoadedImages,O=e.onDOMLoaded,S=e.onDestroy,h=c(t.useState(!1),2),D=h[0],j=h[1],P=t.useRef(),w=t.useRef(null);return t.useEffect((function(){!function(){var t,r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(w.current){null===(t=P.current)||void 0===t||t.destroy();var o=u(u(u({},e),r),{},{container:w.current});P.current=n.loadAnimation(o),j(!!P.current)}}()}),[a,i,l,d]),t.useEffect((function(){var e=[{name:"complete",handler:f},{name:"loopComplete",handler:p},{name:"enterFrame",handler:s},{name:"segmentStart",handler:y},{name:"config_ready",handler:m},{name:"data_ready",handler:v},{name:"data_failed",handler:g},{name:"loaded_images",handler:b},{name:"DOMLoaded",handler:O},{name:"destroy",handler:S}].filter((function(e){return null!=e.handler}));if(e.length){var n=e.map((function(e){var n;return null===(n=P.current)||void 0===n||n.addEventListener(e.name,e.handler),function(){var n;null===(n=P.current)||void 0===n||n.removeEventListener(e.name,e.handler)}}));return function(){n.forEach((function(e){return e()}))}}}),[f,p,s,y,m,v,g,b,O,S]),{View:o.createElement("div",{style:r,ref:w}),play:function(){var e;null===(e=P.current)||void 0===e||e.play()},stop:function(){var e;null===(e=P.current)||void 0===e||e.stop()},pause:function(){var e;null===(e=P.current)||void 0===e||e.pause()},setSpeed:function(e){var n;null===(n=P.current)||void 0===n||n.setSpeed(e)},goToAndStop:function(e,n){var t;null===(t=P.current)||void 0===t||t.goToAndStop(e,n)},goToAndPlay:function(e,n){var t;null===(t=P.current)||void 0===t||t.goToAndPlay(e,n)},setDirection:function(e){var n;null===(n=P.current)||void 0===n||n.setDirection(e)},playSegments:function(e,n){var t;null===(t=P.current)||void 0===t||t.playSegments(e,n)},setSubframe:function(e){var n;null===(n=P.current)||void 0===n||n.setSubframe(e)},getDuration:function(e){var n;return null===(n=P.current)||void 0===n?void 0:n.getDuration(e)},destroy:function(){var e;null===(e=P.current)||void 0===e||e.destroy()},animationLoaded:D,animationItem:P.current}},p=function(e){var n,r=e.style,o=l(e,["style"]),a=f(o,r),i=a.View,u=a.play,c=a.stop,d=a.pause,p=a.setSpeed,s=a.goToAndStop,y=a.goToAndPlay,m=a.setDirection,v=a.playSegments,g=a.setSubframe,b=a.getDuration,O=a.destroy,S=a.animationLoaded,h=a.animationItem;return t.useEffect((function(){e.lottieRef&&(e.lottieRef.current={play:u,stop:c,pause:d,setSpeed:p,goToAndPlay:y,goToAndStop:s,setDirection:m,playSegments:v,setSubframe:g,getDuration:b,destroy:O,animationLoaded:S,animationItem:h})}),[null===(n=e.lottieRef)||void 0===n?void 0:n.current]),i};p.propTypes={animationData:r.shape(void 0).isRequired,loop:r.oneOfType([r.bool,r.number]),autoplay:r.bool,initialSegment:r.arrayOf(r.number.isRequired),onComplete:r.func,onLoopComplete:r.func,onEnterFrame:r.func,onSegmentStart:r.func,onConfigReady:r.func,onDataReady:r.func,onDataFailed:r.func,onLoadedImages:r.func,onDOMLoaded:r.func,onDestroy:r.func,style:r.shape(void 0)},p.defaultProps={loop:!0,autoplay:!0,initialSegment:null,onComplete:null,onLoopComplete:null,onEnterFrame:null,onSegmentStart:null,onConfigReady:null,onDataReady:null,onDataFailed:null,onLoadedImages:null,onDOMLoaded:null,onDestroy:null,style:void 0};var s=p,y=f;e.LottiePlayer=n,e.Animator=s,e.default=p,e.useAnimator=y,e.useLottie=f,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("lottie-web"),require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["exports","lottie-web","react","prop-types"],t):t((e=e||self)["lottie-react"]={},e.Lottie,e.React,e.PropTypes)}(this,(function(e,t,n,r){"use strict";t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t;var o="default"in n?n.default:n;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 i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function u(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function s(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var n=[],r=!0,o=!1,a=void 0;try{for(var i,l=e[Symbol.iterator]();!(r=(i=l.next()).done)&&(n.push(i.value),!t||n.length!==t);r=!0);}catch(e){o=!0,a=e}finally{try{r||null==l.return||l.return()}finally{if(o)throw a}}return n}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return f(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return f(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function f(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var c=function(e,r){var a=e.animationData,i=e.loop,f=e.autoplay,c=e.initialSegment,d=e.onComplete,p=e.onLoopComplete,m=e.onEnterFrame,y=e.onSegmentStart,v=e.onConfigReady,g=e.onDataReady,b=e.onDataFailed,S=e.onLoadedImages,h=e.onDOMLoaded,O=e.onDestroy,D=(e.lottieRef,e.renderer,e.name,e.assetsPath,e.rendererSettings,u(e,["animationData","loop","autoplay","initialSegment","onComplete","onLoopComplete","onEnterFrame","onSegmentStart","onConfigReady","onDataReady","onDataFailed","onLoadedImages","onDOMLoaded","onDestroy","lottieRef","renderer","name","assetsPath","rendererSettings"])),A=s(n.useState(!1),2),L=A[0],w=A[1],j=n.useRef(),P=n.useRef(null);return n.useEffect((function(){!function(){var n,r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(P.current){null===(n=j.current)||void 0===n||n.destroy();var o=l(l(l({},e),r),{},{container:P.current});j.current=t.loadAnimation(o),w(!!j.current)}}()}),[a,i,f,c]),n.useEffect((function(){var e=[{name:"complete",handler:d},{name:"loopComplete",handler:p},{name:"enterFrame",handler:m},{name:"segmentStart",handler:y},{name:"config_ready",handler:v},{name:"data_ready",handler:g},{name:"data_failed",handler:b},{name:"loaded_images",handler:S},{name:"DOMLoaded",handler:h},{name:"destroy",handler:O}].filter((function(e){return null!=e.handler}));if(e.length){var t=e.map((function(e){var t;return null===(t=j.current)||void 0===t||t.addEventListener(e.name,e.handler),function(){var t;null===(t=j.current)||void 0===t||t.removeEventListener(e.name,e.handler)}}));return function(){t.forEach((function(e){return e()}))}}}),[d,p,m,y,v,g,b,S,h,O]),{View:o.createElement("div",Object.assign({style:r,ref:P},D)),play:function(){var e;null===(e=j.current)||void 0===e||e.play()},stop:function(){var e;null===(e=j.current)||void 0===e||e.stop()},pause:function(){var e;null===(e=j.current)||void 0===e||e.pause()},setSpeed:function(e){var t;null===(t=j.current)||void 0===t||t.setSpeed(e)},goToAndStop:function(e,t){var n;null===(n=j.current)||void 0===n||n.goToAndStop(e,t)},goToAndPlay:function(e,t){var n;null===(n=j.current)||void 0===n||n.goToAndPlay(e,t)},setDirection:function(e){var t;null===(t=j.current)||void 0===t||t.setDirection(e)},playSegments:function(e,t){var n;null===(n=j.current)||void 0===n||n.playSegments(e,t)},setSubframe:function(e){var t;null===(t=j.current)||void 0===t||t.setSubframe(e)},getDuration:function(e){var t;return null===(t=j.current)||void 0===t?void 0:t.getDuration(e)},destroy:function(){var e;null===(e=j.current)||void 0===e||e.destroy()},animationLoaded:L,animationItem:j.current}};var d=function(e){var t=e.wrapperRef,r=e.animationItem,o=e.mode,a=e.actions;n.useEffect((function(){var e=t.current;if(e&&r){r.stop();var n,i,l,u,s;switch(o){case"scroll":return u=null,s=function(){var t,n,o,i=(t=e.getBoundingClientRect(),n=t.top,o=t.height,(window.innerHeight-n)/(window.innerHeight+o)),l=a.find((function(e){var t=e.visibility;return t&&i>=t[0]&&i<=t[1]}));if(l){if("seek"===l.type&&l.visibility&&2===l.frames.length){var s=l.frames[0]+Math.ceil((i-l.visibility[0])/(l.visibility[1]-l.visibility[0])*l.frames[1]);//! goToAndStop must be relative to the start of the current segment
+r.goToAndStop(s-r.firstFrame-1,!0)}"loop"===l.type&&(null===u||u!==l.frames||r.isPaused)&&(r.playSegments(l.frames,!0),u=l.frames),"play"===l.type&&r.isPaused&&(r.resetSegments(!0),r.play()),"stop"===l.type&&r.goToAndStop(l.frames[0]-r.firstFrame-1,!0)}},document.addEventListener("scroll",s),function(){document.removeEventListener("scroll",s)};case"cursor":return n=function(t,n){var o,i,l,u,s=t,f=n;if(-1!==s&&-1!==f){var c=(o=s,i=f,l=e.getBoundingClientRect(),u=l.top,{x:(o-l.left)/l.width,y:(i-u)/l.height});s=c.x,f=c.y}var d=a.find((function(e){var t=e.position;return t&&Array.isArray(t.x)&&Array.isArray(t.y)?s>=t.x[0]&&s<=t.x[1]&&f>=t.y[0]&&f<=t.y[1]:!(!t||Number.isNaN(t.x)||Number.isNaN(t.y))&&s===t.x&&f===t.y}));if(d){if("seek"===d.type&&d.position&&Array.isArray(d.position.x)&&Array.isArray(d.position.y)&&2===d.frames.length){var p=(s-d.position.x[0])/(d.position.x[1]-d.position.x[0]),m=(f-d.position.y[0])/(d.position.y[1]-d.position.y[0]);r.playSegments(d.frames,!0),r.goToAndStop(Math.ceil((p+m)/2*(d.frames[1]-d.frames[0])),!0)}"loop"===d.type&&r.playSegments(d.frames,!0),"play"===d.type&&(r.isPaused&&r.resetSegments(!1),r.playSegments(d.frames)),"stop"===d.type&&r.goToAndStop(d.frames[0],!0)}},i=function(e){n(e.clientX,e.clientY)},l=function(){n(-1,-1)},e.addEventListener("mousemove",i),e.addEventListener("mouseout",l),function(){e.removeEventListener("mousemove",i),e.removeEventListener("mouseout",l)}}}}),[o,r])},p=function(e){var t=e.actions,r=e.mode,a=e.lottieObj,i=a.animationItem,l=a.View,u=n.useRef(null);return d({actions:t,animationItem:i,mode:r,wrapperRef:u}),o.createElement("div",{ref:u},l)},m=function(e){var t,r=e.style,o=e.interactivity,a=u(e,["style","interactivity"]),i=c(a,r),s=i.View,f=i.play,d=i.stop,m=i.pause,y=i.setSpeed,v=i.goToAndStop,g=i.goToAndPlay,b=i.setDirection,S=i.playSegments,h=i.setSubframe,O=i.getDuration,D=i.destroy,A=i.animationLoaded,L=i.animationItem;return n.useEffect((function(){e.lottieRef&&(e.lottieRef.current={play:f,stop:d,pause:m,setSpeed:y,goToAndPlay:g,goToAndStop:v,setDirection:b,playSegments:S,setSubframe:h,getDuration:O,destroy:D,animationLoaded:A,animationItem:L})}),[null===(t=e.lottieRef)||void 0===t?void 0:t.current]),o?p(l({lottieObj:{View:s,play:f,stop:d,pause:m,setSpeed:y,goToAndStop:v,goToAndPlay:g,setDirection:b,playSegments:S,setSubframe:h,getDuration:O,destroy:D,animationLoaded:A,animationItem:L}},o)):s};m.propTypes={animationData:r.shape(void 0).isRequired,loop:r.oneOfType([r.bool,r.number]),autoplay:r.bool,initialSegment:r.arrayOf(r.number.isRequired),onComplete:r.func,onLoopComplete:r.func,onEnterFrame:r.func,onSegmentStart:r.func,onConfigReady:r.func,onDataReady:r.func,onDataFailed:r.func,onLoadedImages:r.func,onDOMLoaded:r.func,onDestroy:r.func,style:r.shape(void 0)},m.defaultProps={loop:!0,autoplay:!0,initialSegment:null,onComplete:null,onLoopComplete:null,onEnterFrame:null,onSegmentStart:null,onConfigReady:null,onDataReady:null,onDataFailed:null,onLoadedImages:null,onDOMLoaded:null,onDestroy:null,style:void 0};var y=m,v=c;e.LottiePlayer=t,e.Animator=y,e.default=m,e.useAnimator=v,e.useLottie=c,e.useLottieInteractivity=p,Object.defineProperty(e,"__esModule",{value:!0})}));

package.json

 {
   "name": "lottie-react",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Lottie for React",
@@ -50,3 +50,3 @@ "keywords": [
   "dependencies": {
-    "lottie-web": "^5.6.10"
+    "lottie-web": "^5.7.3"
   },
@@ -53,0 +53,0 @@ "devDependencies": {

README.md

@@ -74,11 +74,12 @@ # lottie-react
 ```text
-|-----------------|---------|----------|---------|---------|-------------------|
-| File            | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
-|-----------------|---------|----------|---------|---------|-------------------|
-| All files       |     100 |      100 |     100 |     100 |                   |
-|  components     |     100 |      100 |     100 |     100 |                   |
-|   Lottie.ts     |     100 |      100 |     100 |     100 |                   |
-|  hooks          |     100 |      100 |     100 |     100 |                   |
-|   useLottie.tsx |     100 |      100 |     100 |     100 |                   |
-|-----------------|---------|----------|---------|---------|-------------------|
+-----------------------------|---------|----------|---------|---------|-------------------
+File                         | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
+-----------------------------|---------|----------|---------|---------|-------------------
+All files                    |     100 |      100 |     100 |     100 |                   
+ components                  |     100 |      100 |     100 |     100 |                   
+  Lottie.ts                  |     100 |      100 |     100 |     100 |                   
+ hooks                       |     100 |      100 |     100 |     100 |                   
+  useLottie.tsx              |     100 |      100 |     100 |     100 |                   
+  useLottieInteractivity.tsx |     100 |      100 |     100 |     100 |                   
+-----------------------------|---------|----------|---------|---------|-------------------
 ```
@@ -85,0 +86,0 @@

No alert changes

Improved metrics

Total package byte prevSize

221248

increased by67.13%

Number of package files

14

increased by7.69%

Lines of code

2116

increased by43.07%

Number of lines in readme file

102

increased by0.99%

Dependency changes

• Updatedlottie-web@^5.7.3