@wellyshen/use-web-animations
Version:
React hook for highly-performant and manipulable animations using Web Animations API.
2,183 lines (2,068 loc) • 45.4 kB
JavaScript
import { useRef, useState, useCallback, useEffect } from 'react';
import _extends from '@babel/runtime/helpers/extends';
var useLatest = (function (val) {
var ref = useRef(val);
ref.current = val;
return ref;
});
var polyfillErr = "💡 use-web-animations: please install polyfill to use this hook. See https://github.com/wellyshen/use-web-animations##use-polyfill";
var eventErr = "\uD83D\uDCA1 use-web-animations: the browser doesn't support \"onReady\" event, please use \"onUpdate\" to monitor the animation's state instead. See https://github.com/wellyshen/use-web-animations#basic-usage";
var useWebAnimations = function useWebAnimations(_temp) {
var _ref = _temp === void 0 ? {} : _temp,
refOpt = _ref.ref,
id = _ref.id,
playbackRate = _ref.playbackRate,
autoPlay = _ref.autoPlay,
keyframes = _ref.keyframes,
animationOptions = _ref.animationOptions,
onReady = _ref.onReady,
onUpdate = _ref.onUpdate,
onFinish = _ref.onFinish;
var _useState = useState(),
playState = _useState[0],
setPlayState = _useState[1];
var hasUnmountedRef = useRef(false);
var animRef = useRef();
var prevPendingRef = useRef();
var prevPlayStateRef = useRef();
var keyframesRef = useRef(keyframes);
var animationOptionsRef = useRef(animationOptions);
var onReadyRef = useLatest(onReady);
var onUpdateRef = useLatest(onUpdate);
var onFinishRef = useLatest(onFinish);
var refVar = useRef(null);
var ref = refOpt || refVar;
var getAnimation = useCallback(function () {
return animRef.current;
}, []);
var animate = useCallback(function (args) {
if (!ref.current || !args.keyframes) return;
if (!ref.current.animate) {
console.error(polyfillErr);
return;
}
animRef.current = ref.current.animate(args.keyframes, args.animationOptions);
var anim = animRef.current;
if (args.autoPlay === false) anim.pause();
if (args.id) anim.id = args.id;
if (args.playbackRate) anim.playbackRate = args.playbackRate;
if (onReadyRef.current) {
if (anim.ready) {
anim.ready.then(function (animation) {
// @ts-expect-error
onReadyRef.current({
playState: animation.playState,
animate: animate,
animation: animation
});
});
} else {
console.error(eventErr);
}
}
if (onFinishRef.current) {
anim.onfinish = function (e) {
var animation = e.target;
if (!hasUnmountedRef.current) {
// @ts-expect-error
onFinishRef.current({
playState: animation.playState,
animate: animate,
animation: animation
});
}
};
}
prevPlayStateRef.current = undefined;
}, [onFinishRef, onReadyRef, ref]);
useEffect(function () {
if (keyframesRef.current) animate({
id: id,
playbackRate: playbackRate,
autoPlay: autoPlay,
keyframes: keyframesRef.current,
animationOptions: animationOptionsRef.current
});
}, [animate, autoPlay, id, playbackRate]);
useEffect(function () {
var rafId;
var update = function update() {
var animation = getAnimation();
if (animation) {
var pending = animation.pending,
curPlayState = animation.playState;
if (prevPlayStateRef.current !== curPlayState) setPlayState(curPlayState);
if (onUpdateRef.current && (prevPendingRef.current !== pending || prevPlayStateRef.current !== curPlayState || curPlayState === "running")) onUpdateRef.current({
playState: curPlayState,
animate: animate,
animation: animation
});
prevPendingRef.current = pending;
prevPlayStateRef.current = curPlayState;
}
rafId = requestAnimationFrame(update);
};
rafId = requestAnimationFrame(update);
return function () {
var _getAnimation, _getAnimation2;
cancelAnimationFrame(rafId);
hasUnmountedRef.current = true;
(_getAnimation = getAnimation()) == null ? void 0 : _getAnimation.finish();
(_getAnimation2 = getAnimation()) == null ? void 0 : _getAnimation2.cancel();
};
}, [animate, getAnimation, onUpdateRef]);
return {
ref: ref,
playState: playState,
getAnimation: getAnimation,
animate: animate
};
};
var easing1 = "cubic-bezier(0.215, 0.61, 0.355, 1)";
var easing2 = "cubic-bezier(0.755, 0.05, 0.855, 0.06)";
var transformOrigin$i = "center bottom";
var frame1$6 = {
transform: "translate3d(0, 0, 0)",
easing: easing1,
transformOrigin: transformOrigin$i
};
var frame2$6 = {
transform: "translate3d(0, -30px, 0) scaleY(1.1)",
easing: easing2,
transformOrigin: transformOrigin$i
};
var bounce = {
keyframes: [_extends({}, frame1$6, {
offset: 0
}), _extends({}, frame1$6, {
offset: 0.2
}), _extends({}, frame2$6, {
offset: 0.4
}), _extends({}, frame2$6, {
offset: 0.43
}), _extends({}, frame1$6, {
offset: 0.53
}), {
transform: "translate3d(0, -15px, 0) scaleY(1.05)",
easing: easing2,
transformOrigin: transformOrigin$i,
offset: 0.7
}, {
transform: "translate3d(0, 0, 0) scaleY(0.95)",
easing: easing1,
transformOrigin: transformOrigin$i,
offset: 0.8
}, {
transform: "translate3d(0, -4px, 0) scaleY(1.02)",
transformOrigin: transformOrigin$i,
offset: 0.9
}, _extends({}, frame1$6, {
offset: 1
})],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var frame1$5 = {
opacity: 1
};
var frame2$5 = {
opacity: 0
};
var flash = {
keyframes: [_extends({}, frame1$5, {
offset: 0
}), _extends({}, frame2$5, {
offset: 0.25
}), _extends({}, frame1$5, {
offset: 0.5
}), _extends({}, frame2$5, {
offset: 0.75
}), _extends({}, frame1$5, {
offset: 1
})],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var pulse = {
keyframes: [{
transform: "scale3d(1, 1, 1)",
offset: 0
}, {
transform: "scale3d(1.05, 1.05, 1.05)",
offset: 0.5
}, {
transform: "scale3d(1, 1, 1)",
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both",
easing: "ease-in-out"
}
};
var rubberBand = {
keyframes: [{
transform: "scale3d(1, 1, 1)",
offset: 0
}, {
transform: "scale3d(1.25, 0.75, 1)",
offset: 0.3
}, {
transform: "scale3d(0.75, 1.25, 1)",
offset: 0.4
}, {
transform: "scale3d(1.15, 0.85, 1)",
offset: 0.5
}, {
transform: "scale3d(0.95, 1.05, 1)",
offset: 0.65
}, {
transform: "scale3d(1.05, 0.95, 1)",
offset: 0.75
}, {
transform: "scale3d(1, 1, 1)",
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var frame1$4 = {
transform: "translate3d(0, 0, 0)"
};
var frame2$4 = {
transform: "translate3d(-10px, 0, 0)"
};
var frame3$2 = {
transform: "translate3d(10px, 0, 0)"
};
var shakeX = {
keyframes: [_extends({}, frame1$4, {
offset: 0
}), _extends({}, frame2$4, {
offset: 0.1
}), _extends({}, frame3$2, {
offset: 0.2
}), _extends({}, frame2$4, {
offset: 0.3
}), _extends({}, frame3$2, {
offset: 0.4
}), _extends({}, frame2$4, {
offset: 0.5
}), _extends({}, frame3$2, {
offset: 0.6
}), _extends({}, frame2$4, {
offset: 0.7
}), _extends({}, frame3$2, {
offset: 0.8
}), _extends({}, frame2$4, {
offset: 0.9
}), _extends({}, frame1$4, {
offset: 1
})],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var frame1$3 = {
transform: "translate3d(0, 0, 0)"
};
var frame2$3 = {
transform: "translate3d(0, -10px, 0)"
};
var frame3$1 = {
transform: "translate3d(0, 10px, 0)"
};
var shakeY = {
keyframes: [_extends({}, frame1$3, {
offset: 0
}), _extends({}, frame2$3, {
offset: 0.1
}), _extends({}, frame3$1, {
offset: 0.2
}), _extends({}, frame2$3, {
offset: 0.3
}), _extends({}, frame3$1, {
offset: 0.4
}), _extends({}, frame2$3, {
offset: 0.5
}), _extends({}, frame3$1, {
offset: 0.6
}), _extends({}, frame2$3, {
offset: 0.7
}), _extends({}, frame3$1, {
offset: 0.8
}), _extends({}, frame2$3, {
offset: 0.9
}), _extends({}, frame1$3, {
offset: 1
})],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var headShake = {
keyframes: [{
transform: "translateX(0)",
offset: 0
}, {
transform: "translateX(-6px) rotateY(-9deg)",
offset: 0.065
}, {
transform: "translateX(5px) rotateY(7deg)",
offset: 0.185
}, {
transform: "translateX(-3px) rotateY(-5deg)",
offset: 0.315
}, {
transform: "translateX(2px) rotateY(3deg)",
offset: 0.435
}, {
transform: "translateX(0)",
offset: 0.5
}, {
transform: "none",
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both",
easing: "ease-in-out"
}
};
var transformOrigin$h = "top center";
var swing = {
keyframes: [{
transform: "rotate3d(0, 0, 1, 0deg)",
transformOrigin: transformOrigin$h,
offset: 0
}, {
transform: "rotate3d(0, 0, 1, 15deg)",
transformOrigin: transformOrigin$h,
offset: 0.2
}, {
transform: "rotate3d(0, 0, 1, -10deg)",
transformOrigin: transformOrigin$h,
offset: 0.4
}, {
transform: "rotate3d(0, 0, 1, 5deg)",
transformOrigin: transformOrigin$h,
offset: 0.6
}, {
transform: "rotate3d(0, 0, 1, -5deg)",
transformOrigin: transformOrigin$h,
offset: 0.8
}, {
transform: "rotate3d(0, 0, 1, 0deg)",
transformOrigin: transformOrigin$h,
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var frame1$2 = {
transform: "scale3d(1, 1, 1)"
};
var frame2$2 = {
transform: "scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg)"
};
var frame3 = {
transform: "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)"
};
var frame4 = {
transform: "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)"
};
var tada = {
keyframes: [_extends({}, frame1$2, {
offset: 0
}), _extends({}, frame2$2, {
offset: 0.1
}), _extends({}, frame2$2, {
offset: 0.2
}), _extends({}, frame3, {
offset: 0.3
}), _extends({}, frame4, {
offset: 0.4
}), _extends({}, frame3, {
offset: 0.5
}), _extends({}, frame4, {
offset: 0.6
}), _extends({}, frame3, {
offset: 0.7
}), _extends({}, frame4, {
offset: 0.8
}), _extends({}, frame3, {
offset: 0.9
}), _extends({}, frame1$2, {
offset: 1
})],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var wobble = {
keyframes: [{
transform: "translate3d(0, 0, 0)",
offset: 0
}, {
transform: "translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)",
offset: 0.15
}, {
transform: "translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)",
offset: 0.3
}, {
transform: "translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)",
offset: 0.45
}, {
transform: "translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)",
offset: 0.6
}, {
transform: "translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)",
offset: 0.75
}, {
transform: "translate3d(0, 0, 0)",
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var transformOrigin$g = "center";
var frame$4 = {
transform: "translate3d(0, 0, 0)",
transformOrigin: transformOrigin$g
};
var jello = {
keyframes: [_extends({}, frame$4, {
offset: 0
}), _extends({}, frame$4, {
offset: 0.111
}), {
transform: "skewX(-12.5deg) skewY(-12.5deg)",
transformOrigin: transformOrigin$g,
offset: 0.222
}, {
transform: "skewX(6.25deg) skewY(6.25deg)",
transformOrigin: transformOrigin$g,
offset: 0.333
}, {
transform: "skewX(-3.125deg) skewY(-3.125deg)",
transformOrigin: transformOrigin$g,
offset: 0.444
}, {
transform: "skewX(1.5625deg) skewY(1.5625deg)",
transformOrigin: transformOrigin$g,
offset: 0.555
}, {
transform: "skewX(-0.78125deg) skewY(-0.78125deg)",
transformOrigin: transformOrigin$g,
offset: 0.666
}, {
transform: "skewX(0.390625deg) skewY(0.390625deg)",
transformOrigin: transformOrigin$g,
offset: 0.777
}, {
transform: "skewX(-0.1953125deg) skewY(-0.1953125deg)",
transformOrigin: transformOrigin$g,
offset: 0.888
}, _extends({}, frame$4, {
offset: 1
})],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var frame1$1 = {
transform: "scale(1)"
};
var frame2$1 = {
transform: "scale(1.3)"
};
var heartBeat = {
keyframes: [_extends({}, frame1$1, {
offset: 0
}), _extends({}, frame2$1, {
offset: 0.14
}), _extends({}, frame1$1, {
offset: 0.28
}), _extends({}, frame2$1, {
offset: 0.42
}), _extends({}, frame1$1, {
offset: 0.7
}), {
transform: "none",
offset: 1
}],
animationOptions: {
duration: 1300,
fill: "both",
easing: "ease-in-out"
}
};
var backInDown = {
keyframes: [{
transform: "translateY(-1200px) scale(0.7)",
opacity: 0.7,
offset: 0
}, {
transform: "translateY(0px) scale(0.7)",
opacity: 0.7,
offset: 0.8
}, {
transform: "scale(1)",
opacity: 1,
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var backInLeft = {
keyframes: [{
transform: "translateX(-2000px) scale(0.7)",
opacity: 0.7,
offset: 0
}, {
transform: "translateX(0px) scale(0.7)",
opacity: 0.7,
offset: 0.8
}, {
transform: "scale(1)",
opacity: 1,
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var backInRight = {
keyframes: [{
transform: "translateX(2000px) scale(0.7)",
opacity: 0.7,
offset: 0
}, {
transform: "translateX(0px) scale(0.7)",
opacity: 0.7,
offset: 0.8
}, {
transform: "scale(1)",
opacity: 1,
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var backInUp = {
keyframes: [{
transform: "translateY(1200px) scale(0.7)",
opacity: 0.7,
offset: 0
}, {
transform: "translateX(0px) scale(0.7)",
opacity: 0.7,
offset: 0.8
}, {
transform: "scale(1)",
opacity: 1,
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var backOutDown = {
keyframes: [{
transform: "scale(1)",
opacity: 1,
offset: 0
}, {
transform: "translateY(0px) scale(0.7)",
opacity: 0.7,
offset: 0.2
}, {
transform: "translateY(700px) scale(0.7)",
opacity: 0.7,
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var backOutLeft = {
keyframes: [{
transform: "scale(1)",
opacity: 1,
offset: 0
}, {
transform: "translateY(0px) scale(0.7)",
opacity: 0.7,
offset: 0.2
}, {
transform: "translateX(-2000px) scale(0.7)",
opacity: 0.7,
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var backOutRight = {
keyframes: [{
transform: "scale(1)",
opacity: 1,
offset: 0
}, {
transform: "translateY(0px) scale(0.7)",
opacity: 0.7,
offset: 0.2
}, {
transform: "translateX(2000px) scale(0.7)",
opacity: 0.7,
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var backOutUp = {
keyframes: [{
transform: "scale(1)",
opacity: 1,
offset: 0
}, {
transform: "translateY(0px) scale(0.7)",
opacity: 0.7,
offset: 0.2
}, {
transform: "translateY(-700px) scale(0.7)",
opacity: 0.7,
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var easing$5 = "cubic-bezier(0.215, 0.61, 0.355, 1)";
var bounceIn = {
keyframes: [{
transform: "scale3d(0.3, 0.3, 0.3)",
opacity: 0,
easing: easing$5,
offset: 0
}, {
transform: "scale3d(1.1, 1.1, 1.1)",
easing: easing$5,
offset: 0.2
}, {
transform: "scale3d(0.9, 0.9, 0.9)",
easing: easing$5,
offset: 0.4
}, {
transform: "scale3d(1.03, 1.03, 1.03)",
opacity: 1,
easing: easing$5,
offset: 0.6
}, {
transform: "scale3d(0.97, 0.97, 0.97)",
easing: easing$5,
offset: 0.8
}, {
transform: "scale3d(1, 1, 1)",
opacity: 1,
easing: easing$5,
offset: 1
}],
animationOptions: {
duration: 750,
fill: "both"
}
};
var easing$4 = "cubic-bezier(0.215, 0.61, 0.355, 1)";
var bounceInDown = {
keyframes: [{
transform: "translate3d(0, -3000px, 0) scaleY(3)",
opacity: 0,
easing: easing$4,
offset: 0
}, {
transform: "translate3d(0, 25px, 0) scaleY(0.9)",
opacity: 1,
easing: easing$4,
offset: 0.6
}, {
transform: "translate3d(0, -10px, 0) scaleY(0.95)",
easing: easing$4,
offset: 0.75
}, {
transform: "translate3d(0, 5px, 0) scaleY(0.985)",
easing: easing$4,
offset: 0.9
}, {
transform: "translate3d(0, 0, 0)",
opacity: 1,
easing: easing$4,
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var easing$3 = "cubic-bezier(0.215, 0.61, 0.355, 1)";
var bounceInLeft = {
keyframes: [{
transform: "translate3d(-3000px, 0, 0) scaleX(3)",
opacity: 0,
easing: easing$3,
offset: 0
}, {
transform: "translate3d(25px, 0, 0) scaleX(1)",
opacity: 1,
easing: easing$3,
offset: 0.6
}, {
transform: "translate3d(-10px, 0, 0) scaleX(0.98)",
easing: easing$3,
offset: 0.75
}, {
transform: "translate3d(5px, 0, 0) scaleX(0.995)",
easing: easing$3,
offset: 0.9
}, {
transform: "translate3d(0, 0, 0)",
opacity: 1,
easing: easing$3,
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var easing$2 = "cubic-bezier(0.215, 0.61, 0.355, 1)";
var bounceInRight = {
keyframes: [{
transform: "translate3d(3000px, 0, 0) scaleX(3)",
opacity: 0,
easing: easing$2,
offset: 0
}, {
transform: "translate3d(-25px, 0, 0) scaleX(1)",
opacity: 1,
easing: easing$2,
offset: 0.6
}, {
transform: "translate3d(10px, 0, 0) scaleX(0.98)",
easing: easing$2,
offset: 0.75
}, {
transform: "translate3d(-5px, 0, 0) scaleX(0.995)",
easing: easing$2,
offset: 0.9
}, {
transform: "translate3d(0, 0, 0)",
opacity: 1,
easing: easing$2,
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var easing$1 = "cubic-bezier(0.215, 0.61, 0.355, 1)";
var bounceInUp = {
keyframes: [{
transform: "translate3d(0, 3000px, 0) scaleY(5)",
opacity: 0,
easing: easing$1,
offset: 0
}, {
transform: "translate3d(0, -20px, 0) scaleY(0.9)",
opacity: 1,
easing: easing$1,
offset: 0.6
}, {
transform: "translate3d(0, 10px, 0) scaleY(0.95)",
easing: easing$1,
offset: 0.75
}, {
transform: "translate3d(0, -5px, 0) scaleY(0.985)",
easing: easing$1,
offset: 0.9
}, {
transform: "translate3d(0, 0, 0)",
opacity: 1,
easing: easing$1,
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var frame$3 = {
transform: "scale3d(1.1, 1.1, 1.1)",
opacity: 1
};
var bounceOut = {
keyframes: [{
transform: "none",
opacity: 1,
offset: 0
}, {
transform: "scale3d(0.9, 0.9, 0.9)",
offset: 0.2
}, _extends({}, frame$3, {
offset: 0.5
}), _extends({}, frame$3, {
offset: 0.55
}), {
transform: "scale3d(0.3, 0.3, 0.3)",
opacity: 0,
offset: 1
}],
animationOptions: {
duration: 750,
fill: "both"
}
};
var frame$2 = {
transform: "translate3d(0, -20px, 0) scaleY(0.9)",
opacity: 1
};
var bounceOutDown = {
keyframes: [{
transform: "none",
opacity: 1,
offset: 0
}, {
transform: "translate3d(0, 10px, 0) scaleY(0.985)",
offset: 0.2
}, _extends({}, frame$2, {
offset: 0.4
}), _extends({}, frame$2, {
offset: 0.45
}), {
transform: "translate3d(0, 2000px, 0) scaleY(3)",
opacity: 0,
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var bounceOutLeft = {
keyframes: [{
transform: "none",
opacity: 1,
offset: 0
}, {
transform: "translate3d(20px, 0, 0) scaleX(0.9)",
opacity: 1,
offset: 0.2
}, {
transform: "translate3d(-2000px, 0, 0) scaleX(2)",
opacity: 0,
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var bounceOutRight = {
keyframes: [{
transform: "none",
opacity: 1,
offset: 0
}, {
transform: "translate3d(-20px, 0, 0) scaleX(0.9)",
opacity: 1,
offset: 0.2
}, {
transform: "translate3d(2000px, 0, 0) scaleX(2)",
opacity: 0,
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var frame$1 = {
transform: "translate3d(0, 20px, 0) scaleY(0.9)",
opacity: 1
};
var bounceOutUp = {
keyframes: [{
transform: "none",
opacity: 1,
offset: 0
}, {
transform: "translate3d(0, -10px, 0) scaleY(0.985)",
offset: 0.2
}, _extends({}, frame$1, {
offset: 0.4
}), _extends({}, frame$1, {
offset: 0.45
}), {
transform: "translate3d(0, -2000px, 0) scaleY(3)",
opacity: 0,
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var fadeIn = {
keyframes: [{
opacity: 0
}, {
opacity: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var fadeInDown = {
keyframes: [{
transform: "translate3d(0, -100%, 0)",
opacity: 0
}, {
transform: "translate3d(0, 0, 0)",
opacity: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var fadeInDownBig = {
keyframes: [{
transform: "translate3d(0, -2000px, 0)",
opacity: 0
}, {
transform: "translate3d(0, 0, 0)",
opacity: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var fadeInLeft = {
keyframes: [{
transform: "translate3d(-100%, 0, 0)",
opacity: 0
}, {
transform: "translate3d(0, 0, 0)",
opacity: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var fadeInLeftBig = {
keyframes: [{
transform: "translate3d(-2000px, 0, 0)",
opacity: 0
}, {
transform: "translate3d(0, 0, 0)",
opacity: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var fadeInRight = {
keyframes: [{
transform: "translate3d(100%, 0, 0)",
opacity: 0
}, {
transform: "translate3d(0, 0, 0)",
opacity: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var fadeInRightBig = {
keyframes: [{
transform: "translate3d(2000px, 0, 0)",
opacity: 0
}, {
transform: "translate3d(0, 0, 0)",
opacity: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var fadeInUp = {
keyframes: [{
transform: "translate3d(0, 100%, 0)",
opacity: 0
}, {
transform: "translate3d(0, 0, 0)",
opacity: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var fadeInUpBig = {
keyframes: [{
transform: "translate3d(0, 2000px, 0)",
opacity: 0
}, {
transform: "translate3d(0, 0, 0)",
opacity: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var fadeInTopLeft = {
keyframes: [{
transform: "translate3d(-100%, -100%, 0)",
opacity: 0
}, {
transform: "translate3d(0, 0, 0)",
opacity: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var fadeInTopRight = {
keyframes: [{
transform: "translate3d(100%, -100%, 0)",
opacity: 0
}, {
transform: "translate3d(0, 0, 0)",
opacity: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var fadeInBottomLeft = {
keyframes: [{
transform: "translate3d(-100%, 100%, 0)",
opacity: 0
}, {
transform: "translate3d(0, 0, 0)",
opacity: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var fadeInBottomRight = {
keyframes: [{
transform: "translate3d(100%, 100%, 0)",
opacity: 0
}, {
transform: "translate3d(0, 0, 0)",
opacity: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var fadeOut = {
keyframes: [{
opacity: 1
}, {
opacity: 0
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var fadeOutDown = {
keyframes: [{
transform: "translate3d(0, 0, 0)",
opacity: 1
}, {
transform: "translate3d(0, 100%, 0)",
opacity: 0
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var fadeOutDownBig = {
keyframes: [{
transform: "translate3d(0, 0, 0)",
opacity: 1
}, {
transform: "translate3d(0, 2000px, 0)",
opacity: 0
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var fadeOutLeft = {
keyframes: [{
transform: "translate3d(0, 0, 0)",
opacity: 1
}, {
transform: "translate3d(-100%, 0, 0)",
opacity: 0
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var fadeOutLeftBig = {
keyframes: [{
transform: "translate3d(0, 0, 0)",
opacity: 1
}, {
transform: "translate3d(-2000px, 0, 0)",
opacity: 0
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var fadeOutRight = {
keyframes: [{
transform: "translate3d(0, 0, 0)",
opacity: 1
}, {
transform: "translate3d(100%, 0, 0)",
opacity: 0
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var fadeOutRightBig = {
keyframes: [{
transform: "translate3d(0, 0, 0)",
opacity: 1
}, {
transform: "translate3d(2000px, 0, 0)",
opacity: 0
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var fadeOutUp = {
keyframes: [{
transform: "translate3d(0, 0, 0)",
opacity: 1
}, {
transform: "translate3d(0, -100%, 0)",
opacity: 0
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var fadeOutUpBig = {
keyframes: [{
transform: "translate3d(0, 0, 0)",
opacity: 1
}, {
transform: "translate3d(0, -2000px, 0)",
opacity: 0
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var fadeOutTopLeft = {
keyframes: [{
transform: "translate3d(0, 0, 0)",
opacity: 1
}, {
transform: "translate3d(-100%, -100%, 0)",
opacity: 0
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var fadeOutTopRight = {
keyframes: [{
transform: "translate3d(0, 0, 0)",
opacity: 1
}, {
transform: "translate3d(100%, -100%, 0)",
opacity: 0
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var fadeOutBottomLeft = {
keyframes: [{
transform: "translate3d(0, 0, 0)",
opacity: 1
}, {
transform: "translate3d(-100%, 100%, 0)",
opacity: 0
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var fadeOutBottomRight = {
keyframes: [{
transform: "translate3d(0, 0, 0)",
opacity: 1
}, {
transform: "translate3d(100%, 100%, 0)",
opacity: 0
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var flip = {
keyframes: [{
transform: "perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg)",
backfaceVisibility: "visible",
easing: "ease-out",
offset: 0
}, {
transform: "perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg)",
easing: "ease-out",
offset: 0.4
}, {
transform: "perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg)",
easing: "ease-in",
offset: 0.5
}, {
transform: "perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg)",
easing: "ease-in",
offset: 0.8
}, {
transform: "perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg)",
backfaceVisibility: "visible",
easing: "ease-in",
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var flipInX = {
keyframes: [{
transform: "perspective(400px) rotate3d(1, 0, 0, 90deg)",
opacity: 0,
backfaceVisibility: "visible !important",
easing: "ease-in",
offset: 0
}, {
transform: "perspective(400px) rotate3d(1, 0, 0, -20deg)",
easing: "ease-in",
offset: 0.4
}, {
transform: "perspective(400px) rotate3d(1, 0, 0, 10deg)",
opacity: 1,
offset: 0.6
}, {
transform: "perspective(400px) rotate3d(1, 0, 0, -5deg)",
offset: 0.8
}, {
transform: "perspective(400px)",
opacity: 1,
backfaceVisibility: "visible !important",
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var flipInY = {
keyframes: [{
transform: "perspective(400px) rotate3d(0, 1, 0, 90deg)",
opacity: 0,
backfaceVisibility: "visible !important",
easing: "ease-in",
offset: 0
}, {
transform: "perspective(400px) rotate3d(0, 1, 0, -20deg)",
easing: "ease-in",
offset: 0.4
}, {
transform: "perspective(400px) rotate3d(0, 1, 0, 10deg)",
opacity: 1,
offset: 0.6
}, {
transform: "perspective(400px) rotate3d(0, 1, 0, -5deg)",
offset: 0.8
}, {
transform: "perspective(400px)",
opacity: 1,
backfaceVisibility: "visible !important",
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var flipOutX = {
keyframes: [{
transform: "perspective(400px)",
opacity: 1,
backfaceVisibility: "visible !important",
offset: 0
}, {
transform: "perspective(400px) rotate3d(1, 0, 0, -20deg)",
opacity: 1,
offset: 0.3
}, {
transform: "perspective(400px) rotate3d(1, 0, 0, 90deg)",
opacity: 0,
backfaceVisibility: "visible !important",
offset: 1
}],
animationOptions: {
duration: 750,
fill: "both"
}
};
var flipOutY = {
keyframes: [{
transform: "perspective(400px)",
opacity: 1,
backfaceVisibility: "visible !important",
offset: 0
}, {
transform: "perspective(400px) rotate3d(0, 1, 0, -15deg)",
opacity: 1,
offset: 0.3
}, {
transform: "perspective(400px) rotate3d(0, 1, 0, 90deg)",
opacity: 0,
backfaceVisibility: "visible !important",
offset: 1
}],
animationOptions: {
duration: 750,
fill: "both"
}
};
var lightSpeedInRight = {
keyframes: [{
transform: "translate3d(100%, 0, 0) skewX(-30deg)",
opacity: 0,
offset: 0
}, {
transform: "skewX(20deg)",
opacity: 1,
offset: 0.6
}, {
transform: "skewX(-5deg)",
offset: 0.8
}, {
transform: "translate3d(0, 0, 0)",
opacity: 1,
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both",
easing: "ease-out"
}
};
var lightSpeedInLeft = {
keyframes: [{
transform: "translate3d(-100%, 0, 0) skewX(30deg)",
opacity: 0,
offset: 0
}, {
transform: "skewX(-20deg)",
opacity: 1,
offset: 0.6
}, {
transform: "skewX(5deg)",
offset: 0.8
}, {
transform: "translate3d(0, 0, 0)",
opacity: 1,
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both",
easing: "ease-out"
}
};
var lightSpeedOutRight = {
keyframes: [{
transform: "none",
opacity: 1
}, {
transform: "translate3d(100%, 0, 0) skewX(30deg)",
opacity: 0
}],
animationOptions: {
duration: 1000,
fill: "both",
easing: "ease-in"
}
};
var lightSpeedOutLeft = {
keyframes: [{
transform: "none",
opacity: 1
}, {
transform: "translate3d(-100%, 0, 0) skewX(-30deg)",
opacity: 0
}],
animationOptions: {
duration: 1000,
fill: "both",
easing: "ease-in"
}
};
var transformOrigin$f = "center";
var rotateIn = {
keyframes: [{
transform: "rotate3d(0, 0, 1, -200deg)",
opacity: 0,
transformOrigin: transformOrigin$f
}, {
transform: "translate3d(0, 0, 0)",
opacity: 1,
transformOrigin: transformOrigin$f
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var transformOrigin$e = "left bottom";
var rotateInDownLeft = {
keyframes: [{
transform: "rotate3d(0, 0, 1, -45deg)",
opacity: 0,
transformOrigin: transformOrigin$e
}, {
transform: "translate3d(0, 0, 0)",
opacity: 1,
transformOrigin: transformOrigin$e
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var transformOrigin$d = "right bottom";
var rotateInDownRight = {
keyframes: [{
transform: "rotate3d(0, 0, 1, 45deg)",
opacity: 0,
transformOrigin: transformOrigin$d
}, {
transform: "translate3d(0, 0, 0)",
opacity: 1,
transformOrigin: transformOrigin$d
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var transformOrigin$c = "left bottom";
var rotateInUpLeft = {
keyframes: [{
transform: "rotate3d(0, 0, 1, 45deg)",
opacity: 0,
transformOrigin: transformOrigin$c
}, {
transform: "translate3d(0, 0, 0)",
opacity: 1,
transformOrigin: transformOrigin$c
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var transformOrigin$b = "right bottom";
var rotateInUpRight = {
keyframes: [{
transform: "rotate3d(0, 0, 1, -90deg)",
opacity: 0,
transformOrigin: transformOrigin$b
}, {
transform: "translate3d(0, 0, 0)",
opacity: 1,
transformOrigin: transformOrigin$b
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var transformOrigin$a = "center";
var rotateOut = {
keyframes: [{
transform: "none",
opacity: 1,
transformOrigin: transformOrigin$a
}, {
transform: "rotate3d(0, 0, 1, 200deg)",
opacity: 0,
transformOrigin: transformOrigin$a
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var transformOrigin$9 = "left bottom";
var rotateOutDownLeft = {
keyframes: [{
transform: "none",
opacity: 1,
transformOrigin: transformOrigin$9
}, {
transform: "rotate3d(0, 0, 1, 45deg)",
opacity: 0,
transformOrigin: transformOrigin$9
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var transformOrigin$8 = "right bottom";
var rotateOutDownRight = {
keyframes: [{
transform: "none",
opacity: 1,
transformOrigin: transformOrigin$8
}, {
transform: "rotate3d(0, 0, 1, -45deg)",
opacity: 0,
transformOrigin: transformOrigin$8
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var transformOrigin$7 = "left bottom";
var rotateOutUpLeft = {
keyframes: [{
transform: "none",
opacity: 1,
transformOrigin: transformOrigin$7
}, {
transform: "rotate3d(0, 0, 1, -45deg)",
opacity: 0,
transformOrigin: transformOrigin$7
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var transformOrigin$6 = "right bottom";
var rotateOutUpRight = {
keyframes: [{
transform: "none",
opacity: 1,
transformOrigin: transformOrigin$6
}, {
transform: "rotate3d(0, 0, 1, 90deg)",
opacity: 0,
transformOrigin: transformOrigin$6
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var easing = "ease-in-out";
var transformOrigin$5 = "top left";
var frame1 = {
transform: "rotate3d(0, 0, 1, 80deg)",
easing: easing,
transformOrigin: transformOrigin$5
};
var frame2 = {
transform: "rotate3d(0, 0, 1, 60deg)",
opacity: 1,
easing: easing,
transformOrigin: transformOrigin$5
};
var hinge = {
keyframes: [{
transform: "translate3d(0, 0, 0)",
opacity: 1,
easing: easing,
transformOrigin: transformOrigin$5,
offset: 0
}, _extends({}, frame1, {
offset: 0.2
}), _extends({}, frame2, {
offset: 0.4
}), _extends({}, frame1, {
offset: 0.6
}), _extends({}, frame2, {
offset: 0.8
}), {
transform: "translate3d(0, 700px, 0)",
opacity: 0,
transformOrigin: transformOrigin$5,
offset: 1
}],
animationOptions: {
duration: 2000,
fill: "both"
}
};
var transformOrigin$4 = "center bottom";
var jackInTheBox = {
keyframes: [{
transform: "scale(0.1) rotate(30deg)",
opacity: 0,
transformOrigin: transformOrigin$4,
offset: 0
}, {
transform: "rotate(-10deg)",
transformOrigin: transformOrigin$4,
offset: 0.5
}, {
transform: "rotate(3deg)",
transformOrigin: transformOrigin$4,
offset: 0.7
}, {
transform: "scale(1)",
opacity: 1,
transformOrigin: transformOrigin$4,
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var rollIn = {
keyframes: [{
transform: "translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)",
opacity: 0
}, {
transform: "translate3d(0, 0, 0)",
opacity: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var rollOut = {
keyframes: [{
transform: "none",
opacity: 1
}, {
transform: "translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)",
opacity: 0
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var frame = {
transform: "none",
opacity: 1
};
var zoomIn = {
keyframes: [{
transform: "scale3d(0.3, 0.3, 0.3)",
opacity: 0,
offset: 0
}, _extends({}, frame, {
offset: 0.5
}), _extends({}, frame, {
offset: 1
})],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var zoomInDown = {
keyframes: [{
transform: "scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0)",
opacity: 0,
easing: "cubic-bezier(0.55, 0.055, 0.675, 0.19)",
offset: 0
}, {
transform: "scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0)",
opacity: 1,
easing: "cubic-bezier(0.175, 0.885, 0.32, 1)",
offset: 0.6
}, {
transform: "none",
opacity: 1,
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var zoomInLeft = {
keyframes: [{
transform: "scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0)",
opacity: 0,
easing: "cubic-bezier(0.55, 0.055, 0.675, 0.19)",
offset: 0
}, {
transform: "scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0)",
opacity: 1,
easing: "cubic-bezier(0.175, 0.885, 0.32, 1)",
offset: 0.6
}, {
transform: "none",
opacity: 1,
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var zoomInRight = {
keyframes: [{
transform: "scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0)",
opacity: 0,
easing: "cubic-bezier(0.55, 0.055, 0.675, 0.19)",
offset: 0
}, {
transform: "scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0)",
opacity: 1,
easing: "cubic-bezier(0.175, 0.885, 0.32, 1)",
offset: 0.6
}, {
transform: "none",
opacity: 1,
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var zoomInUp = {
keyframes: [{
transform: "scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0)",
opacity: 0,
easing: "cubic-bezier(0.55, 0.055, 0.675, 0.19)",
offset: 0
}, {
transform: "scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0)",
opacity: 1,
easing: "cubic-bezier(0.175, 0.885, 0.32, 1)",
offset: 0.6
}, {
transform: "none",
opacity: 1,
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var zoomOut = {
keyframes: [{
transform: "none",
opacity: 1,
offset: 0
}, {
transform: "scale3d(0.3, 0.3, 0.3)",
opacity: 0,
offset: 0.5
}, {
transform: "none",
opacity: 0,
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var transformOrigin$3 = "center bottom";
var zoomOutDown = {
keyframes: [{
transform: "none",
opacity: 1,
transformOrigin: transformOrigin$3,
offset: 0
}, {
transform: "scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0)",
opacity: 1,
easing: "cubic-bezier(0.55, 0.055, 0.675, 0.19)",
transformOrigin: transformOrigin$3,
offset: 0.4
}, {
transform: "scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0)",
opacity: 0,
easing: "cubic-bezier(0.175, 0.885, 0.32, 1)",
transformOrigin: transformOrigin$3,
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var transformOrigin$2 = "left center";
var zoomOutLeft = {
keyframes: [{
transform: "none",
opacity: 1,
transformOrigin: transformOrigin$2,
offset: 0
}, {
transform: "scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0)",
opacity: 1,
transformOrigin: transformOrigin$2,
offset: 0.4
}, {
transform: "scale(0.1) translate3d(-2000px, 0, 0)",
opacity: 0,
transformOrigin: transformOrigin$2,
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var transformOrigin$1 = "right center";
var zoomOutRight = {
keyframes: [{
transform: "none",
opacity: 1,
transformOrigin: transformOrigin$1,
offset: 0
}, {
transform: "scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0)",
opacity: 1,
transformOrigin: transformOrigin$1,
offset: 0.4
}, {
transform: "scale(0.1) translate3d(2000px, 0, 0)",
opacity: 0,
transformOrigin: transformOrigin$1,
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var transformOrigin = "center bottom";
var zoomOutUp = {
keyframes: [{
transform: "none",
opacity: 1,
transformOrigin: transformOrigin,
offset: 0
}, {
transform: "scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0)",
opacity: 1,
easing: "cubic-bezier(0.55, 0.055, 0.675, 0.19)",
transformOrigin: transformOrigin,
offset: 0.4
}, {
transform: "scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0)",
opacity: 0,
easing: "cubic-bezier(0.175, 0.885, 0.32, 1)",
transformOrigin: transformOrigin,
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var slideInDown = {
keyframes: [{
transform: "translate3d(0, -100%, 0)",
visibility: "visible",
offset: 0
}, {
transform: "translate3d(0, 0, 0)",
visibility: "visible",
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var slideInLeft = {
keyframes: [{
transform: "translate3d(-100%, 0, 0)",
visibility: "visible",
offset: 0
}, {
transform: "translate3d(0, 0, 0)",
visibility: "visible",
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var slideInRight = {
keyframes: [{
transform: "translate3d(100%, 0, 0)",
visibility: "visible",
offset: 0
}, {
transform: "translate3d(0, 0, 0)",
visibility: "visible",
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var slideInUp = {
keyframes: [{
transform: "translate3d(0, 100%, 0)",
visibility: "visible",
offset: 0
}, {
transform: "translate3d(0, 0, 0)",
visibility: "visible",
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var slideOutDown = {
keyframes: [{
transform: "translate3d(0, 0, 0)",
visibility: "visible",
offset: 0
}, {
transform: "translate3d(0, 100%, 0)",
visibility: "hidden",
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var slideOutLeft = {
keyframes: [{
transform: "translate3d(0, 0, 0)",
visibility: "visible",
offset: 0
}, {
transform: "translate3d(-100%, 0, 0)",
visibility: "hidden",
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var slideOutRight = {
keyframes: [{
transform: "translate3d(0, 0, 0)",
visibility: "visible",
offset: 0
}, {
transform: "translate3d(100%, 0, 0)",
visibility: "hidden",
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
var slideOutUp = {
keyframes: [{
transform: "translate3d(0, 0, 0)",
visibility: "visible",
offset: 0
}, {
transform: "translate3d(0, -100%, 0)",
visibility: "hidden",
offset: 1
}],
animationOptions: {
duration: 1000,
fill: "both"
}
};
export default useWebAnimations;
export { backInDown, backInLeft, backInRight, backInUp, backOutDown, backOutLeft, backOutRight, backOutUp, bounce, bounceIn, bounceInDown, bounceInLeft, bounceInRight, bounceInUp, bounceOut, bounceOutDown, bounceOutLeft, bounceOutRight, bounceOutUp, fadeIn, fadeInBottomLeft, fadeInBottomRight, fadeInDown, fadeInDownBig, fadeInLeft, fadeInLeftBig, fadeInRight, fadeInRightBig, fadeInTopLeft, fadeInTopRight, fadeInUp, fadeInUpBig, fadeOut, fadeOutBottomLeft, fadeOutBottomRight, fadeOutDown, fadeOutDownBig, fadeOutLeft, fadeOutLeftBig, fadeOutRight, fadeOutRightBig, fadeOutTopLeft, fadeOutTopRight, fadeOutUp, fadeOutUpBig, flash, flip, flipInX, flipInY, flipOutX, flipOutY, headShake, heartBeat, hinge, jackInTheBox, jello, lightSpeedInLeft, lightSpeedInRight, lightSpeedOutLeft, lightSpeedOutRight, pulse, rollIn, rollOut, rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight, rotateOut, rotateOutDownLeft, rotateOutDownRight, rotateOutUpLeft, rotateOutUpRight, rubberBand, shakeX, shakeY, slideInDown, slideInLeft, slideInRight, slideInUp, slideOutDown, slideOutLeft, slideOutRight, slideOutUp, swing, tada, wobble, zoomIn, zoomInDown, zoomInLeft, zoomInRight, zoomInUp, zoomOut, zoomOutDown, zoomOutLeft, zoomOutRight, zoomOutUp };