New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

lottie-react

Package Overview
Dependencies
Maintainers
1
Versions
16
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

lottie-react - npm Package Compare versions

Comparing version 2.3.1 to 2.4.0

30

build/index.d.ts
/// <reference types="react" />
import { AnimationDirection, AnimationSegment, AnimationItem, AnimationConfigWithData, AnimationEventName } from 'lottie-web';
import { AnimationDirection, AnimationSegment, AnimationItem, RendererType, AnimationConfigWithData, AnimationEventName } from 'lottie-web';
export { default as LottiePlayer } from 'lottie-web';

@@ -7,3 +7,3 @@ import * as react from 'react';

declare type LottieRefCurrentProps = {
type LottieRefCurrentProps = {
play: () => void;

@@ -24,4 +24,4 @@ stop: () => void;

};
declare type LottieRef = MutableRefObject<LottieRefCurrentProps | null>;
declare type LottieOptions = Omit<AnimationConfigWithData, "container" | "animationData"> & {
type LottieRef = MutableRefObject<LottieRefCurrentProps | null>;
type LottieOptions<T extends RendererType = "svg"> = Omit<AnimationConfigWithData<T>, "container" | "animationData"> & {
animationData: unknown;

@@ -39,11 +39,11 @@ lottieRef?: LottieRef;

onDestroy?: AnimationEventHandler | null;
} & Omit<react__default.HTMLProps<HTMLDivElement>, 'loop'>;
declare type PartialLottieOptions = Omit<LottieOptions, "animationData"> & {
} & Omit<react__default.HTMLProps<HTMLDivElement>, "loop">;
type PartialLottieOptions = Omit<LottieOptions, "animationData"> & {
animationData?: LottieOptions["animationData"];
};
declare type Axis = "x" | "y";
declare type Position = {
type Axis = "x" | "y";
type Position = {
[key in Axis]: number | [number, number];
};
declare type Action = {
type Action = {
type: "seek" | "play" | "stop" | "loop";

@@ -54,3 +54,3 @@ frames: [number] | [number, number];

};
declare type InteractivityProps = {
type InteractivityProps = {
lottieObj: {

@@ -62,13 +62,13 @@ View: ReactElement;

};
declare type LottieComponentProps = LottieOptions & {
type LottieComponentProps = LottieOptions & {
interactivity?: Omit<InteractivityProps, "lottieObj">;
};
declare type PartialLottieComponentProps = Omit<LottieComponentProps, "animationData"> & {
type PartialLottieComponentProps = Omit<LottieComponentProps, "animationData"> & {
animationData?: LottieOptions["animationData"];
};
declare type Listener = {
type Listener = {
name: AnimationEventName;
handler: AnimationEventHandler;
};
declare type PartialListener = Omit<Listener, "handler"> & {
type PartialListener = Omit<Listener, "handler"> & {
handler?: Listener["handler"] | null;

@@ -79,3 +79,3 @@ };

declare const useLottie: (props: LottieOptions, style?: CSSProperties) => {
declare const useLottie: <T extends RendererType = "svg">(props: LottieOptions<T>, style?: CSSProperties) => {
View: ReactElement;

@@ -82,0 +82,0 @@ } & LottieRefCurrentProps;

393

build/index.es.js

@@ -5,5 +5,31 @@ import lottie from 'lottie-web';

function _iterableToArrayLimit(arr, i) {
var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
if (null != _i) {
var _s,
_e,
_x,
_r,
_arr = [],
_n = !0,
_d = !1;
try {
if (_x = (_i = _i.call(arr)).next, 0 === i) {
if (Object(_i) !== _i) return;
_n = !1;
} else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
} catch (err) {
_d = !0, _e = err;
} finally {
try {
if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return;
} finally {
if (_d) throw _e;
}
}
return _arr;
}
}
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {

@@ -15,6 +41,4 @@ var symbols = Object.getOwnPropertySymbols(object);

}
return keys;
}
function _objectSpread2(target) {

@@ -29,7 +53,6 @@ for (var i = 1; i < arguments.length; i++) {

}
return target;
}
function _defineProperty(obj, key, value) {
key = _toPropertyKey(key);
if (key in obj) {

@@ -45,6 +68,4 @@ Object.defineProperty(obj, key, {

}
return obj;
}
function _objectWithoutPropertiesLoose(source, excluded) {

@@ -55,3 +76,2 @@ if (source == null) return {};

var key, i;
for (i = 0; i < sourceKeys.length; i++) {

@@ -62,16 +82,10 @@ key = sourceKeys[i];

}
return target;
}
function _objectWithoutProperties(source, excluded) {
if (source == null) return {};
var target = _objectWithoutPropertiesLoose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for (i = 0; i < sourceSymbolKeys.length; i++) {

@@ -84,44 +98,10 @@ key = sourceSymbolKeys[i];

}
return target;
}
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterableToArrayLimit(arr, i) {
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
if (_i == null) return;
var _arr = [];
var _n = true;
var _d = false;
var _s, _e;
try {
for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"] != null) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
function _unsupportedIterableToArray(o, minLen) {

@@ -135,44 +115,51 @@ if (!o) return;

}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _nonIterableRest() {
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 _toPrimitive(input, hint) {
if (typeof input !== "object" || input === null) return input;
var prim = input[Symbol.toPrimitive];
if (prim !== undefined) {
var res = prim.call(input, hint || "default");
if (typeof res !== "object") return res;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return (hint === "string" ? String : Number)(input);
}
function _toPropertyKey(arg) {
var key = _toPrimitive(arg, "string");
return typeof key === "symbol" ? key : String(key);
}
var _excluded$1 = ["animationData", "loop", "autoplay", "initialSegment", "onComplete", "onLoopComplete", "onEnterFrame", "onSegmentStart", "onConfigReady", "onDataReady", "onDataFailed", "onLoadedImages", "onDOMLoaded", "onDestroy", "lottieRef", "renderer", "name", "assetsPath", "rendererSettings"];
var useLottie = function useLottie(props, style) {
var animationData = props.animationData,
loop = props.loop,
autoplay = props.autoplay,
initialSegment = props.initialSegment,
onComplete = props.onComplete,
onLoopComplete = props.onLoopComplete,
onEnterFrame = props.onEnterFrame,
onSegmentStart = props.onSegmentStart,
onConfigReady = props.onConfigReady,
onDataReady = props.onDataReady,
onDataFailed = props.onDataFailed,
onLoadedImages = props.onLoadedImages,
onDOMLoaded = props.onDOMLoaded,
onDestroy = props.onDestroy;
props.lottieRef;
props.renderer;
props.name;
props.assetsPath;
props.rendererSettings;
var rest = _objectWithoutProperties(props, _excluded$1);
loop = props.loop,
autoplay = props.autoplay,
initialSegment = props.initialSegment,
onComplete = props.onComplete,
onLoopComplete = props.onLoopComplete,
onEnterFrame = props.onEnterFrame,
onSegmentStart = props.onSegmentStart,
onConfigReady = props.onConfigReady,
onDataReady = props.onDataReady,
onDataFailed = props.onDataFailed,
onLoadedImages = props.onLoadedImages,
onDOMLoaded = props.onDOMLoaded,
onDestroy = props.onDestroy;
props.lottieRef;
props.renderer;
props.name;
props.assetsPath;
props.rendererSettings;
var rest = _objectWithoutProperties(props, _excluded$1);
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
animationLoaded = _useState2[0],
setAnimationLoaded = _useState2[1];
_useState2 = _slicedToArray(_useState, 2),
animationLoaded = _useState2[0],
setAnimationLoaded = _useState2[1];
var animationInstanceRef = useRef();

@@ -185,10 +172,7 @@ var animationContainer = useRef(null);

*/
/**
* Play
*/
var play = function play() {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.play();

@@ -199,7 +183,4 @@ };

*/
var stop = function stop() {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.stop();

@@ -210,7 +191,4 @@ };

*/
var pause = function pause() {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.pause();

@@ -222,7 +200,4 @@ };

*/
var setSpeed = function setSpeed(speed) {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setSpeed(speed);

@@ -235,7 +210,4 @@ };

*/
var goToAndPlay = function goToAndPlay(value, isFrame) {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.goToAndPlay(value, isFrame);

@@ -248,7 +220,4 @@ };

*/
var goToAndStop = function goToAndStop(value, isFrame) {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.goToAndStop(value, isFrame);

@@ -260,7 +229,4 @@ };

*/
var setDirection = function setDirection(direction) {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setDirection(direction);

@@ -273,7 +239,4 @@ };

*/
var playSegments = function playSegments(segments, forceFlag) {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.playSegments(segments, forceFlag);

@@ -285,7 +248,4 @@ };

*/
var setSubframe = function setSubframe(useSubFrames) {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setSubframe(useSubFrames);

@@ -297,7 +257,4 @@ };

*/
var getDuration = function getDuration(inFrames) {
var _a;
return (_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.getDuration(inFrames);

@@ -308,10 +265,7 @@ };

*/
var destroy = function destroy() {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy(); // Removing the reference to the animation so separate cleanups are skipped.
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
// Removing the reference to the animation so separate cleanups are skipped.
// Without it the internal `lottie-react` instance throws exceptions as it already cleared itself on destroy.
animationInstanceRef.current = undefined;

@@ -324,3 +278,2 @@ };

*/
/**

@@ -330,28 +283,21 @@ * Load a new animation, and if it's the case, destroy the previous one

*/
var loadAnimation = function loadAnimation() {
var forcedConfigs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _a; // Return if the container ref is null
var _a;
// Return if the container ref is null
if (!animationContainer.current) {
return;
} // Destroy any previous instance
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy(); // Build the animation configuration
}
// Destroy any previous instance
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
// Build the animation configuration
var config = _objectSpread2(_objectSpread2(_objectSpread2({}, props), forcedConfigs), {}, {
container: animationContainer.current
}); // Save the animation instance
});
// Save the animation instance
animationInstanceRef.current = lottie.loadAnimation(config);
setAnimationLoaded(!!animationInstanceRef.current); // Return a function that will clean up
setAnimationLoaded(!!animationInstanceRef.current);
// Return a function that will clean up
return function () {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();

@@ -364,12 +310,11 @@ animationInstanceRef.current = undefined;

*/
useEffect(function () {
var onUnmount = loadAnimation(); // Clean up on unmount
var onUnmount = loadAnimation();
// Clean up on unmount
return function () {
return onUnmount === null || onUnmount === void 0 ? void 0 : onUnmount();
}; // eslint-disable-next-line react-hooks/exhaustive-deps
}, [animationData, loop]); // Update the autoplay state
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [animationData, loop]);
// Update the autoplay state
useEffect(function () {

@@ -379,29 +324,24 @@ if (!animationInstanceRef.current) {

}
animationInstanceRef.current.autoplay = !!autoplay;
}, [autoplay]); // Update the initial segment state
}, [autoplay]);
// Update the initial segment state
useEffect(function () {
if (!animationInstanceRef.current) {
return;
} // When null should reset to default animation length
}
// When null should reset to default animation length
if (!initialSegment) {
animationInstanceRef.current.resetSegments(true);
return;
} // If it's not a valid segment, do nothing
}
// If it's not a valid segment, do nothing
if (!Array.isArray(initialSegment) || !initialSegment.length) {
return;
} // If the current position it's not in the new segment
}
// If the current position it's not in the new segment
// set the current position to start
if (animationInstanceRef.current.currentRawFrame < initialSegment[0] || animationInstanceRef.current.currentRawFrame > initialSegment[1]) {
animationInstanceRef.current.currentRawFrame = initialSegment[0];
} // Update the segment
}
// Update the segment
animationInstanceRef.current.setSegment(initialSegment[0], initialSegment[1]);

@@ -414,7 +354,5 @@ }, [initialSegment]);

*/
/**
* Reinitialize listener on change
*/
useEffect(function () {

@@ -455,7 +393,5 @@ var partialListeners = [{

});
if (!listeners.length) {
return;
}
var deregisterList = listeners.map(

@@ -469,12 +405,10 @@ /**

var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener(listener.name, listener.handler); // Return a function to deregister this listener
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener(listener.name, listener.handler);
// Return a function to deregister this listener
return function () {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(listener.name, listener.handler);
};
}); // Deregister listeners on unmount
});
// Deregister listeners on unmount
return function () {

@@ -489,3 +423,2 @@ deregisterList.forEach(function (deregister) {

*/
var View = /*#__PURE__*/React.createElement("div", _objectSpread2({

@@ -514,7 +447,7 @@ style: style,

// helpers
function getContainerVisibility(container) {
var _container$getBoundin = container.getBoundingClientRect(),
top = _container$getBoundin.top,
height = _container$getBoundin.height;
top = _container$getBoundin.top,
height = _container$getBoundin.height;
var current = window.innerHeight - top;

@@ -526,7 +459,6 @@ var max = window.innerHeight + height;

var _container$getBoundin2 = container.getBoundingClientRect(),
top = _container$getBoundin2.top,
left = _container$getBoundin2.left,
width = _container$getBoundin2.width,
height = _container$getBoundin2.height;
top = _container$getBoundin2.top,
left = _container$getBoundin2.left,
width = _container$getBoundin2.width,
height = _container$getBoundin2.height;
var x = (cursorX - left) / width;

@@ -541,36 +473,30 @@ var y = (cursorY - top) / height;

var wrapperRef = _ref.wrapperRef,
animationItem = _ref.animationItem,
mode = _ref.mode,
actions = _ref.actions;
animationItem = _ref.animationItem,
mode = _ref.mode,
actions = _ref.actions;
useEffect(function () {
var wrapper = wrapperRef.current;
if (!wrapper || !animationItem || !actions.length) {
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 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!
});
// 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
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") {

@@ -596,3 +522,2 @@ // Loop: Loop a given frames

}
if (action.type === "play" && animationItem.isPaused) {

@@ -603,3 +528,2 @@ // Play: Reset segments and continue playing full animation from current position

}
if (action.type === "stop") {

@@ -610,3 +534,2 @@ // Stop: Stop playback

};
document.addEventListener("scroll", scrollHandler);

@@ -617,36 +540,30 @@ return function () {

};
var cursorModeHandler = function cursorModeHandler() {
var handleCursor = function handleCursor(_x, _y) {
var x = _x;
var y = _y; // Resolve cursor position if cursor is inside container
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
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
}
// 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!
});
// Skip if no matching action was found!
if (!action) {
return;
} // Process action types:
}
// Process action types:
if (action.type === "seek" && action.position && Array.isArray(action.position.x) && Array.isArray(action.position.y) && action.frames.length === 2) {

@@ -659,7 +576,5 @@ // Seek: Go to a frame based on player scroll position action

}
if (action.type === "loop") {
animationItem.playSegments(action.frames, true);
}
if (action.type === "play") {

@@ -670,6 +585,4 @@ // Play: Reset segments and continue playing full animation from current position

}
animationItem.playSegments(action.frames);
}
if (action.type === "stop") {

@@ -679,11 +592,8 @@ 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);

@@ -696,21 +606,18 @@ wrapper.addEventListener("mouseout", mouseOutHandler);

};
switch (mode) {
case "scroll":
return scrollModeHandler();
case "cursor":
return cursorModeHandler();
} // eslint-disable-next-line react-hooks/exhaustive-deps
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [mode, animationItem]);
};
var useLottieInteractivity = function useLottieInteractivity(_ref4) {
var actions = _ref4.actions,
mode = _ref4.mode,
lottieObj = _ref4.lottieObj;
mode = _ref4.mode,
lottieObj = _ref4.lottieObj;
var animationItem = lottieObj.animationItem,
View = lottieObj.View,
animationContainerRef = lottieObj.animationContainerRef;
View = lottieObj.View,
animationContainerRef = lottieObj.animationContainerRef;
useInitInteractivity({

@@ -726,35 +633,29 @@ actions: actions,

var _excluded = ["style", "interactivity"];
var Lottie = function Lottie(props) {
var _a, _b, _c;
var style = props.style,
interactivity = props.interactivity,
lottieProps = _objectWithoutProperties(props, _excluded);
interactivity = props.interactivity,
lottieProps = _objectWithoutProperties(props, _excluded);
/**
* Initialize the 'useLottie' hook
*/
var _useLottie = useLottie(lottieProps, style),
View = _useLottie.View,
play = _useLottie.play,
stop = _useLottie.stop,
pause = _useLottie.pause,
setSpeed = _useLottie.setSpeed,
goToAndStop = _useLottie.goToAndStop,
goToAndPlay = _useLottie.goToAndPlay,
setDirection = _useLottie.setDirection,
playSegments = _useLottie.playSegments,
setSubframe = _useLottie.setSubframe,
getDuration = _useLottie.getDuration,
destroy = _useLottie.destroy,
animationContainerRef = _useLottie.animationContainerRef,
animationLoaded = _useLottie.animationLoaded,
animationItem = _useLottie.animationItem;
View = _useLottie.View,
play = _useLottie.play,
stop = _useLottie.stop,
pause = _useLottie.pause,
setSpeed = _useLottie.setSpeed,
goToAndStop = _useLottie.goToAndStop,
goToAndPlay = _useLottie.goToAndPlay,
setDirection = _useLottie.setDirection,
playSegments = _useLottie.playSegments,
setSubframe = _useLottie.setSubframe,
getDuration = _useLottie.getDuration,
destroy = _useLottie.destroy,
animationContainerRef = _useLottie.animationContainerRef,
animationLoaded = _useLottie.animationLoaded,
animationItem = _useLottie.animationItem;
/**
* Make the hook variables/methods available through the provided 'lottieRef'
*/
useEffect(function () {

@@ -778,4 +679,4 @@ if (props.lottieRef) {

};
} // eslint-disable-next-line react-hooks/exhaustive-deps
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [(_a = props.lottieRef) === null || _a === void 0 ? void 0 : _a.current]);

@@ -782,0 +683,0 @@ return useLottieInteractivity({

5

build/index.es.min.js

@@ -1,2 +0,3 @@

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";function a(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 i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){u(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function u(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,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){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==n)return;var r,o,a=[],i=!0,u=!1;try{for(n=n.call(e);!(i=(r=n.next()).done)&&(a.push(r.value),!t||a.length!==t);i=!0);}catch(e){u=!0,o=e}finally{try{i||null==n.return||n.return()}finally{if(u)throw o}}return a}(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=["animationData","loop","autoplay","initialSegment","onComplete","onLoopComplete","onEnterFrame","onSegmentStart","onConfigReady","onDataReady","onDataFailed","onLoadedImages","onDOMLoaded","onDestroy","lottieRef","renderer","name","assetsPath","rendererSettings"],f=function(a,u){var c=a.animationData,f=a.loop,m=a.autoplay,p=a.initialSegment,y=a.onComplete,v=a.onLoopComplete,g=a.onEnterFrame,b=a.onSegmentStart,S=a.onConfigReady,h=a.onDataReady,O=a.onDataFailed,A=a.onLoadedImages,w=a.onDOMLoaded,D=a.onDestroy;a.lottieRef,a.renderer,a.name,a.assetsPath,a.rendererSettings;var P=l(a,d),j=s(n(!1),2),R=j[0],L=j[1],x=r(),E=r(null);return o((function(){var t=function(){var t,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(E.current){null===(t=x.current)||void 0===t||t.destroy();var r=i(i(i({},a),n),{},{container:E.current});return x.current=e.loadAnimation(r),L(!!x.current),function(){var e;null===(e=x.current)||void 0===e||e.destroy(),x.current=void 0}}}();return function(){return null==t?void 0:t()}}),[c,f]),o((function(){x.current&&(x.current.autoplay=!!m)}),[m]),o((function(){x.current&&(p?Array.isArray(p)&&p.length&&((x.current.currentRawFrame<p[0]||x.current.currentRawFrame>p[1])&&(x.current.currentRawFrame=p[0]),x.current.setSegment(p[0],p[1])):x.current.resetSegments(!0))}),[p]),o((function(){var e=[{name:"complete",handler:y},{name:"loopComplete",handler:v},{name:"enterFrame",handler:g},{name:"segmentStart",handler:b},{name:"config_ready",handler:S},{name:"data_ready",handler:h},{name:"data_failed",handler:O},{name:"loaded_images",handler:A},{name:"DOMLoaded",handler:w},{name:"destroy",handler:D}].filter((function(e){return null!=e.handler}));if(e.length){var t=e.map((function(e){var t;return null===(t=x.current)||void 0===t||t.addEventListener(e.name,e.handler),function(){var t;null===(t=x.current)||void 0===t||t.removeEventListener(e.name,e.handler)}}));return function(){t.forEach((function(e){return e()}))}}}),[y,v,g,b,S,h,O,A,w,D]),{View:t.createElement("div",i({style:u,ref:E},P)),play:function(){var e;null===(e=x.current)||void 0===e||e.play()},stop:function(){var e;null===(e=x.current)||void 0===e||e.stop()},pause:function(){var e;null===(e=x.current)||void 0===e||e.pause()},setSpeed:function(e){var t;null===(t=x.current)||void 0===t||t.setSpeed(e)},goToAndStop:function(e,t){var n;null===(n=x.current)||void 0===n||n.goToAndStop(e,t)},goToAndPlay:function(e,t){var n;null===(n=x.current)||void 0===n||n.goToAndPlay(e,t)},setDirection:function(e){var t;null===(t=x.current)||void 0===t||t.setDirection(e)},playSegments:function(e,t){var n;null===(n=x.current)||void 0===n||n.playSegments(e,t)},setSubframe:function(e){var t;null===(t=x.current)||void 0===t||t.setSubframe(e)},getDuration:function(e){var t;return null===(t=x.current)||void 0===t?void 0:t.getDuration(e)},destroy:function(){var e;null===(e=x.current)||void 0===e||e.destroy(),x.current=void 0},animationContainerRef:E,animationLoaded:R,animationItem:x.current}};var m=function(e){var t=e.wrapperRef,n=e.animationItem,r=e.mode,a=e.actions;o((function(){var e=t.current;if(e&&n&&a.length){n.stop();var o,i,u,l,s;switch(r){case"scroll":return l=null,s=function(){var t,r,o,i=(r=(t=e.getBoundingClientRect()).top,o=t.height,(window.innerHeight-r)/(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
n.goToAndStop(s-n.firstFrame-1,!0)}"loop"===u.type&&(null===l||l!==u.frames||n.isPaused)&&(n.playSegments(u.frames,!0),l=u.frames),"play"===u.type&&n.isPaused&&(n.resetSegments(!0),n.play()),"stop"===u.type&&n.goToAndStop(u.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,u,l,s=t,c=r;if(-1!==s&&-1!==c){var d=(o=s,i=c,l=(u=e.getBoundingClientRect()).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 m=(s-f.position.x[0])/(f.position.x[1]-f.position.x[0]),p=(c-f.position.y[0])/(f.position.y[1]-f.position.y[0]);n.playSegments(f.frames,!0),n.goToAndStop(Math.ceil((m+p)/2*(f.frames[1]-f.frames[0])),!0)}"loop"===f.type&&n.playSegments(f.frames,!0),"play"===f.type&&(n.isPaused&&n.resetSegments(!1),n.playSegments(f.frames)),"stop"===f.type&&n.goToAndStop(f.frames[0],!0)}},i=function(e){o(e.clientX,e.clientY)},u=function(){o(-1,-1)},e.addEventListener("mousemove",i),e.addEventListener("mouseout",u),function(){e.removeEventListener("mousemove",i),e.removeEventListener("mouseout",u)}}}}),[r,n])},p=function(e){var t=e.actions,n=e.mode,r=e.lottieObj,o=r.animationItem,a=r.View,i=r.animationContainerRef;return m({actions:t,animationItem:o,mode:n,wrapperRef:i}),a},y=["style","interactivity"],v=function(e){var t,n,r,a=e.style,i=e.interactivity,u=l(e,y),s=f(u,a),c=s.View,d=s.play,m=s.stop,v=s.pause,g=s.setSpeed,b=s.goToAndStop,S=s.goToAndPlay,h=s.setDirection,O=s.playSegments,A=s.setSubframe,w=s.getDuration,D=s.destroy,P=s.animationContainerRef,j=s.animationLoaded,R=s.animationItem;return o((function(){e.lottieRef&&(e.lottieRef.current={play:d,stop:m,pause:v,setSpeed:g,goToAndPlay:S,goToAndStop:b,setDirection:h,playSegments:O,setSubframe:A,getDuration:w,destroy:D,animationContainerRef:P,animationLoaded:j,animationItem:R})}),[null===(t=e.lottieRef)||void 0===t?void 0:t.current]),p({lottieObj:{View:c,play:d,stop:m,pause:v,setSpeed:g,goToAndStop:b,goToAndPlay:S,setDirection:h,playSegments:O,setSubframe:A,getDuration:w,destroy:D,animationContainerRef:P,animationLoaded:j,animationItem:R},actions:null!==(n=null==i?void 0:i.actions)&&void 0!==n?n:[],mode:null!==(r=null==i?void 0:i.mode)&&void 0!==r?r:"scroll"})};export{v as default,f as useLottie,p as useLottieInteractivity};
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";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 a(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){u(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,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[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){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i,a,u=[],l=!0,s=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=i.call(n)).done)&&(u.push(r.value),u.length!==t);l=!0);}catch(e){s=!0,o=e}finally{try{if(!l&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(s)throw o}}return u}}(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 f=["animationData","loop","autoplay","initialSegment","onComplete","onLoopComplete","onEnterFrame","onSegmentStart","onConfigReady","onDataReady","onDataFailed","onLoadedImages","onDOMLoaded","onDestroy","lottieRef","renderer","name","assetsPath","rendererSettings"],d=function(i,u){var c=i.animationData,d=i.loop,m=i.autoplay,p=i.initialSegment,y=i.onComplete,v=i.onLoopComplete,g=i.onEnterFrame,b=i.onSegmentStart,S=i.onConfigReady,h=i.onDataReady,O=i.onDataFailed,w=i.onLoadedImages,A=i.onDOMLoaded,j=i.onDestroy;i.lottieRef,i.renderer,i.name,i.assetsPath,i.rendererSettings;var D=l(i,f),P=s(n(!1),2),R=P[0],L=P[1],E=r(),x=r(null);return o((function(){var t=function(){var t,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(x.current){null===(t=E.current)||void 0===t||t.destroy();var r=a(a(a({},i),n),{},{container:x.current});return E.current=e.loadAnimation(r),L(!!E.current),function(){var e;null===(e=E.current)||void 0===e||e.destroy(),E.current=void 0}}}();return function(){return null==t?void 0:t()}}),[c,d]),o((function(){E.current&&(E.current.autoplay=!!m)}),[m]),o((function(){E.current&&(p?Array.isArray(p)&&p.length&&((E.current.currentRawFrame<p[0]||E.current.currentRawFrame>p[1])&&(E.current.currentRawFrame=p[0]),E.current.setSegment(p[0],p[1])):E.current.resetSegments(!0))}),[p]),o((function(){var e=[{name:"complete",handler:y},{name:"loopComplete",handler:v},{name:"enterFrame",handler:g},{name:"segmentStart",handler:b},{name:"config_ready",handler:S},{name:"data_ready",handler:h},{name:"data_failed",handler:O},{name:"loaded_images",handler:w},{name:"DOMLoaded",handler:A},{name:"destroy",handler:j}].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()}))}}}),[y,v,g,b,S,h,O,w,A,j]),{View:t.createElement("div",a({style:u,ref:x},D)),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(),E.current=void 0},animationContainerRef:x,animationLoaded:R,animationItem:E.current}};var m=function(e){var t=e.wrapperRef,n=e.animationItem,r=e.mode,i=e.actions;o((function(){var e=t.current;if(e&&n&&i.length){n.stop();var o,a,u,l,s;switch(r){case"scroll":return l=null,s=function(){var t,r,o,a=(r=(t=e.getBoundingClientRect()).top,o=t.height,(window.innerHeight-r)/(window.innerHeight+o)),u=i.find((function(e){var t=e.visibility;return t&&a>=t[0]&&a<=t[1]}));if(u){if("seek"===u.type&&u.visibility&&2===u.frames.length){var s=u.frames[0]+Math.ceil((a-u.visibility[0])/(u.visibility[1]-u.visibility[0])*u.frames[1]);
//! goToAndStop must be relative to the start of the current segment
n.goToAndStop(s-n.firstFrame-1,!0)}"loop"===u.type&&(null===l||l!==u.frames||n.isPaused)&&(n.playSegments(u.frames,!0),l=u.frames),"play"===u.type&&n.isPaused&&(n.resetSegments(!0),n.play()),"stop"===u.type&&n.goToAndStop(u.frames[0]-n.firstFrame-1,!0)}},document.addEventListener("scroll",s),function(){document.removeEventListener("scroll",s)};case"cursor":return o=function(t,r){var o,a,u,l,s=t,c=r;if(-1!==s&&-1!==c){var f=(o=s,a=c,l=(u=e.getBoundingClientRect()).top,{x:(o-u.left)/u.width,y:(a-l)/u.height});s=f.x,c=f.y}var d=i.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(d){if("seek"===d.type&&d.position&&Array.isArray(d.position.x)&&Array.isArray(d.position.y)&&2===d.frames.length){var m=(s-d.position.x[0])/(d.position.x[1]-d.position.x[0]),p=(c-d.position.y[0])/(d.position.y[1]-d.position.y[0]);n.playSegments(d.frames,!0),n.goToAndStop(Math.ceil((m+p)/2*(d.frames[1]-d.frames[0])),!0)}"loop"===d.type&&n.playSegments(d.frames,!0),"play"===d.type&&(n.isPaused&&n.resetSegments(!1),n.playSegments(d.frames)),"stop"===d.type&&n.goToAndStop(d.frames[0],!0)}},a=function(e){o(e.clientX,e.clientY)},u=function(){o(-1,-1)},e.addEventListener("mousemove",a),e.addEventListener("mouseout",u),function(){e.removeEventListener("mousemove",a),e.removeEventListener("mouseout",u)}}}}),[r,n])},p=function(e){var t=e.actions,n=e.mode,r=e.lottieObj,o=r.animationItem,i=r.View,a=r.animationContainerRef;return m({actions:t,animationItem:o,mode:n,wrapperRef:a}),i},y=["style","interactivity"],v=function(e){var t,n,r,i=e.style,a=e.interactivity,u=l(e,y),s=d(u,i),c=s.View,f=s.play,m=s.stop,v=s.pause,g=s.setSpeed,b=s.goToAndStop,S=s.goToAndPlay,h=s.setDirection,O=s.playSegments,w=s.setSubframe,A=s.getDuration,j=s.destroy,D=s.animationContainerRef,P=s.animationLoaded,R=s.animationItem;return o((function(){e.lottieRef&&(e.lottieRef.current={play:f,stop:m,pause:v,setSpeed:g,goToAndPlay:S,goToAndStop:b,setDirection:h,playSegments:O,setSubframe:w,getDuration:A,destroy:j,animationContainerRef:D,animationLoaded:P,animationItem:R})}),[null===(t=e.lottieRef)||void 0===t?void 0:t.current]),p({lottieObj:{View:c,play:f,stop:m,pause:v,setSpeed:g,goToAndStop:b,goToAndPlay:S,setDirection:h,playSegments:O,setSubframe:w,getDuration:A,destroy:j,animationContainerRef:D,animationLoaded:P,animationItem:R},actions:null!==(n=null==a?void 0:a.actions)&&void 0!==n?n:[],mode:null!==(r=null==a?void 0:a.mode)&&void 0!==r?r:"scroll"})};export{v as default,d as useLottie,p as useLottieInteractivity};

393

build/index.js

@@ -13,5 +13,31 @@ 'use strict';

function _iterableToArrayLimit(arr, i) {
var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
if (null != _i) {
var _s,
_e,
_x,
_r,
_arr = [],
_n = !0,
_d = !1;
try {
if (_x = (_i = _i.call(arr)).next, 0 === i) {
if (Object(_i) !== _i) return;
_n = !1;
} else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
} catch (err) {
_d = !0, _e = err;
} finally {
try {
if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return;
} finally {
if (_d) throw _e;
}
}
return _arr;
}
}
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {

@@ -23,6 +49,4 @@ var symbols = Object.getOwnPropertySymbols(object);

}
return keys;
}
function _objectSpread2(target) {

@@ -37,7 +61,6 @@ for (var i = 1; i < arguments.length; i++) {

}
return target;
}
function _defineProperty(obj, key, value) {
key = _toPropertyKey(key);
if (key in obj) {

@@ -53,6 +76,4 @@ Object.defineProperty(obj, key, {

}
return obj;
}
function _objectWithoutPropertiesLoose(source, excluded) {

@@ -63,3 +84,2 @@ if (source == null) return {};

var key, i;
for (i = 0; i < sourceKeys.length; i++) {

@@ -70,16 +90,10 @@ key = sourceKeys[i];

}
return target;
}
function _objectWithoutProperties(source, excluded) {
if (source == null) return {};
var target = _objectWithoutPropertiesLoose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for (i = 0; i < sourceSymbolKeys.length; i++) {

@@ -92,44 +106,10 @@ key = sourceSymbolKeys[i];

}
return target;
}
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterableToArrayLimit(arr, i) {
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
if (_i == null) return;
var _arr = [];
var _n = true;
var _d = false;
var _s, _e;
try {
for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"] != null) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
function _unsupportedIterableToArray(o, minLen) {

@@ -143,44 +123,51 @@ if (!o) return;

}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _nonIterableRest() {
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 _toPrimitive(input, hint) {
if (typeof input !== "object" || input === null) return input;
var prim = input[Symbol.toPrimitive];
if (prim !== undefined) {
var res = prim.call(input, hint || "default");
if (typeof res !== "object") return res;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return (hint === "string" ? String : Number)(input);
}
function _toPropertyKey(arg) {
var key = _toPrimitive(arg, "string");
return typeof key === "symbol" ? key : String(key);
}
var _excluded$1 = ["animationData", "loop", "autoplay", "initialSegment", "onComplete", "onLoopComplete", "onEnterFrame", "onSegmentStart", "onConfigReady", "onDataReady", "onDataFailed", "onLoadedImages", "onDOMLoaded", "onDestroy", "lottieRef", "renderer", "name", "assetsPath", "rendererSettings"];
var useLottie = function useLottie(props, style) {
var animationData = props.animationData,
loop = props.loop,
autoplay = props.autoplay,
initialSegment = props.initialSegment,
onComplete = props.onComplete,
onLoopComplete = props.onLoopComplete,
onEnterFrame = props.onEnterFrame,
onSegmentStart = props.onSegmentStart,
onConfigReady = props.onConfigReady,
onDataReady = props.onDataReady,
onDataFailed = props.onDataFailed,
onLoadedImages = props.onLoadedImages,
onDOMLoaded = props.onDOMLoaded,
onDestroy = props.onDestroy;
props.lottieRef;
props.renderer;
props.name;
props.assetsPath;
props.rendererSettings;
var rest = _objectWithoutProperties(props, _excluded$1);
loop = props.loop,
autoplay = props.autoplay,
initialSegment = props.initialSegment,
onComplete = props.onComplete,
onLoopComplete = props.onLoopComplete,
onEnterFrame = props.onEnterFrame,
onSegmentStart = props.onSegmentStart,
onConfigReady = props.onConfigReady,
onDataReady = props.onDataReady,
onDataFailed = props.onDataFailed,
onLoadedImages = props.onLoadedImages,
onDOMLoaded = props.onDOMLoaded,
onDestroy = props.onDestroy;
props.lottieRef;
props.renderer;
props.name;
props.assetsPath;
props.rendererSettings;
var rest = _objectWithoutProperties(props, _excluded$1);
var _useState = React.useState(false),
_useState2 = _slicedToArray(_useState, 2),
animationLoaded = _useState2[0],
setAnimationLoaded = _useState2[1];
_useState2 = _slicedToArray(_useState, 2),
animationLoaded = _useState2[0],
setAnimationLoaded = _useState2[1];
var animationInstanceRef = React.useRef();

@@ -193,10 +180,7 @@ var animationContainer = React.useRef(null);

*/
/**
* Play
*/
var play = function play() {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.play();

@@ -207,7 +191,4 @@ };

*/
var stop = function stop() {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.stop();

@@ -218,7 +199,4 @@ };

*/
var pause = function pause() {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.pause();

@@ -230,7 +208,4 @@ };

*/
var setSpeed = function setSpeed(speed) {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setSpeed(speed);

@@ -243,7 +218,4 @@ };

*/
var goToAndPlay = function goToAndPlay(value, isFrame) {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.goToAndPlay(value, isFrame);

@@ -256,7 +228,4 @@ };

*/
var goToAndStop = function goToAndStop(value, isFrame) {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.goToAndStop(value, isFrame);

@@ -268,7 +237,4 @@ };

*/
var setDirection = function setDirection(direction) {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setDirection(direction);

@@ -281,7 +247,4 @@ };

*/
var playSegments = function playSegments(segments, forceFlag) {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.playSegments(segments, forceFlag);

@@ -293,7 +256,4 @@ };

*/
var setSubframe = function setSubframe(useSubFrames) {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setSubframe(useSubFrames);

@@ -305,7 +265,4 @@ };

*/
var getDuration = function getDuration(inFrames) {
var _a;
return (_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.getDuration(inFrames);

@@ -316,10 +273,7 @@ };

*/
var destroy = function destroy() {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy(); // Removing the reference to the animation so separate cleanups are skipped.
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
// Removing the reference to the animation so separate cleanups are skipped.
// Without it the internal `lottie-react` instance throws exceptions as it already cleared itself on destroy.
animationInstanceRef.current = undefined;

@@ -332,3 +286,2 @@ };

*/
/**

@@ -338,28 +291,21 @@ * Load a new animation, and if it's the case, destroy the previous one

*/
var loadAnimation = function loadAnimation() {
var forcedConfigs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _a; // Return if the container ref is null
var _a;
// Return if the container ref is null
if (!animationContainer.current) {
return;
} // Destroy any previous instance
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy(); // Build the animation configuration
}
// Destroy any previous instance
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
// Build the animation configuration
var config = _objectSpread2(_objectSpread2(_objectSpread2({}, props), forcedConfigs), {}, {
container: animationContainer.current
}); // Save the animation instance
});
// Save the animation instance
animationInstanceRef.current = lottie__default["default"].loadAnimation(config);
setAnimationLoaded(!!animationInstanceRef.current); // Return a function that will clean up
setAnimationLoaded(!!animationInstanceRef.current);
// Return a function that will clean up
return function () {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();

@@ -372,12 +318,11 @@ animationInstanceRef.current = undefined;

*/
React.useEffect(function () {
var onUnmount = loadAnimation(); // Clean up on unmount
var onUnmount = loadAnimation();
// Clean up on unmount
return function () {
return onUnmount === null || onUnmount === void 0 ? void 0 : onUnmount();
}; // eslint-disable-next-line react-hooks/exhaustive-deps
}, [animationData, loop]); // Update the autoplay state
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [animationData, loop]);
// Update the autoplay state
React.useEffect(function () {

@@ -387,29 +332,24 @@ if (!animationInstanceRef.current) {

}
animationInstanceRef.current.autoplay = !!autoplay;
}, [autoplay]); // Update the initial segment state
}, [autoplay]);
// Update the initial segment state
React.useEffect(function () {
if (!animationInstanceRef.current) {
return;
} // When null should reset to default animation length
}
// When null should reset to default animation length
if (!initialSegment) {
animationInstanceRef.current.resetSegments(true);
return;
} // If it's not a valid segment, do nothing
}
// If it's not a valid segment, do nothing
if (!Array.isArray(initialSegment) || !initialSegment.length) {
return;
} // If the current position it's not in the new segment
}
// If the current position it's not in the new segment
// set the current position to start
if (animationInstanceRef.current.currentRawFrame < initialSegment[0] || animationInstanceRef.current.currentRawFrame > initialSegment[1]) {
animationInstanceRef.current.currentRawFrame = initialSegment[0];
} // Update the segment
}
// Update the segment
animationInstanceRef.current.setSegment(initialSegment[0], initialSegment[1]);

@@ -422,7 +362,5 @@ }, [initialSegment]);

*/
/**
* Reinitialize listener on change
*/
React.useEffect(function () {

@@ -463,7 +401,5 @@ var partialListeners = [{

});
if (!listeners.length) {
return;
}
var deregisterList = listeners.map(

@@ -477,12 +413,10 @@ /**

var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener(listener.name, listener.handler); // Return a function to deregister this listener
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener(listener.name, listener.handler);
// Return a function to deregister this listener
return function () {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(listener.name, listener.handler);
};
}); // Deregister listeners on unmount
});
// Deregister listeners on unmount
return function () {

@@ -497,3 +431,2 @@ deregisterList.forEach(function (deregister) {

*/
var View = /*#__PURE__*/React__default["default"].createElement("div", _objectSpread2({

@@ -522,7 +455,7 @@ style: style,

// helpers
function getContainerVisibility(container) {
var _container$getBoundin = container.getBoundingClientRect(),
top = _container$getBoundin.top,
height = _container$getBoundin.height;
top = _container$getBoundin.top,
height = _container$getBoundin.height;
var current = window.innerHeight - top;

@@ -534,7 +467,6 @@ var max = window.innerHeight + height;

var _container$getBoundin2 = container.getBoundingClientRect(),
top = _container$getBoundin2.top,
left = _container$getBoundin2.left,
width = _container$getBoundin2.width,
height = _container$getBoundin2.height;
top = _container$getBoundin2.top,
left = _container$getBoundin2.left,
width = _container$getBoundin2.width,
height = _container$getBoundin2.height;
var x = (cursorX - left) / width;

@@ -549,36 +481,30 @@ var y = (cursorY - top) / height;

var wrapperRef = _ref.wrapperRef,
animationItem = _ref.animationItem,
mode = _ref.mode,
actions = _ref.actions;
animationItem = _ref.animationItem,
mode = _ref.mode,
actions = _ref.actions;
React.useEffect(function () {
var wrapper = wrapperRef.current;
if (!wrapper || !animationItem || !actions.length) {
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 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!
});
// 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
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") {

@@ -604,3 +530,2 @@ // Loop: Loop a given frames

}
if (action.type === "play" && animationItem.isPaused) {

@@ -611,3 +536,2 @@ // Play: Reset segments and continue playing full animation from current position

}
if (action.type === "stop") {

@@ -618,3 +542,2 @@ // Stop: Stop playback

};
document.addEventListener("scroll", scrollHandler);

@@ -625,36 +548,30 @@ return function () {

};
var cursorModeHandler = function cursorModeHandler() {
var handleCursor = function handleCursor(_x, _y) {
var x = _x;
var y = _y; // Resolve cursor position if cursor is inside container
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
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
}
// 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!
});
// Skip if no matching action was found!
if (!action) {
return;
} // Process action types:
}
// Process action types:
if (action.type === "seek" && action.position && Array.isArray(action.position.x) && Array.isArray(action.position.y) && action.frames.length === 2) {

@@ -667,7 +584,5 @@ // Seek: Go to a frame based on player scroll position action

}
if (action.type === "loop") {
animationItem.playSegments(action.frames, true);
}
if (action.type === "play") {

@@ -678,6 +593,4 @@ // Play: Reset segments and continue playing full animation from current position

}
animationItem.playSegments(action.frames);
}
if (action.type === "stop") {

@@ -687,11 +600,8 @@ 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);

@@ -704,21 +614,18 @@ wrapper.addEventListener("mouseout", mouseOutHandler);

};
switch (mode) {
case "scroll":
return scrollModeHandler();
case "cursor":
return cursorModeHandler();
} // eslint-disable-next-line react-hooks/exhaustive-deps
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [mode, animationItem]);
};
var useLottieInteractivity = function useLottieInteractivity(_ref4) {
var actions = _ref4.actions,
mode = _ref4.mode,
lottieObj = _ref4.lottieObj;
mode = _ref4.mode,
lottieObj = _ref4.lottieObj;
var animationItem = lottieObj.animationItem,
View = lottieObj.View,
animationContainerRef = lottieObj.animationContainerRef;
View = lottieObj.View,
animationContainerRef = lottieObj.animationContainerRef;
useInitInteractivity({

@@ -734,35 +641,29 @@ actions: actions,

var _excluded = ["style", "interactivity"];
var Lottie = function Lottie(props) {
var _a, _b, _c;
var style = props.style,
interactivity = props.interactivity,
lottieProps = _objectWithoutProperties(props, _excluded);
interactivity = props.interactivity,
lottieProps = _objectWithoutProperties(props, _excluded);
/**
* Initialize the 'useLottie' hook
*/
var _useLottie = useLottie(lottieProps, style),
View = _useLottie.View,
play = _useLottie.play,
stop = _useLottie.stop,
pause = _useLottie.pause,
setSpeed = _useLottie.setSpeed,
goToAndStop = _useLottie.goToAndStop,
goToAndPlay = _useLottie.goToAndPlay,
setDirection = _useLottie.setDirection,
playSegments = _useLottie.playSegments,
setSubframe = _useLottie.setSubframe,
getDuration = _useLottie.getDuration,
destroy = _useLottie.destroy,
animationContainerRef = _useLottie.animationContainerRef,
animationLoaded = _useLottie.animationLoaded,
animationItem = _useLottie.animationItem;
View = _useLottie.View,
play = _useLottie.play,
stop = _useLottie.stop,
pause = _useLottie.pause,
setSpeed = _useLottie.setSpeed,
goToAndStop = _useLottie.goToAndStop,
goToAndPlay = _useLottie.goToAndPlay,
setDirection = _useLottie.setDirection,
playSegments = _useLottie.playSegments,
setSubframe = _useLottie.setSubframe,
getDuration = _useLottie.getDuration,
destroy = _useLottie.destroy,
animationContainerRef = _useLottie.animationContainerRef,
animationLoaded = _useLottie.animationLoaded,
animationItem = _useLottie.animationItem;
/**
* Make the hook variables/methods available through the provided 'lottieRef'
*/
React.useEffect(function () {

@@ -786,4 +687,4 @@ if (props.lottieRef) {

};
} // eslint-disable-next-line react-hooks/exhaustive-deps
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [(_a = props.lottieRef) === null || _a === void 0 ? void 0 : _a.current]);

@@ -790,0 +691,0 @@ return useLottieInteractivity({

5

build/index.min.js

@@ -1,2 +0,3 @@

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("lottie-web"),t=require("react");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=n(e),o=n(t);function a(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 i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){u(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function u(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,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){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==n)return;var r,o,a=[],i=!0,u=!1;try{for(n=n.call(e);!(i=(r=n.next()).done)&&(a.push(r.value),!t||a.length!==t);i=!0);}catch(e){u=!0,o=e}finally{try{i||null==n.return||n.return()}finally{if(u)throw o}}return a}(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 f=["animationData","loop","autoplay","initialSegment","onComplete","onLoopComplete","onEnterFrame","onSegmentStart","onConfigReady","onDataReady","onDataFailed","onLoadedImages","onDOMLoaded","onDestroy","lottieRef","renderer","name","assetsPath","rendererSettings"],d=function(e,n){var a=e.animationData,u=e.loop,c=e.autoplay,d=e.initialSegment,m=e.onComplete,p=e.onLoopComplete,y=e.onEnterFrame,v=e.onSegmentStart,g=e.onConfigReady,b=e.onDataReady,S=e.onDataFailed,h=e.onLoadedImages,O=e.onDOMLoaded,A=e.onDestroy;e.lottieRef,e.renderer,e.name,e.assetsPath,e.rendererSettings;var w=l(e,f),D=s(t.useState(!1),2),j=D[0],P=D[1],R=t.useRef(),E=t.useRef(null);return t.useEffect((function(){var t=function(){var t,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(E.current){null===(t=R.current)||void 0===t||t.destroy();var o=i(i(i({},e),n),{},{container:E.current});return R.current=r.default.loadAnimation(o),P(!!R.current),function(){var e;null===(e=R.current)||void 0===e||e.destroy(),R.current=void 0}}}();return function(){return null==t?void 0:t()}}),[a,u]),t.useEffect((function(){R.current&&(R.current.autoplay=!!c)}),[c]),t.useEffect((function(){R.current&&(d?Array.isArray(d)&&d.length&&((R.current.currentRawFrame<d[0]||R.current.currentRawFrame>d[1])&&(R.current.currentRawFrame=d[0]),R.current.setSegment(d[0],d[1])):R.current.resetSegments(!0))}),[d]),t.useEffect((function(){var e=[{name:"complete",handler:m},{name:"loopComplete",handler:p},{name:"enterFrame",handler:y},{name:"segmentStart",handler:v},{name:"config_ready",handler:g},{name:"data_ready",handler:b},{name:"data_failed",handler:S},{name:"loaded_images",handler:h},{name:"DOMLoaded",handler:O},{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=R.current)||void 0===t||t.addEventListener(e.name,e.handler),function(){var t;null===(t=R.current)||void 0===t||t.removeEventListener(e.name,e.handler)}}));return function(){t.forEach((function(e){return e()}))}}}),[m,p,y,v,g,b,S,h,O,A]),{View:o.default.createElement("div",i({style:n,ref:E},w)),play:function(){var e;null===(e=R.current)||void 0===e||e.play()},stop:function(){var e;null===(e=R.current)||void 0===e||e.stop()},pause:function(){var e;null===(e=R.current)||void 0===e||e.pause()},setSpeed:function(e){var t;null===(t=R.current)||void 0===t||t.setSpeed(e)},goToAndStop:function(e,t){var n;null===(n=R.current)||void 0===n||n.goToAndStop(e,t)},goToAndPlay:function(e,t){var n;null===(n=R.current)||void 0===n||n.goToAndPlay(e,t)},setDirection:function(e){var t;null===(t=R.current)||void 0===t||t.setDirection(e)},playSegments:function(e,t){var n;null===(n=R.current)||void 0===n||n.playSegments(e,t)},setSubframe:function(e){var t;null===(t=R.current)||void 0===t||t.setSubframe(e)},getDuration:function(e){var t;return null===(t=R.current)||void 0===t?void 0:t.getDuration(e)},destroy:function(){var e;null===(e=R.current)||void 0===e||e.destroy(),R.current=void 0},animationContainerRef:E,animationLoaded:j,animationItem:R.current}};var m=function(e){var n=e.wrapperRef,r=e.animationItem,o=e.mode,a=e.actions;t.useEffect((function(){var e=n.current;if(e&&r&&a.length){r.stop();var t,i,u,l,s;switch(o){case"scroll":return l=null,s=function(){var t,n,o,i=(n=(t=e.getBoundingClientRect()).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 t=function(t,n){var o,i,u,l,s=t,c=n;if(-1!==s&&-1!==c){var f=(o=s,i=c,l=(u=e.getBoundingClientRect()).top,{x:(o-u.left)/u.width,y:(i-l)/u.height});s=f.x,c=f.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]&&c>=t.y[0]&&c<=t.y[1]:!(!t||Number.isNaN(t.x)||Number.isNaN(t.y))&&s===t.x&&c===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 m=(s-d.position.x[0])/(d.position.x[1]-d.position.x[0]),p=(c-d.position.y[0])/(d.position.y[1]-d.position.y[0]);r.playSegments(d.frames,!0),r.goToAndStop(Math.ceil((m+p)/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){t(e.clientX,e.clientY)},u=function(){t(-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,n=e.mode,r=e.lottieObj,o=r.animationItem,a=r.View,i=r.animationContainerRef;return m({actions:t,animationItem:o,mode:n,wrapperRef:i}),a},y=["style","interactivity"];Object.defineProperty(exports,"LottiePlayer",{enumerable:!0,get:function(){return r.default}}),exports.default=function(e){var n,r,o,a=e.style,i=e.interactivity,u=l(e,y),s=d(u,a),c=s.View,f=s.play,m=s.stop,v=s.pause,g=s.setSpeed,b=s.goToAndStop,S=s.goToAndPlay,h=s.setDirection,O=s.playSegments,A=s.setSubframe,w=s.getDuration,D=s.destroy,j=s.animationContainerRef,P=s.animationLoaded,R=s.animationItem;return t.useEffect((function(){e.lottieRef&&(e.lottieRef.current={play:f,stop:m,pause:v,setSpeed:g,goToAndPlay:S,goToAndStop:b,setDirection:h,playSegments:O,setSubframe:A,getDuration:w,destroy:D,animationContainerRef:j,animationLoaded:P,animationItem:R})}),[null===(n=e.lottieRef)||void 0===n?void 0:n.current]),p({lottieObj:{View:c,play:f,stop:m,pause:v,setSpeed:g,goToAndStop:b,goToAndPlay:S,setDirection:h,playSegments:O,setSubframe:A,getDuration:w,destroy:D,animationContainerRef:j,animationLoaded:P,animationItem:R},actions:null!==(r=null==i?void 0:i.actions)&&void 0!==r?r:[],mode:null!==(o=null==i?void 0:i.mode)&&void 0!==o?o:"scroll"})},exports.useLottie=d,exports.useLottieInteractivity=p;
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("lottie-web"),t=require("react");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=n(e),o=n(t);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 a(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){u(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,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[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){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i,a,u=[],l=!0,s=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=i.call(n)).done)&&(u.push(r.value),u.length!==t);l=!0);}catch(e){s=!0,o=e}finally{try{if(!l&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(s)throw o}}return u}}(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 f=["animationData","loop","autoplay","initialSegment","onComplete","onLoopComplete","onEnterFrame","onSegmentStart","onConfigReady","onDataReady","onDataFailed","onLoadedImages","onDOMLoaded","onDestroy","lottieRef","renderer","name","assetsPath","rendererSettings"],d=function(e,n){var i=e.animationData,u=e.loop,c=e.autoplay,d=e.initialSegment,m=e.onComplete,p=e.onLoopComplete,y=e.onEnterFrame,v=e.onSegmentStart,g=e.onConfigReady,b=e.onDataReady,S=e.onDataFailed,h=e.onLoadedImages,O=e.onDOMLoaded,w=e.onDestroy;e.lottieRef,e.renderer,e.name,e.assetsPath,e.rendererSettings;var A=l(e,f),j=s(t.useState(!1),2),P=j[0],D=j[1],E=t.useRef(),R=t.useRef(null);return t.useEffect((function(){var t=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 o=a(a(a({},e),n),{},{container:R.current});return E.current=r.default.loadAnimation(o),D(!!E.current),function(){var e;null===(e=E.current)||void 0===e||e.destroy(),E.current=void 0}}}();return function(){return null==t?void 0:t()}}),[i,u]),t.useEffect((function(){E.current&&(E.current.autoplay=!!c)}),[c]),t.useEffect((function(){E.current&&(d?Array.isArray(d)&&d.length&&((E.current.currentRawFrame<d[0]||E.current.currentRawFrame>d[1])&&(E.current.currentRawFrame=d[0]),E.current.setSegment(d[0],d[1])):E.current.resetSegments(!0))}),[d]),t.useEffect((function(){var e=[{name:"complete",handler:m},{name:"loopComplete",handler:p},{name:"enterFrame",handler:y},{name:"segmentStart",handler:v},{name:"config_ready",handler:g},{name:"data_ready",handler:b},{name:"data_failed",handler:S},{name:"loaded_images",handler:h},{name:"DOMLoaded",handler:O},{name:"destroy",handler:w}].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,p,y,v,g,b,S,h,O,w]),{View:o.default.createElement("div",a({style:n,ref:R},A)),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(),E.current=void 0},animationContainerRef:R,animationLoaded:P,animationItem:E.current}};var m=function(e){var n=e.wrapperRef,r=e.animationItem,o=e.mode,i=e.actions;t.useEffect((function(){var e=n.current;if(e&&r&&i.length){r.stop();var t,a,u,l,s;switch(o){case"scroll":return l=null,s=function(){var t,n,o,a=(n=(t=e.getBoundingClientRect()).top,o=t.height,(window.innerHeight-n)/(window.innerHeight+o)),u=i.find((function(e){var t=e.visibility;return t&&a>=t[0]&&a<=t[1]}));if(u){if("seek"===u.type&&u.visibility&&2===u.frames.length){var s=u.frames[0]+Math.ceil((a-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 t=function(t,n){var o,a,u,l,s=t,c=n;if(-1!==s&&-1!==c){var f=(o=s,a=c,l=(u=e.getBoundingClientRect()).top,{x:(o-u.left)/u.width,y:(a-l)/u.height});s=f.x,c=f.y}var d=i.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(d){if("seek"===d.type&&d.position&&Array.isArray(d.position.x)&&Array.isArray(d.position.y)&&2===d.frames.length){var m=(s-d.position.x[0])/(d.position.x[1]-d.position.x[0]),p=(c-d.position.y[0])/(d.position.y[1]-d.position.y[0]);r.playSegments(d.frames,!0),r.goToAndStop(Math.ceil((m+p)/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)}},a=function(e){t(e.clientX,e.clientY)},u=function(){t(-1,-1)},e.addEventListener("mousemove",a),e.addEventListener("mouseout",u),function(){e.removeEventListener("mousemove",a),e.removeEventListener("mouseout",u)}}}}),[o,r])},p=function(e){var t=e.actions,n=e.mode,r=e.lottieObj,o=r.animationItem,i=r.View,a=r.animationContainerRef;return m({actions:t,animationItem:o,mode:n,wrapperRef:a}),i},y=["style","interactivity"];Object.defineProperty(exports,"LottiePlayer",{enumerable:!0,get:function(){return r.default}}),exports.default=function(e){var n,r,o,i=e.style,a=e.interactivity,u=l(e,y),s=d(u,i),c=s.View,f=s.play,m=s.stop,v=s.pause,g=s.setSpeed,b=s.goToAndStop,S=s.goToAndPlay,h=s.setDirection,O=s.playSegments,w=s.setSubframe,A=s.getDuration,j=s.destroy,P=s.animationContainerRef,D=s.animationLoaded,E=s.animationItem;return t.useEffect((function(){e.lottieRef&&(e.lottieRef.current={play:f,stop:m,pause:v,setSpeed:g,goToAndPlay:S,goToAndStop:b,setDirection:h,playSegments:O,setSubframe:w,getDuration:A,destroy:j,animationContainerRef:P,animationLoaded:D,animationItem:E})}),[null===(n=e.lottieRef)||void 0===n?void 0:n.current]),p({lottieObj:{View:c,play:f,stop:m,pause:v,setSpeed:g,goToAndStop:b,goToAndPlay:S,setDirection:h,playSegments:O,setSubframe:w,getDuration:A,destroy:j,animationContainerRef:P,animationLoaded:D,animationItem:E},actions:null!==(r=null==a?void 0:a.actions)&&void 0!==r?r:[],mode:null!==(o=null==a?void 0:a.mode)&&void 0!==o?o:"scroll"})},exports.useLottie=d,exports.useLottieInteractivity=p;

393

build/index.umd.js

@@ -12,5 +12,31 @@ (function (global, factory) {

function _iterableToArrayLimit(arr, i) {
var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
if (null != _i) {
var _s,
_e,
_x,
_r,
_arr = [],
_n = !0,
_d = !1;
try {
if (_x = (_i = _i.call(arr)).next, 0 === i) {
if (Object(_i) !== _i) return;
_n = !1;
} else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
} catch (err) {
_d = !0, _e = err;
} finally {
try {
if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return;
} finally {
if (_d) throw _e;
}
}
return _arr;
}
}
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {

@@ -22,6 +48,4 @@ var symbols = Object.getOwnPropertySymbols(object);

}
return keys;
}
function _objectSpread2(target) {

@@ -36,7 +60,6 @@ for (var i = 1; i < arguments.length; i++) {

}
return target;
}
function _defineProperty(obj, key, value) {
key = _toPropertyKey(key);
if (key in obj) {

@@ -52,6 +75,4 @@ Object.defineProperty(obj, key, {

}
return obj;
}
function _objectWithoutPropertiesLoose(source, excluded) {

@@ -62,3 +83,2 @@ if (source == null) return {};

var key, i;
for (i = 0; i < sourceKeys.length; i++) {

@@ -69,16 +89,10 @@ key = sourceKeys[i];

}
return target;
}
function _objectWithoutProperties(source, excluded) {
if (source == null) return {};
var target = _objectWithoutPropertiesLoose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for (i = 0; i < sourceSymbolKeys.length; i++) {

@@ -91,44 +105,10 @@ key = sourceSymbolKeys[i];

}
return target;
}
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterableToArrayLimit(arr, i) {
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
if (_i == null) return;
var _arr = [];
var _n = true;
var _d = false;
var _s, _e;
try {
for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"] != null) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
function _unsupportedIterableToArray(o, minLen) {

@@ -142,44 +122,51 @@ if (!o) return;

}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _nonIterableRest() {
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 _toPrimitive(input, hint) {
if (typeof input !== "object" || input === null) return input;
var prim = input[Symbol.toPrimitive];
if (prim !== undefined) {
var res = prim.call(input, hint || "default");
if (typeof res !== "object") return res;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return (hint === "string" ? String : Number)(input);
}
function _toPropertyKey(arg) {
var key = _toPrimitive(arg, "string");
return typeof key === "symbol" ? key : String(key);
}
var _excluded$1 = ["animationData", "loop", "autoplay", "initialSegment", "onComplete", "onLoopComplete", "onEnterFrame", "onSegmentStart", "onConfigReady", "onDataReady", "onDataFailed", "onLoadedImages", "onDOMLoaded", "onDestroy", "lottieRef", "renderer", "name", "assetsPath", "rendererSettings"];
var useLottie = function useLottie(props, style) {
var animationData = props.animationData,
loop = props.loop,
autoplay = props.autoplay,
initialSegment = props.initialSegment,
onComplete = props.onComplete,
onLoopComplete = props.onLoopComplete,
onEnterFrame = props.onEnterFrame,
onSegmentStart = props.onSegmentStart,
onConfigReady = props.onConfigReady,
onDataReady = props.onDataReady,
onDataFailed = props.onDataFailed,
onLoadedImages = props.onLoadedImages,
onDOMLoaded = props.onDOMLoaded,
onDestroy = props.onDestroy;
props.lottieRef;
props.renderer;
props.name;
props.assetsPath;
props.rendererSettings;
var rest = _objectWithoutProperties(props, _excluded$1);
loop = props.loop,
autoplay = props.autoplay,
initialSegment = props.initialSegment,
onComplete = props.onComplete,
onLoopComplete = props.onLoopComplete,
onEnterFrame = props.onEnterFrame,
onSegmentStart = props.onSegmentStart,
onConfigReady = props.onConfigReady,
onDataReady = props.onDataReady,
onDataFailed = props.onDataFailed,
onLoadedImages = props.onLoadedImages,
onDOMLoaded = props.onDOMLoaded,
onDestroy = props.onDestroy;
props.lottieRef;
props.renderer;
props.name;
props.assetsPath;
props.rendererSettings;
var rest = _objectWithoutProperties(props, _excluded$1);
var _useState = React.useState(false),
_useState2 = _slicedToArray(_useState, 2),
animationLoaded = _useState2[0],
setAnimationLoaded = _useState2[1];
_useState2 = _slicedToArray(_useState, 2),
animationLoaded = _useState2[0],
setAnimationLoaded = _useState2[1];
var animationInstanceRef = React.useRef();

@@ -192,10 +179,7 @@ var animationContainer = React.useRef(null);

*/
/**
* Play
*/
var play = function play() {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.play();

@@ -206,7 +190,4 @@ };

*/
var stop = function stop() {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.stop();

@@ -217,7 +198,4 @@ };

*/
var pause = function pause() {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.pause();

@@ -229,7 +207,4 @@ };

*/
var setSpeed = function setSpeed(speed) {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setSpeed(speed);

@@ -242,7 +217,4 @@ };

*/
var goToAndPlay = function goToAndPlay(value, isFrame) {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.goToAndPlay(value, isFrame);

@@ -255,7 +227,4 @@ };

*/
var goToAndStop = function goToAndStop(value, isFrame) {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.goToAndStop(value, isFrame);

@@ -267,7 +236,4 @@ };

*/
var setDirection = function setDirection(direction) {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setDirection(direction);

@@ -280,7 +246,4 @@ };

*/
var playSegments = function playSegments(segments, forceFlag) {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.playSegments(segments, forceFlag);

@@ -292,7 +255,4 @@ };

*/
var setSubframe = function setSubframe(useSubFrames) {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setSubframe(useSubFrames);

@@ -304,7 +264,4 @@ };

*/
var getDuration = function getDuration(inFrames) {
var _a;
return (_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.getDuration(inFrames);

@@ -315,10 +272,7 @@ };

*/
var destroy = function destroy() {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy(); // Removing the reference to the animation so separate cleanups are skipped.
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
// Removing the reference to the animation so separate cleanups are skipped.
// Without it the internal `lottie-react` instance throws exceptions as it already cleared itself on destroy.
animationInstanceRef.current = undefined;

@@ -331,3 +285,2 @@ };

*/
/**

@@ -337,28 +290,21 @@ * Load a new animation, and if it's the case, destroy the previous one

*/
var loadAnimation = function loadAnimation() {
var forcedConfigs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _a; // Return if the container ref is null
var _a;
// Return if the container ref is null
if (!animationContainer.current) {
return;
} // Destroy any previous instance
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy(); // Build the animation configuration
}
// Destroy any previous instance
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
// Build the animation configuration
var config = _objectSpread2(_objectSpread2(_objectSpread2({}, props), forcedConfigs), {}, {
container: animationContainer.current
}); // Save the animation instance
});
// Save the animation instance
animationInstanceRef.current = lottie__default["default"].loadAnimation(config);
setAnimationLoaded(!!animationInstanceRef.current); // Return a function that will clean up
setAnimationLoaded(!!animationInstanceRef.current);
// Return a function that will clean up
return function () {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();

@@ -371,12 +317,11 @@ animationInstanceRef.current = undefined;

*/
React.useEffect(function () {
var onUnmount = loadAnimation(); // Clean up on unmount
var onUnmount = loadAnimation();
// Clean up on unmount
return function () {
return onUnmount === null || onUnmount === void 0 ? void 0 : onUnmount();
}; // eslint-disable-next-line react-hooks/exhaustive-deps
}, [animationData, loop]); // Update the autoplay state
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [animationData, loop]);
// Update the autoplay state
React.useEffect(function () {

@@ -386,29 +331,24 @@ if (!animationInstanceRef.current) {

}
animationInstanceRef.current.autoplay = !!autoplay;
}, [autoplay]); // Update the initial segment state
}, [autoplay]);
// Update the initial segment state
React.useEffect(function () {
if (!animationInstanceRef.current) {
return;
} // When null should reset to default animation length
}
// When null should reset to default animation length
if (!initialSegment) {
animationInstanceRef.current.resetSegments(true);
return;
} // If it's not a valid segment, do nothing
}
// If it's not a valid segment, do nothing
if (!Array.isArray(initialSegment) || !initialSegment.length) {
return;
} // If the current position it's not in the new segment
}
// If the current position it's not in the new segment
// set the current position to start
if (animationInstanceRef.current.currentRawFrame < initialSegment[0] || animationInstanceRef.current.currentRawFrame > initialSegment[1]) {
animationInstanceRef.current.currentRawFrame = initialSegment[0];
} // Update the segment
}
// Update the segment
animationInstanceRef.current.setSegment(initialSegment[0], initialSegment[1]);

@@ -421,7 +361,5 @@ }, [initialSegment]);

*/
/**
* Reinitialize listener on change
*/
React.useEffect(function () {

@@ -462,7 +400,5 @@ var partialListeners = [{

});
if (!listeners.length) {
return;
}
var deregisterList = listeners.map(

@@ -476,12 +412,10 @@ /**

var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener(listener.name, listener.handler); // Return a function to deregister this listener
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener(listener.name, listener.handler);
// Return a function to deregister this listener
return function () {
var _a;
(_a = animationInstanceRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(listener.name, listener.handler);
};
}); // Deregister listeners on unmount
});
// Deregister listeners on unmount
return function () {

@@ -496,3 +430,2 @@ deregisterList.forEach(function (deregister) {

*/
var View = /*#__PURE__*/React__default["default"].createElement("div", _objectSpread2({

@@ -521,7 +454,7 @@ style: style,

// helpers
function getContainerVisibility(container) {
var _container$getBoundin = container.getBoundingClientRect(),
top = _container$getBoundin.top,
height = _container$getBoundin.height;
top = _container$getBoundin.top,
height = _container$getBoundin.height;
var current = window.innerHeight - top;

@@ -533,7 +466,6 @@ var max = window.innerHeight + height;

var _container$getBoundin2 = container.getBoundingClientRect(),
top = _container$getBoundin2.top,
left = _container$getBoundin2.left,
width = _container$getBoundin2.width,
height = _container$getBoundin2.height;
top = _container$getBoundin2.top,
left = _container$getBoundin2.left,
width = _container$getBoundin2.width,
height = _container$getBoundin2.height;
var x = (cursorX - left) / width;

@@ -548,36 +480,30 @@ var y = (cursorY - top) / height;

var wrapperRef = _ref.wrapperRef,
animationItem = _ref.animationItem,
mode = _ref.mode,
actions = _ref.actions;
animationItem = _ref.animationItem,
mode = _ref.mode,
actions = _ref.actions;
React.useEffect(function () {
var wrapper = wrapperRef.current;
if (!wrapper || !animationItem || !actions.length) {
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 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!
});
// 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
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") {

@@ -603,3 +529,2 @@ // Loop: Loop a given frames

}
if (action.type === "play" && animationItem.isPaused) {

@@ -610,3 +535,2 @@ // Play: Reset segments and continue playing full animation from current position

}
if (action.type === "stop") {

@@ -617,3 +541,2 @@ // Stop: Stop playback

};
document.addEventListener("scroll", scrollHandler);

@@ -624,36 +547,30 @@ return function () {

};
var cursorModeHandler = function cursorModeHandler() {
var handleCursor = function handleCursor(_x, _y) {
var x = _x;
var y = _y; // Resolve cursor position if cursor is inside container
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
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
}
// 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!
});
// Skip if no matching action was found!
if (!action) {
return;
} // Process action types:
}
// Process action types:
if (action.type === "seek" && action.position && Array.isArray(action.position.x) && Array.isArray(action.position.y) && action.frames.length === 2) {

@@ -666,7 +583,5 @@ // Seek: Go to a frame based on player scroll position action

}
if (action.type === "loop") {
animationItem.playSegments(action.frames, true);
}
if (action.type === "play") {

@@ -677,6 +592,4 @@ // Play: Reset segments and continue playing full animation from current position

}
animationItem.playSegments(action.frames);
}
if (action.type === "stop") {

@@ -686,11 +599,8 @@ 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);

@@ -703,21 +613,18 @@ wrapper.addEventListener("mouseout", mouseOutHandler);

};
switch (mode) {
case "scroll":
return scrollModeHandler();
case "cursor":
return cursorModeHandler();
} // eslint-disable-next-line react-hooks/exhaustive-deps
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [mode, animationItem]);
};
var useLottieInteractivity = function useLottieInteractivity(_ref4) {
var actions = _ref4.actions,
mode = _ref4.mode,
lottieObj = _ref4.lottieObj;
mode = _ref4.mode,
lottieObj = _ref4.lottieObj;
var animationItem = lottieObj.animationItem,
View = lottieObj.View,
animationContainerRef = lottieObj.animationContainerRef;
View = lottieObj.View,
animationContainerRef = lottieObj.animationContainerRef;
useInitInteractivity({

@@ -733,35 +640,29 @@ actions: actions,

var _excluded = ["style", "interactivity"];
var Lottie = function Lottie(props) {
var _a, _b, _c;
var style = props.style,
interactivity = props.interactivity,
lottieProps = _objectWithoutProperties(props, _excluded);
interactivity = props.interactivity,
lottieProps = _objectWithoutProperties(props, _excluded);
/**
* Initialize the 'useLottie' hook
*/
var _useLottie = useLottie(lottieProps, style),
View = _useLottie.View,
play = _useLottie.play,
stop = _useLottie.stop,
pause = _useLottie.pause,
setSpeed = _useLottie.setSpeed,
goToAndStop = _useLottie.goToAndStop,
goToAndPlay = _useLottie.goToAndPlay,
setDirection = _useLottie.setDirection,
playSegments = _useLottie.playSegments,
setSubframe = _useLottie.setSubframe,
getDuration = _useLottie.getDuration,
destroy = _useLottie.destroy,
animationContainerRef = _useLottie.animationContainerRef,
animationLoaded = _useLottie.animationLoaded,
animationItem = _useLottie.animationItem;
View = _useLottie.View,
play = _useLottie.play,
stop = _useLottie.stop,
pause = _useLottie.pause,
setSpeed = _useLottie.setSpeed,
goToAndStop = _useLottie.goToAndStop,
goToAndPlay = _useLottie.goToAndPlay,
setDirection = _useLottie.setDirection,
playSegments = _useLottie.playSegments,
setSubframe = _useLottie.setSubframe,
getDuration = _useLottie.getDuration,
destroy = _useLottie.destroy,
animationContainerRef = _useLottie.animationContainerRef,
animationLoaded = _useLottie.animationLoaded,
animationItem = _useLottie.animationItem;
/**
* Make the hook variables/methods available through the provided 'lottieRef'
*/
React.useEffect(function () {

@@ -785,4 +686,4 @@ if (props.lottieRef) {

};
} // eslint-disable-next-line react-hooks/exhaustive-deps
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [(_a = props.lottieRef) === null || _a === void 0 ? void 0 : _a.current]);

@@ -789,0 +690,0 @@ return useLottieInteractivity({

5

build/index.umd.min.js

@@ -1,2 +0,3 @@

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("lottie-web"),require("react")):"function"==typeof define&&define.amd?define(["exports","lottie-web","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["lottie-react"]={},e.Lottie,e.React)}(this,(function(e,t,n){"use strict";function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=r(t),i=r(n);function a(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?a(Object(n),!0).forEach((function(t){l(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function s(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function c(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==n)return;var r,o,i=[],a=!0,u=!1;try{for(n=n.call(e);!(a=(r=n.next()).done)&&(i.push(r.value),!t||i.length!==t);a=!0);}catch(e){u=!0,o=e}finally{try{a||null==n.return||n.return()}finally{if(u)throw o}}return i}(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 d=["animationData","loop","autoplay","initialSegment","onComplete","onLoopComplete","onEnterFrame","onSegmentStart","onConfigReady","onDataReady","onDataFailed","onLoadedImages","onDOMLoaded","onDestroy","lottieRef","renderer","name","assetsPath","rendererSettings"],m=function(e,t){var r=e.animationData,a=e.loop,l=e.autoplay,f=e.initialSegment,m=e.onComplete,p=e.onLoopComplete,y=e.onEnterFrame,v=e.onSegmentStart,g=e.onConfigReady,b=e.onDataReady,S=e.onDataFailed,h=e.onLoadedImages,O=e.onDOMLoaded,A=e.onDestroy;e.lottieRef,e.renderer,e.name,e.assetsPath,e.rendererSettings;var w=s(e,d),j=c(n.useState(!1),2),D=j[0],P=j[1],R=n.useRef(),L=n.useRef(null);return n.useEffect((function(){var t=function(){var t,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(L.current){null===(t=R.current)||void 0===t||t.destroy();var r=u(u(u({},e),n),{},{container:L.current});return R.current=o.default.loadAnimation(r),P(!!R.current),function(){var e;null===(e=R.current)||void 0===e||e.destroy(),R.current=void 0}}}();return function(){return null==t?void 0:t()}}),[r,a]),n.useEffect((function(){R.current&&(R.current.autoplay=!!l)}),[l]),n.useEffect((function(){R.current&&(f?Array.isArray(f)&&f.length&&((R.current.currentRawFrame<f[0]||R.current.currentRawFrame>f[1])&&(R.current.currentRawFrame=f[0]),R.current.setSegment(f[0],f[1])):R.current.resetSegments(!0))}),[f]),n.useEffect((function(){var e=[{name:"complete",handler:m},{name:"loopComplete",handler:p},{name:"enterFrame",handler:y},{name:"segmentStart",handler:v},{name:"config_ready",handler:g},{name:"data_ready",handler:b},{name:"data_failed",handler:S},{name:"loaded_images",handler:h},{name:"DOMLoaded",handler:O},{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=R.current)||void 0===t||t.addEventListener(e.name,e.handler),function(){var t;null===(t=R.current)||void 0===t||t.removeEventListener(e.name,e.handler)}}));return function(){t.forEach((function(e){return e()}))}}}),[m,p,y,v,g,b,S,h,O,A]),{View:i.default.createElement("div",u({style:t,ref:L},w)),play:function(){var e;null===(e=R.current)||void 0===e||e.play()},stop:function(){var e;null===(e=R.current)||void 0===e||e.stop()},pause:function(){var e;null===(e=R.current)||void 0===e||e.pause()},setSpeed:function(e){var t;null===(t=R.current)||void 0===t||t.setSpeed(e)},goToAndStop:function(e,t){var n;null===(n=R.current)||void 0===n||n.goToAndStop(e,t)},goToAndPlay:function(e,t){var n;null===(n=R.current)||void 0===n||n.goToAndPlay(e,t)},setDirection:function(e){var t;null===(t=R.current)||void 0===t||t.setDirection(e)},playSegments:function(e,t){var n;null===(n=R.current)||void 0===n||n.playSegments(e,t)},setSubframe:function(e){var t;null===(t=R.current)||void 0===t||t.setSubframe(e)},getDuration:function(e){var t;return null===(t=R.current)||void 0===t?void 0:t.getDuration(e)},destroy:function(){var e;null===(e=R.current)||void 0===e||e.destroy(),R.current=void 0},animationContainerRef:L,animationLoaded:D,animationItem:R.current}};var p=function(e){var t=e.wrapperRef,r=e.animationItem,o=e.mode,i=e.actions;n.useEffect((function(){var e=t.current;if(e&&r&&i.length){r.stop();var n,a,u,l,s;switch(o){case"scroll":return l=null,s=function(){var t,n,o,a=(n=(t=e.getBoundingClientRect()).top,o=t.height,(window.innerHeight-n)/(window.innerHeight+o)),u=i.find((function(e){var t=e.visibility;return t&&a>=t[0]&&a<=t[1]}));if(u){if("seek"===u.type&&u.visibility&&2===u.frames.length){var s=u.frames[0]+Math.ceil((a-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,a,u,l,s=t,c=n;if(-1!==s&&-1!==c){var f=(o=s,a=c,l=(u=e.getBoundingClientRect()).top,{x:(o-u.left)/u.width,y:(a-l)/u.height});s=f.x,c=f.y}var d=i.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(d){if("seek"===d.type&&d.position&&Array.isArray(d.position.x)&&Array.isArray(d.position.y)&&2===d.frames.length){var m=(s-d.position.x[0])/(d.position.x[1]-d.position.x[0]),p=(c-d.position.y[0])/(d.position.y[1]-d.position.y[0]);r.playSegments(d.frames,!0),r.goToAndStop(Math.ceil((m+p)/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)}},a=function(e){n(e.clientX,e.clientY)},u=function(){n(-1,-1)},e.addEventListener("mousemove",a),e.addEventListener("mouseout",u),function(){e.removeEventListener("mousemove",a),e.removeEventListener("mouseout",u)}}}}),[o,r])},y=function(e){var t=e.actions,n=e.mode,r=e.lottieObj,o=r.animationItem,i=r.View,a=r.animationContainerRef;return p({actions:t,animationItem:o,mode:n,wrapperRef:a}),i},v=["style","interactivity"];Object.defineProperty(e,"LottiePlayer",{enumerable:!0,get:function(){return o.default}}),e.default=function(e){var t,r,o,i=e.style,a=e.interactivity,u=s(e,v),l=m(u,i),c=l.View,f=l.play,d=l.stop,p=l.pause,g=l.setSpeed,b=l.goToAndStop,S=l.goToAndPlay,h=l.setDirection,O=l.playSegments,A=l.setSubframe,w=l.getDuration,j=l.destroy,D=l.animationContainerRef,P=l.animationLoaded,R=l.animationItem;return n.useEffect((function(){e.lottieRef&&(e.lottieRef.current={play:f,stop:d,pause:p,setSpeed:g,goToAndPlay:S,goToAndStop:b,setDirection:h,playSegments:O,setSubframe:A,getDuration:w,destroy:j,animationContainerRef:D,animationLoaded:P,animationItem:R})}),[null===(t=e.lottieRef)||void 0===t?void 0:t.current]),y({lottieObj:{View:c,play:f,stop:d,pause:p,setSpeed:g,goToAndStop:b,goToAndPlay:S,setDirection:h,playSegments:O,setSubframe:A,getDuration:w,destroy:j,animationContainerRef:D,animationLoaded:P,animationItem:R},actions:null!==(r=null==a?void 0:a.actions)&&void 0!==r?r:[],mode:null!==(o=null==a?void 0:a.mode)&&void 0!==o?o:"scroll"})},e.useLottie=m,e.useLottieInteractivity=y,Object.defineProperty(e,"__esModule",{value:!0})}));
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("lottie-web"),require("react")):"function"==typeof define&&define.amd?define(["exports","lottie-web","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["lottie-react"]={},e.Lottie,e.React)}(this,(function(e,t,n){"use strict";function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=r(t),i=r(n);function a(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?a(Object(n),!0).forEach((function(t){l(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function s(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function c(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i,a,u=[],l=!0,s=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=i.call(n)).done)&&(u.push(r.value),u.length!==t);l=!0);}catch(e){s=!0,o=e}finally{try{if(!l&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(s)throw o}}return u}}(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 d=["animationData","loop","autoplay","initialSegment","onComplete","onLoopComplete","onEnterFrame","onSegmentStart","onConfigReady","onDataReady","onDataFailed","onLoadedImages","onDOMLoaded","onDestroy","lottieRef","renderer","name","assetsPath","rendererSettings"],m=function(e,t){var r=e.animationData,a=e.loop,l=e.autoplay,f=e.initialSegment,m=e.onComplete,p=e.onLoopComplete,y=e.onEnterFrame,v=e.onSegmentStart,g=e.onConfigReady,b=e.onDataReady,S=e.onDataFailed,h=e.onLoadedImages,O=e.onDOMLoaded,w=e.onDestroy;e.lottieRef,e.renderer,e.name,e.assetsPath,e.rendererSettings;var A=s(e,d),j=c(n.useState(!1),2),P=j[0],D=j[1],R=n.useRef(),E=n.useRef(null);return n.useEffect((function(){var t=function(){var t,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(E.current){null===(t=R.current)||void 0===t||t.destroy();var r=u(u(u({},e),n),{},{container:E.current});return R.current=o.default.loadAnimation(r),D(!!R.current),function(){var e;null===(e=R.current)||void 0===e||e.destroy(),R.current=void 0}}}();return function(){return null==t?void 0:t()}}),[r,a]),n.useEffect((function(){R.current&&(R.current.autoplay=!!l)}),[l]),n.useEffect((function(){R.current&&(f?Array.isArray(f)&&f.length&&((R.current.currentRawFrame<f[0]||R.current.currentRawFrame>f[1])&&(R.current.currentRawFrame=f[0]),R.current.setSegment(f[0],f[1])):R.current.resetSegments(!0))}),[f]),n.useEffect((function(){var e=[{name:"complete",handler:m},{name:"loopComplete",handler:p},{name:"enterFrame",handler:y},{name:"segmentStart",handler:v},{name:"config_ready",handler:g},{name:"data_ready",handler:b},{name:"data_failed",handler:S},{name:"loaded_images",handler:h},{name:"DOMLoaded",handler:O},{name:"destroy",handler:w}].filter((function(e){return null!=e.handler}));if(e.length){var t=e.map((function(e){var t;return null===(t=R.current)||void 0===t||t.addEventListener(e.name,e.handler),function(){var t;null===(t=R.current)||void 0===t||t.removeEventListener(e.name,e.handler)}}));return function(){t.forEach((function(e){return e()}))}}}),[m,p,y,v,g,b,S,h,O,w]),{View:i.default.createElement("div",u({style:t,ref:E},A)),play:function(){var e;null===(e=R.current)||void 0===e||e.play()},stop:function(){var e;null===(e=R.current)||void 0===e||e.stop()},pause:function(){var e;null===(e=R.current)||void 0===e||e.pause()},setSpeed:function(e){var t;null===(t=R.current)||void 0===t||t.setSpeed(e)},goToAndStop:function(e,t){var n;null===(n=R.current)||void 0===n||n.goToAndStop(e,t)},goToAndPlay:function(e,t){var n;null===(n=R.current)||void 0===n||n.goToAndPlay(e,t)},setDirection:function(e){var t;null===(t=R.current)||void 0===t||t.setDirection(e)},playSegments:function(e,t){var n;null===(n=R.current)||void 0===n||n.playSegments(e,t)},setSubframe:function(e){var t;null===(t=R.current)||void 0===t||t.setSubframe(e)},getDuration:function(e){var t;return null===(t=R.current)||void 0===t?void 0:t.getDuration(e)},destroy:function(){var e;null===(e=R.current)||void 0===e||e.destroy(),R.current=void 0},animationContainerRef:E,animationLoaded:P,animationItem:R.current}};var p=function(e){var t=e.wrapperRef,r=e.animationItem,o=e.mode,i=e.actions;n.useEffect((function(){var e=t.current;if(e&&r&&i.length){r.stop();var n,a,u,l,s;switch(o){case"scroll":return l=null,s=function(){var t,n,o,a=(n=(t=e.getBoundingClientRect()).top,o=t.height,(window.innerHeight-n)/(window.innerHeight+o)),u=i.find((function(e){var t=e.visibility;return t&&a>=t[0]&&a<=t[1]}));if(u){if("seek"===u.type&&u.visibility&&2===u.frames.length){var s=u.frames[0]+Math.ceil((a-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,a,u,l,s=t,c=n;if(-1!==s&&-1!==c){var f=(o=s,a=c,l=(u=e.getBoundingClientRect()).top,{x:(o-u.left)/u.width,y:(a-l)/u.height});s=f.x,c=f.y}var d=i.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(d){if("seek"===d.type&&d.position&&Array.isArray(d.position.x)&&Array.isArray(d.position.y)&&2===d.frames.length){var m=(s-d.position.x[0])/(d.position.x[1]-d.position.x[0]),p=(c-d.position.y[0])/(d.position.y[1]-d.position.y[0]);r.playSegments(d.frames,!0),r.goToAndStop(Math.ceil((m+p)/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)}},a=function(e){n(e.clientX,e.clientY)},u=function(){n(-1,-1)},e.addEventListener("mousemove",a),e.addEventListener("mouseout",u),function(){e.removeEventListener("mousemove",a),e.removeEventListener("mouseout",u)}}}}),[o,r])},y=function(e){var t=e.actions,n=e.mode,r=e.lottieObj,o=r.animationItem,i=r.View,a=r.animationContainerRef;return p({actions:t,animationItem:o,mode:n,wrapperRef:a}),i},v=["style","interactivity"];Object.defineProperty(e,"LottiePlayer",{enumerable:!0,get:function(){return o.default}}),e.default=function(e){var t,r,o,i=e.style,a=e.interactivity,u=s(e,v),l=m(u,i),c=l.View,f=l.play,d=l.stop,p=l.pause,g=l.setSpeed,b=l.goToAndStop,S=l.goToAndPlay,h=l.setDirection,O=l.playSegments,w=l.setSubframe,A=l.getDuration,j=l.destroy,P=l.animationContainerRef,D=l.animationLoaded,R=l.animationItem;return n.useEffect((function(){e.lottieRef&&(e.lottieRef.current={play:f,stop:d,pause:p,setSpeed:g,goToAndPlay:S,goToAndStop:b,setDirection:h,playSegments:O,setSubframe:w,getDuration:A,destroy:j,animationContainerRef:P,animationLoaded:D,animationItem:R})}),[null===(t=e.lottieRef)||void 0===t?void 0:t.current]),y({lottieObj:{View:c,play:f,stop:d,pause:p,setSpeed:g,goToAndStop:b,goToAndPlay:S,setDirection:h,playSegments:O,setSubframe:w,getDuration:A,destroy:j,animationContainerRef:P,animationLoaded:D,animationItem:R},actions:null!==(r=null==a?void 0:a.actions)&&void 0!==r?r:[],mode:null!==(o=null==a?void 0:a.mode)&&void 0!==o?o:"scroll"})},e.useLottie=m,e.useLottieInteractivity=y,Object.defineProperty(e,"__esModule",{value:!0})}));

16

package.json
{
"name": "lottie-react",
"version": "2.3.1",
"version": "2.4.0",
"description": "Lottie for React",

@@ -51,3 +51,3 @@ "keywords": [

"dependencies": {
"lottie-web": "^5.9.4"
"lottie-web": "^5.10.2"
},

@@ -85,5 +85,5 @@ "devDependencies": {

"jest-canvas-mock": "^2.3.1",
"node-sass": "^7.0.1",
"npm-run-all": "^4.1.5",
"prettier": "^2.7.1",
"node-sass": "^8.0.0",
"npm-run-all": "4.1.5",
"prettier": "^2.8.4",
"react": "^18.2.0",

@@ -99,5 +99,5 @@ "react-dom": "^18.2.0",

"ts-jest": "^27.1.3",
"ts-node": "^10.4.0",
"tslib": "^2.3.1",
"typescript": "^4.7.4"
"ts-node": "^10.9.1",
"tslib": "^2.5.0",
"typescript": "^4.9.5"
},

@@ -104,0 +104,0 @@ "peerDependencies": {

2

README.md

@@ -84,3 +84,3 @@ # lottie-react

Any **questions** or **suggestions**? Use the [**Discussions**](https://github.com/github/docs/discussions) tab. Any **issues**? Don't hesitate to document it in the [**Issues**](https://github.com/Gamote/lottie-react/issues) tab, and we will do our best to investigate it and fix it. Any **solutions**? You are very welcomed to open a [**pull request**](https://github.com/Gamote/lottie-react/pulls).
Any **questions** or **suggestions**? Use the [**Discussions**](https://github.com/Gamote/lottie-react/discussions) tab. Any **issues**? Don't hesitate to document it in the [**Issues**](https://github.com/Gamote/lottie-react/issues) tab, and we will do our best to investigate it and fix it. Any **solutions**? You are very welcomed to open a [**pull request**](https://github.com/Gamote/lottie-react/pulls).

@@ -87,0 +87,0 @@ > 👩‍💻 `v3` is under development and is planning to bring a lot of features and improvements. But unfortunately, at the moment all the maintainers are super busy with work related projects. You can check out the progress under the `v3` branch. And of course, you are encouraged to contribute. :)

build/index.es.js.map

Sorry, the diff of this file is not supported yet

build/index.js.map

Sorry, the diff of this file is not supported yet

build/index.umd.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc