react-swift-reveal/dist/index.mjs

The easiest way to add reveal animations to your React applications as the elements enter viewport. it includes Both on scroll and simple reveal animations.

import React, { useState, useRef, useCallback, useEffect } from 'react';

// src/lib/defaultConfigs.ts
var namespace = "react-swiftreveal";
var defaults = { duration: 1e3, delay: 0, count: 1 };
var ssr = true;
var observerMode = false;
var disableSsr = () => {
  ssr = false;
};
var globalHide = false;
var collapseend;
var counter = 1;
var effectMap = {};
var sheet = null;
var name = `${namespace}-${Math.floor(Math.random() * 1e15)}-`;
var insertRule = (rule13) => {
  try {
    return sheet == null ? void 0 : sheet.insertRule(rule13, sheet.cssRules.length);
  } catch (e) {
    console.warn("react-swiftreveal - animation failed");
  }
};
var cascade = (i, start, end, duration, total) => {
  const minv = Math.log(duration);
  const maxv = Math.log(total);
  const scale = (maxv - minv) / (end - start);
  return Math.exp(minv + scale * (i - start));
};
var animation = (effect) => {
  if (!sheet)
    return "";
  const rule13 = `@keyframes ${name + counter}{${effect}}`;
  const effectId = effectMap[effect];
  if (!effectId) {
    insertRule(rule13);
    effectMap[effect] = counter;
    return `${name}${counter++}`;
  }
  return `${name}${effectId}`;
};
var hideAll = () => {
  if (globalHide)
    return;
  globalHide = true;
  window.removeEventListener("scroll", hideAll, true);
  insertRule(`.${namespace} { opacity: 0; }`);
  window.removeEventListener("orientationchange", hideAll, true);
  window.document.removeEventListener("visibilitychange", hideAll);
};
if (typeof window !== "undefined" && window.name !== "nodejs" && window.document && typeof navigator !== "undefined") {
  observerMode = "IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype && /\{\s*\[native code\]\s*\}/.test(`${IntersectionObserver}`);
  ssr = window.document.querySelectorAll("div[data-reactroot]").length > 0;
  if (navigator.appVersion.includes("MSIE 10"))
    ;
  if (ssr && "performance" in window && "timing" in window.performance && "domContentLoadedEventEnd" in window.performance.timing && window.performance.timing.domLoading && Date.now() - window.performance.timing.domLoading < 300)
    ssr = false;
  if (ssr)
    window.setTimeout(disableSsr, 1500);
  if (!observerMode) {
    collapseend = document.createEvent("Event");
    collapseend.initEvent("collapseend", true, true);
  }
  const element = document.createElement("style");
  document.head.appendChild(element);
  if (element.sheet && element.sheet.cssRules) {
    sheet = element.sheet;
    window.addEventListener("scroll", hideAll, true);
    window.addEventListener("orientationchange", hideAll, true);
    window.document.addEventListener("visibilitychange", hideAll);
  }
}

// src/lib/Base.tsx
var TransitionGroupContext = React.createContext(null);
var defaultProps = {
  fraction: 0.2,
  refProp: "ref"
};
var RevealBase = (props) => {
  const {
    when,
    refProp = defaultProps.refProp,
    fraction = defaultProps.fraction,
    children,
    inEffect,
    outEffect,
    ssrReveal,
    collapse,
    collapseEl,
    cascade: cascadeProp,
    disabled,
    onReveal,
    unmountOnExit,
    mountOnEnter,
    ...rest
  } = { ...defaultProps, ...props };
  const isOn = when !== void 0 ? !!when : true;
  const parentGroup = React.useContext(TransitionGroupContext);
  const getInitialCollapseStyle = (props2) => ({
    height: 0,
    visibility: props2.when ? void 0 : "hidden"
  });
  const [state, setState] = useState({
    collapse: collapse ? getInitialCollapseStyle(props) : void 0,
    style: {
      opacity: (!isOn || ssrReveal) && outEffect ? 0 : void 0
    }
  });
  const el = useRef(null);
  const isShownRef = useRef(false);
  const savedChildRef = useRef(false);
  const childRef = useRef(null);
  const observerRef = useRef(null);
  const animationEndTimeoutRef = useRef(void 0);
  const onRevealTimeoutRef = useRef(void 0);
  const isListenerRef = useRef(false);
  const getDimensionValue = () => {
    if (!el.current)
      return 0;
    return el.current.offsetHeight + Number.parseInt(window.getComputedStyle(el.current).getPropertyValue("margin-top"), 10) + Number.parseInt(window.getComputedStyle(el.current).getPropertyValue("margin-bottom"), 10);
  };
  const inViewport = useCallback(() => {
    if (!el.current || window.document.hidden)
      return false;
    const h = el.current.offsetHeight;
    const delta = window.pageYOffset - getTop(el.current);
    const tail = Math.min(h, window.innerHeight) * (globalHide ? fraction : 0);
    return delta > tail - window.innerHeight && delta < h - tail;
  }, [fraction]);
  const getTop = (el2) => {
    while (el2.offsetTop === void 0)
      el2 = el2.parentNode;
    let top = el2.offsetTop;
    for (; el2.offsetParent; top += el2.offsetTop)
      el2 = el2.offsetParent;
    return top;
  };
  const resize = useCallback(() => {
    if (!el.current || !isOn)
      return;
    if (inViewport()) {
      unlisten();
      isShownRef.current = isOn;
      setState({
        hasExited: !isOn,
        hasAppeared: true,
        collapse: void 0,
        style: { opacity: isOn || !outEffect ? 1 : 0 }
      });
      onReveal && onReveal();
    }
  }, [isOn, outEffect, onReveal]);
  const handleObserve = useCallback(([entry]) => {
    var _a;
    if (entry.intersectionRatio > 0) {
      (_a = observerRef.current) == null ? void 0 : _a.disconnect();
      observerRef.current = null;
      reveal(true);
    }
  }, []);
  const observe = useCallback((props2, update = false) => {
    if (!el.current)
      return;
    if (observerMode) {
      if (observerRef.current) {
        if (update)
          observerRef.current.disconnect();
        else return;
      } else if (update) {
        return;
      }
      observerRef.current = new IntersectionObserver(handleObserve, { threshold: props2.fraction });
      observerRef.current.observe(el.current);
    }
  }, [handleObserve]);
  const reveal = useCallback((_event) => {
    const inView = typeof _event === "boolean" ? _event : false;
    if (!globalHide)
      hideAll();
    if (!el.current)
      return;
    if (ssr)
      disableSsr();
    if (isOn && isShownRef.current && props.spy !== void 0) {
      isShownRef.current = false;
      setState({ style: {} });
      setTimeout(() => reveal(false), 200);
    } else if (inView || inViewport() || props.force) {
      animate();
    } else {
      observerMode ? observe(props) : listen();
    }
  }, [isOn, props, inViewport, observe]);
  const listen = useCallback(() => {
    if (!observerMode && !isListenerRef.current) {
      isListenerRef.current = true;
      window.addEventListener("scroll", () => reveal(false), { passive: true });
      window.addEventListener("orientationchange", () => reveal(false), { passive: true });
      window.document.addEventListener("visibilitychange", () => reveal(false), { passive: true });
      window.document.addEventListener("collapseend", (_event) => reveal(false), { passive: true });
      window.addEventListener("resize", resize, { passive: true });
    }
  }, [reveal, resize]);
  const unlisten = () => {
    if (!observerMode && isListenerRef.current) {
      window.removeEventListener("scroll", reveal, { passive: true });
      window.removeEventListener("orientationchange", reveal, { passive: true });
      window.document.removeEventListener("visibilitychange", reveal, { passive: true });
      window.document.removeEventListener("collapseend", reveal, { capture: false });
      window.removeEventListener("resize", resize, { passive: true });
      isListenerRef.current = false;
    }
    if (onRevealTimeoutRef.current)
      window.clearTimeout(onRevealTimeoutRef.current);
    if (animationEndTimeoutRef.current)
      window.clearTimeout(animationEndTimeoutRef.current);
  };
  const animate = useCallback(() => {
    if (!el.current)
      return;
    unlisten();
    if (isShownRef.current === isOn)
      return;
    isShownRef.current = isOn;
    const leaving = !isOn && outEffect;
    const effect = props[leaving ? "outEffect" : "inEffect"];
    let animationName = "style" in effect && effect.style.animationName || void 0;
    let newState;
    if (!props.collapseOnly) {
      if ((outEffect || isOn) && effect.make)
        animationName = effect.make(!isOn, props);
      newState = {
        hasAppeared: true,
        hasExited: false,
        collapse: void 0,
        style: {
          ...effect.style,
          animationDuration: `${effect.duration}ms`,
          animationDelay: `${effect.delay}ms`,
          animationIterationCount: effect.forever ? "infinite" : effect.count,
          opacity: 1,
          animationName
        },
        className: effect.className
      };
    } else {
      newState = { hasAppeared: true, hasExited: false, style: { opacity: 1 } };
    }
    setState(
      (prevState) => props.collapse ? getCollapsedState({ ...prevState, ...newState }, props, effect) : { ...prevState, ...newState }
    );
    if (leaving) {
      savedChildRef.current = React.cloneElement(getChild());
      animationEnd(invisible, props.cascade, effect);
    } else {
      savedChildRef.current = false;
    }
    onReveal && isOn && (props.wait ? onRevealTimeoutRef.current = window.setTimeout(onReveal, props.wait) : onReveal());
  }, [isOn, props, outEffect]);
  const invisible = () => {
    if (!el.current)
      return;
    savedChildRef.current = false;
    if (!isShownRef.current) {
      setState({
        hasExited: true,
        collapse: collapse ? { ...state.collapse, visibility: "hidden" } : void 0,
        style: { opacity: 0 }
      });
      if (!observerMode && collapse)
        window.document.dispatchEvent(new Event(String(collapseend)));
    }
  };
  const animationEnd = (callback, cascade2, effect) => {
    if (effect.forever)
      return;
    const handler = () => {
      if (!el.current)
        return;
      animationEndTimeoutRef.current = void 0;
      callback();
    };
    animationEndTimeoutRef.current = window.setTimeout(
      handler,
      effect.delay + (effect.duration + (cascade2 ? effect.duration : 0)) * effect.count
    );
  };
  const getCollapsedState = (state2, props2, inOut) => {
    const total = inOut.duration + (props2.cascade ? inOut.duration : 0);
    const height = isOn ? getDimensionValue() : 0;
    let duration, delay;
    if (props2.collapseOnly) {
      duration = inOut.duration / 3;
      delay = inOut.delay;
    } else {
      const delta1 = total >> 2;
      const delta2 = delta1 >> 1;
      duration = delta1;
      delay = inOut.delay + (isOn ? 0 : total - delta1 - delta2);
      state2.style.animationDuration = `${total - delta1 + (isOn ? delta2 : -delta2)}ms`;
      state2.style.animationDelay = `${inOut.delay + (isOn ? delta1 - delta2 : 0)}ms`;
    }
    state2.collapse = {
      height,
      transition: `height ${duration}ms ease ${delay}ms`,
      overflow: props2.collapseOnly ? "hidden" : void 0
    };
    return state2;
  };
  const getChild = () => {
    if (savedChildRef.current && !disabled)
      return savedChildRef.current;
    if (typeof children === "object") {
      const child2 = React.Children.only(children);
      return "type" in child2 && typeof child2.type === "string" || refProp !== "ref" ? child2 : /* @__PURE__ */ React.createElement("div", null, child2);
    }
    return /* @__PURE__ */ React.createElement("div", null, children);
  };
  const cascadeChildren = (children2) => {
    let newChildren2;
    if (typeof children2 === "string") {
      newChildren2 = children2.split("").map((ch, index) => /* @__PURE__ */ React.createElement("span", { key: index, style: { display: "inline-block", whiteSpace: "pre" } }, ch));
    } else {
      newChildren2 = React.Children.toArray(children2);
    }
    const { duration, reverse } = props[isOn || !outEffect ? "inEffect" : "outEffect"];
    const count = newChildren2.length;
    const total = duration * 2;
    let i = reverse ? count : 0;
    return newChildren2.map(
      (child2) => typeof child2 === "object" && child2 ? React.cloneElement(child2, {
        style: {
          ...child2.props.style,
          ...state.style,
          animationDuration: `${Math.round(cascade(reverse ? i-- : i++, 0, count, duration, total))}ms`
        }
      }) : child2
    );
  };
  const saveRef = useCallback((node) => {
    if (childRef.current)
      childRef.current(node);
    if (props.innerRef)
      props.innerRef(node);
    if (el.current !== node) {
      el.current = node && "offsetHeight" in node ? node : null;
      observe(props, true);
    }
  }, [props, observe]);
  useEffect(() => {
    var _a, _b;
    if (!el.current || disabled)
      return;
    if (!props.collapseOnly) {
      if ("make" in inEffect)
        (_a = inEffect.make) == null ? void 0 : _a.call(inEffect, false, props);
      if (when !== void 0 && outEffect && "make" in outEffect)
        (_b = outEffect.make) == null ? void 0 : _b.call(outEffect, true, props);
    }
    const appear = parentGroup && !parentGroup.isMounting ? !("enter" in props && props.enter === false) : props.appear;
    if (isOn && ((when !== void 0 || props.spy !== void 0) && !appear) || ssr && true && !props.ssrFadeout && outEffect && !ssrReveal && getTop(el.current) < window.pageYOffset + window.innerHeight) {
      isShownRef.current = true;
      setState({
        hasAppeared: true,
        collapse: collapse ? { height: getDimensionValue() } : state.collapse,
        style: { opacity: 1 }
      });
      onReveal && onReveal();
    } else if (ssr && (props.ssrFadeout) && outEffect && getTop(el.current) < window.pageYOffset + window.innerHeight) {
      setState({ style: { opacity: 0, transition: "opacity 1000ms 1000ms" } });
      setTimeout(() => reveal(true), 2e3);
    } else if (isOn) {
      props.force ? animate() : reveal();
    }
    return () => {
      unlisten();
      ssr && disableSsr();
    };
  }, []);
  useEffect(() => {
    if (when !== void 0)
      isShownRef.current = !!when;
    if (fraction !== props.fraction)
      observe(props, true);
    if (!isOn && props.onExited && "exit" in props && props.exit === false) {
      props.onExited();
      return;
    }
    if (disabled)
      return;
    if (props.collapse && !collapse) {
      setState({
        style: {},
        collapse: getInitialCollapseStyle(props)
      });
      isShownRef.current = false;
    }
    if (when !== props.when || props.spy !== void 0)
      reveal();
    if (onRevealTimeoutRef.current && !isOn) {
      window.clearTimeout(onRevealTimeoutRef.current);
      onRevealTimeoutRef.current = void 0;
    }
  }, [when, fraction, props, isOn, disabled, collapse, reveal]);
  let mount = true;
  if (when === false) {
    mount = false;
  } else {
    if (!state.hasAppeared)
      mount = !mountOnEnter || isOn;
    else
      mount = !unmountOnExit || !state.hasExited || isOn;
  }
  const child = getChild();
  if (React.isValidElement(child) && typeof child.ref === "function")
    childRef.current = child.ref;
  const newChildren = cascadeProp && !disabled && child.props.children && state.style.animationName ? cascadeChildren(child.props.children) : child.props.children;
  const newStyle = disabled ? child.props.style : { ...child.props.style, ...state.style };
  const newClass = disabled ? child.props.className : `${outEffect ? namespace : ""}${state.className ? ` ${state.className}` : ""}${child.props.className ? ` ${child.props.className}` : ""}`;
  const newProps = {
    ...rest.props,
    className: newClass || void 0,
    style: newStyle,
    [refProp]: saveRef
  };
  const element = React.cloneElement(child, newProps, mount ? newChildren : void 0);
  return collapse !== void 0 ? collapseEl ? React.cloneElement(collapseEl, {
    style: { ...collapseEl.props.style, ...disabled ? void 0 : state.collapse },
    children: element
  }) : /* @__PURE__ */ React.createElement("div", { style: disabled ? void 0 : state.collapse, children: element }) : element;
};
var Base_default = RevealBase;

// src/HOC/wrapper.tsx
function wrapper(props, inEffect, outEffect, children) {
  if (React.Children.count(children) < 2)
    return /* @__PURE__ */ React.createElement(Base_default, { ...props, inEffect, outEffect, children });
  children = React.Children.map(
    children,
    (child) => /* @__PURE__ */ React.createElement(Base_default, { ...props, inEffect, outEffect, children: child })
  );
  return "Fragment" in React ? /* @__PURE__ */ React.createElement(React.Fragment, null, children) : /* @__PURE__ */ React.createElement("span", null, children);
}

// src/animations/simple/Jump.ts
var rule = `
 from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    transform: translate3d(0, -4px, 0);
}
`;
var name2;
function make() {
  return name2 || (name2 = animation(rule));
}
function Jump({
  children,
  // eslint-disable-next-line unused-imports/no-unused-vars
  out,
  timeout,
  duration = defaults.duration,
  delay = defaults.delay,
  count = defaults.count,
  forever,
  ...props
} = defaults) {
  const effect = { make, duration: timeout === void 0 ? duration : timeout, delay, forever, count, style: { animationFillMode: "both" } };
  return wrapper(props, effect, false, children);
}
var Jump_default = Jump;

// src/animations/simple/Pop.ts
var rule2 = `
  from {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  to {
    transform: scale(1);
  }
`;
var name3;
function make2() {
  return name3 || (name3 = animation(rule2));
}
function Pop({
  children,
  // eslint-disable-next-line unused-imports/no-unused-vars
  out,
  timeout,
  duration = defaults.duration,
  delay = defaults.delay,
  count = defaults.count,
  forever,
  ...props
} = defaults) {
  const effect = { make: make2, duration: timeout === void 0 ? duration : timeout, delay, forever, count, style: { animationFillMode: "both" } };
  return wrapper(props, effect, false, children);
}

// src/animations/simple/Jello.ts
var rule3 = `
  from, 11.1%, to {
    transform: none;
  }

  22.2% {
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
`;
var name4;
function make3() {
  return name4 || (name4 = animation(rule3));
}
function Jello({
  children,
  // eslint-disable-next-line unused-imports/no-unused-vars
  out,
  timeout,
  duration = defaults.duration,
  delay = defaults.delay,
  count = defaults.count,
  forever,
  ...props
} = defaults) {
  const effect = { make: make3, duration: timeout === void 0 ? duration : timeout, delay, forever, count, style: { animationFillMode: "both" } };
  return wrapper(props, effect, false, children);
}

// src/animations/simple/Flash.ts
var rule4 = `
from, 50%, to {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
}
`;
var name5;
function make4() {
  return name5 || (name5 = animation(rule4));
}
function Flash({
  children,
  // eslint-disable-next-line unused-imports/no-unused-vars
  out,
  timeout,
  duration = defaults.duration,
  delay = defaults.delay,
  count = defaults.count,
  forever,
  ...props
} = defaults) {
  const effect = { make: make4, duration: timeout === void 0 ? duration : timeout, delay, forever, count, style: { animationFillMode: "both" } };
  return wrapper(props, effect, false, children);
}

// src/animations/simple/HeadShake.ts
var rule5 = `
  0% {
    transform: translateX(0);
  }

  6.5% {
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    transform: translateX(0);
}
`;
var name6;
function make5() {
  return name6 || (name6 = animation(rule5));
}
function HeadShake({
  children,
  // eslint-disable-next-line unused-imports/no-unused-vars
  out,
  timeout,
  duration = defaults.duration,
  delay = defaults.delay,
  count = defaults.count,
  forever,
  ...props
} = defaults) {
  const effect = { make: make5, duration: timeout === void 0 ? duration : timeout, delay, forever, count, style: { animationFillMode: "both" } };
  return wrapper(props, effect, false, children);
}

// src/animations/simple/Pulse.ts
var rule6 = `
	from {
    transform: scale3d(1, 1, 1);
  }

  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    transform: scale3d(1, 1, 1);
}`;
var name7;
function make6() {
  return name7 || (name7 = animation(rule6));
}
function Pulse({
  children,
  // eslint-disable-next-line unused-imports/no-unused-vars
  out,
  timeout,
  duration = defaults.duration,
  delay = defaults.delay,
  count = defaults.count,
  forever,
  ...props
} = defaults) {
  const effect = { make: make6, duration: timeout === void 0 ? duration : timeout, delay, forever, count, style: { animationFillMode: "both" } };
  return wrapper(props, effect, false, children);
}

// src/animations/simple/RubberBand.ts
var rule7 = `
 from {
    transform: scale3d(1, 1, 1);
  }

  30% {
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    transform: scale3d(.95, 1.05, 1);
  }

  75% {
    transform: scale3d(1.05, .95, 1);
  }

  to {
    transform: scale3d(1, 1, 1);
}
`;
var name8;
function make7() {
  return name8 || (name8 = animation(rule7));
}
function RubberBand({
  children,
  // eslint-disable-next-line unused-imports/no-unused-vars
  out,
  timeout,
  duration = defaults.duration,
  delay = defaults.delay,
  count = defaults.count,
  forever,
  ...props
} = defaults) {
  const effect = { make: make7, duration: timeout === void 0 ? duration : timeout, delay, forever, count, style: { animationFillMode: "both" } };
  return wrapper(props, effect, false, children);
}

// src/animations/simple/Shake.ts
var rule8 = `
  from, to {
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    transform: translate3d(10px, 0, 0);
  }
`;
var name9 = animation(rule8);
function Shake({
  children,
  // eslint-disable-next-line unused-imports/no-unused-vars
  out,
  timeout,
  duration = defaults.duration,
  delay = defaults.delay,
  count = defaults.count,
  forever,
  ...props
} = defaults) {
  const effect = { make: () => name9, duration: timeout === void 0 ? duration : timeout, delay, forever, count, style: { animationFillMode: "both" } };
  return wrapper(props, effect, false, children);
}

// src/animations/simple/Spin.ts
var rule9 = `
    from {
        transform: rotate(360deg);
        animation-timing-function: linear;
    }

    to {
       transform: rotate(0deg);
    }
`;
var name10;
function make8() {
  return name10 || (name10 = animation(rule9));
}
function Spin({
  children,
  // eslint-disable-next-line unused-imports/no-unused-vars
  out,
  timeout,
  duration = defaults.duration,
  delay = defaults.delay,
  count = defaults.count,
  forever,
  ...props
} = defaults) {
  const effect = { make: make8, duration: timeout === void 0 ? duration : timeout, delay, forever, count, style: { animationFillMode: "both" } };
  return wrapper(props, effect, false, children);
}

// src/animations/simple/Swing.ts
var rule10 = `
    20% {
        transform: rotate3d(0, 0, 1, 15deg);
    }

    40% {
        transform: rotate3d(0, 0, 1, -10deg);
    }

    60% {
        transform: rotate3d(0, 0, 1, 5deg);
    }

    80% {
        transform: rotate3d(0, 0, 1, -5deg);
    }

    to {
        transform: rotate3d(0, 0, 1, 0deg);
    }
`;
var name11;
function make9() {
  return name11 || (name11 = animation(rule10));
}
function Swing({
  children,
  // eslint-disable-next-line unused-imports/no-unused-vars
  out,
  timeout,
  duration = defaults.duration,
  delay = defaults.delay,
  count = defaults.count,
  forever,
  ...props
} = defaults) {
  const effect = { make: make9, duration: timeout === void 0 ? duration : timeout, delay, forever, count, style: { animationFillMode: "both" } };
  return wrapper(props, effect, false, children);
}

// src/animations/simple/Tada.ts
var rule11 = `
    from {
        transform: scale3d(1, 1, 1);
    }

    10%, 20% {
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    }

    30%, 50%, 70%, 90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }

    40%, 60%, 80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
`;
var name12;
function make10() {
  return name12 || (name12 = animation(rule11));
}
function Tada({
  children,
  // eslint-disable-next-line unused-imports/no-unused-vars
  out,
  timeout,
  duration = defaults.duration,
  delay = defaults.delay,
  count = defaults.count,
  forever,
  ...props
} = defaults) {
  const effect = { make: make10, duration: timeout === void 0 ? duration : timeout, delay, forever, count, style: { animationFillMode: "both" } };
  return wrapper(props, effect, false, children);
}

// src/animations/simple/Wobble.ts
var rule12 = `
    from {
        transform: none;
    }

    15% {
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }

    30% {
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }

    45% {
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }

    60% {
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }

    75% {
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }

    to {
        transform: none;
    }
`;
var name13;
function make11() {
  return name13 || (name13 = animation(rule12));
}
function Wobble({
  children,
  // eslint-disable-next-line unused-imports/no-unused-vars
  out,
  timeout,
  duration = defaults.duration,
  delay = defaults.delay,
  count = defaults.count,
  forever,
  ...props
} = defaults) {
  const effect = { make: make11, duration: timeout === void 0 ? duration : timeout, delay, forever, count, style: { animationFillMode: "both" } };
  return wrapper(props, effect, false, children);
}

// src/animations/complex/Rotate.ts
var lookup = {};
function make12(reverse, { left, right, up, down, top, bottom, mirror, opposite }) {
  const checksum = (left ? 1 : 0) | (right ? 2 : 0) | (top || down ? 4 : 0) | (bottom || up ? 8 : 0) | (mirror ? 16 : 0) | (opposite ? 32 : 0) | (reverse ? 64 : 0);
  if (lookup.hasOwnProperty(checksum))
    return lookup[checksum];
  if (!mirror !== !(reverse && opposite))
    [left, right, top, bottom, up, down] = [right, left, bottom, top, down, up];
  let angle = "-200deg";
  let origin = "center";
  if ((down || top) && left)
    angle = "-45deg";
  if ((down || top) && right || (up || bottom) && left)
    angle = "45deg";
  if ((up || bottom) && right)
    angle = "-90deg";
  if (left || right)
    origin = `${left ? "left" : "right"} bottom`;
  lookup[checksum] = animation(`
    ${!reverse ? "from" : "to"} { opacity: 0; transform-origin: ${origin}; transform: rotate3d(0, 0, 1, ${angle});}
    ${reverse ? "from" : "to"} { opacity: 1; transform-origin: ${origin}; transform: none;}
  `);
  return lookup[checksum];
}
function Rotate({
  children,
  // eslint-disable-next-line unused-imports/no-unused-vars
  out,
  forever,
  timeout,
  duration = defaults.duration,
  delay = defaults.delay,
  count = defaults.count,
  ...props
} = defaults) {
  const effect = {
    make: make12,
    duration: timeout === void 0 ? duration : timeout,
    delay,
    forever,
    count,
    style: { animationFillMode: "both" }
  };
  return wrapper(props, effect, effect, children);
}
var Rotate_default = Rotate;

// src/animations/complex/Bounce.ts
var lookup2 = {};
function make13(reverse, { left, right, up, down, top, bottom, mirror, opposite }) {
  const checksum = (left ? 1 : 0) | (right ? 2 : 0) | (top || down ? 4 : 0) | (bottom || up ? 8 : 0) | (mirror ? 16 : 0) | (opposite ? 32 : 0) | (reverse ? 64 : 0);
  if (lookup2.hasOwnProperty(checksum))
    return lookup2[checksum];
  if (!mirror !== !(reverse && opposite))
    [left, right, top, bottom, up, down] = [right, left, bottom, top, down, up];
  const transformX = left || right;
  const transformY = top || bottom || up || down;
  const transform = transformX || transformY;
  let rule13, x0, y0, x20, y20, y40, x60, y60, x75, y75, x90, y90, x100, y100;
  if (reverse) {
    x20 = transformX ? `${right ? "-" : ""}20px` : 0;
    y20 = transformY ? `${up || bottom ? "" : "-"}10px` : "0";
    y40 = `${down || top ? "" : "-"}20px`;
    x100 = transformX ? `${left ? "-" : ""}2000px` : "0";
    y100 = transformY ? `${down || top ? "-" : ""}2000px` : "0";
  } else {
    x0 = transformX ? `${left ? "-" : ""}3000px` : "0";
    y0 = transformY ? `${down || top ? "-" : ""}3000px` : "0";
    x60 = transformX ? `${right ? "-" : ""}25px` : "0";
    y60 = transformY ? `${up || bottom ? "-" : ""}25px` : "0";
    x75 = transformX ? `${left ? "-" : ""}10px` : "0";
    y75 = transformY ? `${down || top ? "-" : ""}10px` : "0";
    x90 = transformX ? `${right ? "-" : ""}5px` : "0";
    y90 = transformY ? `${up || bottom ? "-" : ""}5px` : "0";
  }
  if (transform) {
    rule13 = reverse ? `
        20% {
          transform: translate3d(${x20}, ${y20}, 0);
          }
        ${transformY ? `40%, 45% {
            opacity: 1;
            transform: translate3d(0, ${y40}, 0);
          }` : ""}
          to {
            opacity: 0;
            transform: translate3d(${x100}, ${y100}, 0);
        }
      ` : `from, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
      }
      from {
        opacity: 0;
        transform: translate3d(${x0}, ${y0}, 0);
      }
      60% {
        opacity: 1;
        transform: translate3d(${x60}, ${y60}, 0);
      }
      75% {
        transform: translate3d(${x75}, ${y75}, 0);
      }
      90% {
        transform: translate3d(${x90}, ${y90}, 0);
      }
      to {
        transform: none;
      }`;
  } else {
    rule13 = reverse ? `20% {
          transform: scale3d(.9, .9, .9);
        }
        50%, 55% {
          opacity: 1;
          transform: scale3d(1.1, 1.1, 1.1);
        }
        to {
          opacity: 0;
          transform: scale3d(.3, .3, .3);
      }` : `from, 20%, 40%, 60%, 80%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
      }
      0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
      }
      20% {
        transform: scale3d(1.1, 1.1, 1.1);
      }
      40% {
        transform: scale3d(.9, .9, .9);
      }
      60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
      }
      80% {
        transform: scale3d(.97, .97, .97);
      }
      to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
      }`;
  }
  lookup2[checksum] = animation(rule13);
  return lookup2[checksum];
}
function Bounce({
  children,
  // eslint-disable-next-line unused-imports/no-unused-vars
  out,
  forever,
  timeout,
  duration = defaults.duration,
  delay = defaults.delay,
  count = defaults.count,
  ...props
} = defaults) {
  const effect = {
    make: make13,
    duration: timeout === void 0 ? duration : timeout,
    delay,
    forever,
    count,
    style: { animationFillMode: "both" },
    reverse: props.left
  };
  return wrapper(props, effect, effect, children);
}
var Bounce_default = Bounce;

// src/animations/complex/Fade.ts
var lookup3 = {};
function make14(reverse, { distance, left, right, up, down, top, bottom, big, mirror, opposite }) {
  const checksum = (distance ? distance.toString() : 0) + ((left ? 1 : 0) | (right ? 2 : 0) | (top || down ? 4 : 0) | (bottom || up ? 8 : 0) | (mirror ? 16 : 0) | (opposite ? 32 : 0) | (reverse ? 64 : 0) | (big ? 128 : 0));
  if (lookup3.hasOwnProperty(checksum))
    return lookup3[checksum];
  const transform = left || right || up || down || top || bottom;
  let x, y;
  if (transform) {
    if (!mirror !== !(reverse && opposite))
      [left, right, top, bottom, up, down] = [right, left, bottom, top, down, up];
    const dist = distance || (big ? "2000px" : "100%");
    x = left ? `-${dist}` : right ? dist : "0";
    y = down || top ? `-${dist}` : up || bottom ? dist : "0";
  }
  lookup3[checksum] = animation(
    `${!reverse ? "from" : "to"} {opacity: 0;${transform ? ` transform: translate3d(${x}, ${y}, 0);` : ""}}
     ${reverse ? "from" : "to"} {opacity: 1;transform: none;} `
  );
  return lookup3[checksum];
}
function Fade({
  children,
  // eslint-disable-next-line unused-imports/no-unused-vars
  out,
  forever,
  timeout,
  duration = defaults.duration,
  delay = defaults.delay,
  count = defaults.count,
  ...props
} = defaults) {
  const effect = {
    make: make14,
    duration: timeout === void 0 ? duration : timeout,
    delay,
    forever,
    count,
    style: { animationFillMode: "both" },
    reverse: props.left
  };
  return wrapper(props, effect, effect, children);
}
var Fade_default = Fade;

// src/animations/complex/Flip.ts
var lookup4 = {};
function make15(reverse, { left, right, top, bottom, x, y, mirror, opposite }) {
  const checksum = (left ? 1 : 0) | (right || y ? 2 : 0) | (top || x ? 4 : 0) | (bottom ? 8 : 0) | (mirror ? 16 : 0) | (opposite ? 32 : 0) | (reverse ? 64 : 0);
  if (lookup4.hasOwnProperty(checksum))
    return lookup4[checksum];
  if (!mirror !== !(reverse && opposite))
    [left, right, top, bottom, x, y] = [right, left, bottom, top, y, x];
  let rule13;
  if (x || y || left || right || top || bottom) {
    const xval = x || top || bottom ? `${bottom ? "-" : ""}1` : "0";
    const yval = y || right || left ? `${left ? "-" : ""}1` : "0";
    if (!reverse) {
      rule13 = `from {
          transform: perspective(400px) rotate3d(${xval}, ${yval}, 0, 90deg);
          animation-timing-function: ease-in;
          opacity: 0;
        }
        40% {
          transform: perspective(400px) rotate3d(${xval}, ${yval}, 0, -20deg);
          animation-timing-function: ease-in;
        }
        60% {
          transform: perspective(400px) rotate3d(${xval}, ${yval}, 0, 10deg);
          opacity: 1;
        }
        80% {
          transform: perspective(400px) rotate3d(${xval}, ${yval}, 0, -5deg);
        }
        to {
          transform: perspective(400px);
        }`;
    } else {
      rule13 = `from {
          transform: perspective(400px);
        }
        30% {
          transform: perspective(400px) rotate3d(${xval}, ${yval}, 0, -15deg);
          opacity: 1;
        }
        to {
          transform: perspective(400px) rotate3d(${xval}, ${yval}, 0, 90deg);
          opacity: 0;
        }`;
    }
  } else {
    rule13 = `from {
          transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
          animation-timing-function: ease-out;
          opacity: ${!reverse ? "0" : "1"};
        }
        40% {
          transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
          animation-timing-function: ease-out;
        }
        50% {
          transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
          animation-timing-function: ease-in;
        }
        to {
          transform: perspective(400px);
          animation-timing-function: ease-in;
          opacity: ${reverse ? "0" : "1"};
        }`;
  }
  lookup4[checksum] = animation(rule13);
  return lookup4[checksum];
}
function Flip({
  children,
  // eslint-disable-next-line unused-imports/no-unused-vars
  out,
  forever,
  timeout,
  duration = defaults.duration,
  delay = defaults.delay,
  count = defaults.count,
  ...props
} = defaults) {
  const effect = {
    make: make15,
    duration: timeout === void 0 ? duration : timeout,
    delay,
    forever,
    count,
    style: { animationFillMode: "both", backfaceVisibility: "visible" }
  };
  return wrapper(props, effect, effect, children);
}
var Flip_default = Flip;

// src/animations/complex/LightSpeed.ts
var lookup5 = {};
function make16(reverse, { left, right, mirror, opposite }) {
  const checksum = (left ? 1 : 0) | (right ? 2 : 0) | (mirror ? 16 : 0) | (opposite ? 32 : 0) | (reverse ? 64 : 0);
  if (lookup5.hasOwnProperty(checksum))
    return lookup5[checksum];
  if (!mirror !== !(reverse && opposite))
    [left, right] = [right, left];
  const dist = "100%";
  const x = left ? `-${dist}` : right ? dist : "0";
  const rule13 = !reverse ? `from {
        transform: translate3d(${x}, 0, 0) skewX(-30deg);
        opacity: 0;
      }
      60% {
        transform: skewX(20deg);
        opacity: 1;
      }
      80% {
        transform: skewX(-5deg);
        opacity: 1;
      }
      to {
        transform: none;
        opacity: 1;
      }` : `from {
        opacity: 1;
      }
      to {
        transform: translate3d(${x}, 0, 0) skewX(30deg);
        opacity: 0;
      }
    `;
  lookup5[checksum] = animation(rule13);
  return lookup5[checksum];
}
function LightSpeed({
  children,
  // eslint-disable-next-line unused-imports/no-unused-vars
  out,
  forever,
  timeout,
  duration = defaults.duration,
  delay = defaults.delay,
  count = defaults.count,
  ...props
} = defaults) {
  const effect = {
    make: make16,
    duration: timeout === void 0 ? duration : timeout,
    delay,
    forever,
    count,
    style: { animationFillMode: "both" }
  };
  0 + (props.left ? 1 : 0) + (props.right ? 10 : 0) + (props.mirror ? 1e4 : 0) + (props.opposite ? 1e5 : 0);
  return wrapper(props, effect, effect, children);
}
var LightSpeed_default = LightSpeed;

// src/animations/complex/Roll.ts
var lookup6 = {};
function make17(reverse, { left, right, up, down, top, bottom, big, mirror, opposite }) {
  const checksum = (left ? 1 : 0) | (right ? 2 : 0) | (top || down ? 4 : 0) | (bottom || up ? 8 : 0) | (mirror ? 16 : 0) | (opposite ? 32 : 0) | (reverse ? 64 : 0) | (big ? 128 : 0);
  if (lookup6.hasOwnProperty(checksum))
    return lookup6[checksum];
  if (!mirror !== !(reverse && opposite))
    [left, right, top, bottom, up, down] = [right, left, bottom, top, down, up];
  const dist = big ? "2000px" : "100%";
  const x = left ? `-${dist}` : right ? dist : "0";
  const y = down || top ? `-${dist}` : up || bottom ? dist : "0";
  lookup6[checksum] = animation(`
    ${!reverse ? "from" : "to"} {opacity: 0;transform: translate3d(${x}, ${y}, 0) rotate3d(0, 0, 1, -120deg);}
	  ${reverse ? "from" : "to"} {opacity: 1;transform: none}
  `);
  return lookup6[checksum];
}
function Roll({
  children,
  // eslint-disable-next-line unused-imports/no-unused-vars
  out,
  forever,
  timeout,
  duration = defaults.duration,
  delay = defaults.delay,
  count = defaults.count,
  ...props
} = defaults) {
  const effect = {
    make: make17,
    duration: timeout === void 0 ? duration : timeout,
    delay,
    forever,
    count,
    style: { animationFillMode: "both" }
  };
  return wrapper(props, effect, effect, children);
}

// src/animations/complex/Slide.ts
var lookup7 = {};
function make18(reverse, { left, right, up, down, top, bottom, big, mirror, opposite }) {
  const checksum = (left ? 1 : 0) | (right ? 2 : 0) | (top || down ? 4 : 0) | (bottom || up ? 8 : 0) | (mirror ? 16 : 0) | (opposite ? 32 : 0) | (reverse ? 64 : 0) | (big ? 128 : 0);
  if (lookup7.hasOwnProperty(checksum))
    return lookup7[checksum];
  const transform = left || right || up || down || top || bottom;
  let x, y;
  if (transform) {
    if (!mirror !== !(reverse && opposite))
      [left, right, top, bottom, up, down] = [right, left, bottom, top, down, up];
    const dist = big ? "2000px" : "100%";
    x = left ? `-${dist}` : right ? dist : "0";
    y = down || top ? `-${dist}` : up || bottom ? dist : "0";
  }
  lookup7[checksum] = animation(
    `${!reverse ? "from" : "to"} {${transform ? ` transform: translate3d(${x}, ${y}, 0);` : ""}}
     ${reverse ? "from" : "to"} {transform: none;} `
  );
  return lookup7[checksum];
}
function Slide({
  children,
  // eslint-disable-next-line unused-imports/no-unused-vars
  out,
  forever,
  timeout,
  duration = defaults.duration,
  delay = defaults.delay,
  count = defaults.count,
  ...props
} = defaults) {
  const effect = {
    make: make18,
    duration: timeout === void 0 ? duration : timeout,
    delay,
    forever,
    count,
    style: { animationFillMode: "both" },
    reverse: props.left
  };
  return wrapper(props, effect, effect, children);
}

// src/animations/complex/Zoom.ts
var lookup8 = {};
function make19(reverse, { left, right, up, down, top, bottom, mirror, opposite }) {
  const checksum = (left ? 1 : 0) | (right ? 2 : 0) | (top || down ? 4 : 0) | (bottom || up ? 8 : 0) | (mirror ? 16 : 0) | (opposite ? 32 : 0) | (reverse ? 64 : 0);
  if (lookup8.hasOwnProperty(checksum))
    return lookup8[checksum];
  if (!mirror !== !(reverse && opposite))
    [left, right, top, bottom, up, down] = [right, left, bottom, top, down, up];
  const transformX = left || right;
  const transformY = top || bottom || up || down;
  const transform = transformX || transformY;
  let rule13, x1, y1, x2, y2;
  if (transform) {
    if (reverse) {
      x1 = transformX ? `${left ? "" : "-"}42px` : "0";
      y1 = transformY ? `${down || top ? "-" : ""}60px` : "0";
      x2 = transformX ? `${right ? "" : "-"}2000px` : "0";
      y2 = transformY ? `${up || bottom ? "" : "-"}2000px` : "0";
      rule13 = `40% {
          opacity: 1;
          transform: scale3d(.475, .475, .475) translate3d(${x1}, ${y1}, 0);
        }
        to {
          opacity: 0;
          transform: scale(.1) translate3d(${x2}, ${y2}, 0);
          transform-origin: ${transformY ? "center bottom" : `${left ? "left" : "right"} center`};
        }`;
    } else {
      x1 = transformX ? `${left ? "-" : ""}1000px` : "0";
      y1 = transformY ? `${down || top ? "-" : ""}1000px` : "0";
      x2 = transformX ? `${right ? "-" : ""}10px` : "0";
      y2 = transformY ? `${up || bottom ? "-" : ""}60px` : "0";
      rule13 = `from {
          opacity: 0;
          transform: scale3d(.1, .1, .1) translate3d(${x1}, ${y1}, 0);
          animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        }
        60% {
          opacity: 1;
          transform: scale3d(.475, .475, .475) translate3d(${x2}, ${y2}, 0);
          animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        }`;
    }
  } else {
    rule13 = `${!reverse ? "from" : "to"} {opacity: 0; transform: scale3d(.1, .1, .1);} ${reverse ? "from" : "to"} { opacity: 1; transform: none;}`;
  }
  lookup8[checksum] = animation(rule13);
  return lookup8[checksum];
}
function Zoom({
  // eslint-disable-next-line unused-imports/no-unused-vars
  children,
  out,
  forever,
  timeout,
  duration = defaults.duration,
  delay = defaults.delay,
  count = defaults.count,
  ...props
} = defaults) {
  const effect = {
    make: make19,
    duration: timeout === void 0 ? duration : timeout,
    delay,
    forever,
    count,
    style: { animationFillMode: "both" },
    reverse: props.left
  };
  return wrapper(props, effect, effect, children);
}

export { Bounce_default as Bounce, Fade_default as Fade, Flash, Flip_default as Flip, HeadShake, Jello, Jump_default as Jump, LightSpeed_default as LightSpeed, Pop, Pulse, Roll, Rotate_default as Rotate, RubberBand, Shake, Slide, Spin, Swing, Tada, Wobble, Zoom };