react-gsap-aos 1.0.0

package/dist/index.mjs

@@ -0,0 +1,731 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/animation/constants.ts
+var DEFAULT_OPTIONS = {
+  offset: 120,
+  delay: 0,
+  duration: 400,
+  easing: "none",
+  once: false,
+  mirror: false,
+  anchorPlacement: "top-bottom"
+};
+var easings = [
+  "none",
+  "power1",
+  "power1.in",
+  "power1.out",
+  "power1.inOut",
+  "power2",
+  "power2.in",
+  "power2.out",
+  "power2.inOut",
+  "power3",
+  "power3.in",
+  "power3.out",
+  "power3.inOut",
+  "power4",
+  "power4.in",
+  "power4.out",
+  "power4.inOut",
+  "back",
+  "back.in",
+  "back.out",
+  "back.inOut",
+  "bounce",
+  "bounce.in",
+  "bounce.out",
+  "bounce.inOut",
+  "circ",
+  "circ.in",
+  "circ.out",
+  "circ.inOut",
+  "elastic",
+  "elastic.in",
+  "elastic.out",
+  "elastic.inOut",
+  "expo",
+  "expo.in",
+  "expo.out",
+  "expo.inOut",
+  "sine",
+  "sine.in",
+  "sine.out",
+  "sine.inOut"
+];
+var anchorPlacements = [
+  "top-bottom",
+  "top-center",
+  "top-top",
+  "center-bottom",
+  "center-center",
+  "center-top",
+  "bottom-bottom",
+  "bottom-center",
+  "bottom-top"
+];
+
+// src/constants.ts
+var animations = [
+  "fade",
+  "fade-up",
+  "fade-down",
+  "fade-left",
+  "fade-right",
+  "fade-up-right",
+  "fade-up-left",
+  "fade-down-right",
+  "fade-down-left",
+  "flip-up",
+  "flip-down",
+  "flip-left",
+  "flip-right",
+  "slide-up",
+  "slide-down",
+  "slide-left",
+  "slide-right",
+  "zoom-in",
+  "zoom-in-up",
+  "zoom-in-down",
+  "zoom-in-left",
+  "zoom-in-right",
+  "zoom-out",
+  "zoom-out-up",
+  "zoom-out-down",
+  "zoom-out-left",
+  "zoom-out-right"
+];
+
+// src/hooks/useAOSInitial.ts
+import { useLayoutEffect, useRef } from "react";
+import { useGSAP } from "@gsap/react";
+import gsap2 from "gsap";
+
+// src/animation/utils/parseAttributes.ts
+var AOS_ATTRIBUTE_MAP = {
+  "data-aos-offset": "offset",
+  "data-aos-delay": "delay",
+  "data-aos-duration": "duration",
+  "data-aos-easing": "easing",
+  "data-aos-mirror": "mirror",
+  "data-aos-once": "once",
+  "data-aos-anchor-placement": "anchorPlacement"
+};
+function parseAttributes(element) {
+  const options = {};
+  for (const key of Object.keys(AOS_ATTRIBUTE_MAP)) {
+    const value = element.getAttribute(key);
+    if (value) {
+      const prop = AOS_ATTRIBUTE_MAP[key];
+      switch (prop) {
+        case "offset":
+        case "delay":
+        case "duration": {
+          const numberValue = parseNumber(value);
+          if (!Number.isNaN(numberValue)) {
+            options[prop] = numberValue;
+          }
+          break;
+        }
+        case "easing": {
+          const easing = parseEnum(easings, value);
+          if (easing) {
+            options[prop] = easing;
+          }
+          break;
+        }
+        case "once":
+        case "mirror": {
+          const booleanValue = parseBoolean(value);
+          if (typeof booleanValue === "boolean") {
+            options[prop] = booleanValue;
+          }
+          break;
+        }
+        case "anchorPlacement": {
+          const anchorPlacement = parseEnum(anchorPlacements, value);
+          if (anchorPlacement) {
+            options[prop] = anchorPlacement;
+          }
+          break;
+        }
+      }
+    }
+  }
+  return options;
+}
+function parseEnum(list, value) {
+  return list.includes(value) ? value : void 0;
+}
+function parseBoolean(value) {
+  switch (value) {
+    case "true":
+      return true;
+    case "false":
+      return false;
+    default:
+      break;
+  }
+}
+function parseNumber(value) {
+  return parseInt(value, 10);
+}
+
+// src/animation/animations.ts
+import gsap from "gsap";
+
+// src/animation/utils/mergeOptions.ts
+function mergeOptions(...array) {
+  const result = __spreadValues({}, DEFAULT_OPTIONS);
+  for (const options of array) {
+    if (!options) continue;
+    for (const key of Object.keys(options)) {
+      switch (key) {
+        case "offset":
+        case "delay":
+        case "duration": {
+          const value = options[key];
+          if (typeof value === "number" && !Number.isNaN(value) && !Number.isFinite(value)) {
+            result[key] = value;
+          }
+          break;
+        }
+        case "easing": {
+          const value = options[key];
+          if (verifyEnum(easings, value)) {
+            result[key] = value;
+          }
+          break;
+        }
+        case "once":
+        case "mirror": {
+          const value = options[key];
+          if (typeof value === "boolean") {
+            result[key] = value;
+          }
+          break;
+        }
+        case "anchorPlacement": {
+          const value = options[key];
+          if (verifyEnum(anchorPlacements, value)) {
+            result[key] = value;
+          }
+          break;
+        }
+        default:
+          break;
+      }
+    }
+  }
+  return result;
+}
+function verifyEnum(list, value) {
+  return Boolean(value && list.includes(value));
+}
+
+// src/animation/utils/createTweenVars.ts
+function translate3d(x, y, z) {
+  return { x, y, z };
+}
+function rotateY(y) {
+  return { rotateY: y };
+}
+function rotateX(x) {
+  return { rotateX: x };
+}
+function scale(x, y) {
+  return typeof y === "number" ? {
+    scaleX: x,
+    scaleY: y
+  } : {
+    scale: x
+  };
+}
+function perspective(value) {
+  return {
+    transformPerspective: value
+  };
+}
+
+// src/animation/definitions.ts
+var DISTANCE = 100;
+var presets = {
+  fade: {
+    from: {
+      opacity: 0,
+      transitionProperty: "opacity, transform"
+    },
+    to: {
+      opacity: 1,
+      transform: "none"
+    }
+  },
+  zoom: {
+    from: {
+      opacity: 0,
+      transitionProperty: "opacity, transform"
+    },
+    to: __spreadValues(__spreadValues({
+      opacity: 1
+    }, translate3d(0, 0, 0)), scale(1))
+  },
+  slide: {
+    from: {
+      visibility: "hidden",
+      transitionProperty: "transform"
+    },
+    to: __spreadValues({
+      visibility: "visible"
+    }, translate3d(0, 0, 0))
+  },
+  flip: {
+    from: {
+      backfaceVisibility: "hidden",
+      transitionProperty: "transform"
+    },
+    to: {}
+  }
+};
+var definitions = {
+  fade: {
+    preset: presets.fade,
+    vars: {
+      from: {},
+      to: {}
+    }
+  },
+  fadeUp: {
+    preset: presets.fade,
+    vars: {
+      from: translate3d(0, DISTANCE, 0),
+      to: {}
+    }
+  },
+  fadeDown: {
+    preset: presets.fade,
+    vars: {
+      from: translate3d(0, -DISTANCE, 0),
+      to: {}
+    }
+  },
+  fadeLeft: {
+    preset: presets.fade,
+    vars: {
+      from: translate3d(DISTANCE, 0, 0),
+      to: {}
+    }
+  },
+  fadeRight: {
+    preset: presets.fade,
+    vars: {
+      from: translate3d(-DISTANCE, 0, 0),
+      to: {}
+    }
+  },
+  fadeUpRight: {
+    preset: presets.fade,
+    vars: {
+      from: translate3d(-DISTANCE, DISTANCE, 0),
+      to: {}
+    }
+  },
+  fadeUpLeft: {
+    preset: presets.fade,
+    vars: {
+      from: translate3d(DISTANCE, DISTANCE, 0),
+      to: {}
+    }
+  },
+  fadeDownRight: {
+    preset: presets.fade,
+    vars: {
+      from: translate3d(-DISTANCE, -DISTANCE, 0),
+      to: {}
+    }
+  },
+  fadeDownLeft: {
+    preset: presets.fade,
+    vars: {
+      from: translate3d(DISTANCE, -DISTANCE, 0),
+      to: {}
+    }
+  },
+  flipUp: {
+    preset: presets.flip,
+    vars: {
+      from: __spreadValues(__spreadValues({}, perspective(2500)), rotateX("-100deg")),
+      to: __spreadValues(__spreadValues({}, perspective(2500)), rotateX(0))
+    }
+  },
+  flipDown: {
+    preset: presets.flip,
+    vars: {
+      from: __spreadValues(__spreadValues({}, perspective(2500)), rotateX("100deg")),
+      to: __spreadValues(__spreadValues({}, perspective(2500)), rotateX(0))
+    }
+  },
+  flipLeft: {
+    preset: presets.flip,
+    vars: {
+      from: __spreadValues(__spreadValues({}, perspective(2500)), rotateY("-100deg")),
+      to: __spreadValues(__spreadValues({}, perspective(2500)), rotateY(0))
+    }
+  },
+  flipRight: {
+    preset: presets.flip,
+    vars: {
+      from: __spreadValues(__spreadValues({}, perspective(2500)), rotateY("100deg")),
+      to: __spreadValues(__spreadValues({}, perspective(2500)), rotateY(0))
+    }
+  },
+  slideUp: {
+    preset: presets.slide,
+    vars: {
+      from: translate3d(0, "100%", 0),
+      to: {}
+    }
+  },
+  slideDown: {
+    preset: presets.slide,
+    vars: {
+      from: translate3d(0, "-100%", 0),
+      to: {}
+    }
+  },
+  slideLeft: {
+    preset: presets.slide,
+    vars: {
+      from: translate3d("100%", 0, 0),
+      to: {}
+    }
+  },
+  slideRight: {
+    preset: presets.slide,
+    vars: {
+      from: translate3d("-100%", 0, 0),
+      to: {}
+    }
+  },
+  zoomIn: { preset: presets.zoom, vars: { from: scale(0.6), to: {} } },
+  zoomInUp: {
+    preset: presets.zoom,
+    vars: {
+      from: __spreadValues(__spreadValues({}, translate3d(0, DISTANCE, 0)), scale(0.6)),
+      to: {}
+    }
+  },
+  zoomInDown: {
+    preset: presets.zoom,
+    vars: {
+      from: __spreadValues(__spreadValues({}, translate3d(0, -DISTANCE, 0)), scale(0.6)),
+      to: {}
+    }
+  },
+  zoomInLeft: {
+    preset: presets.zoom,
+    vars: {
+      from: __spreadValues(__spreadValues({}, translate3d(DISTANCE, 0, 0)), scale(0.6)),
+      to: {}
+    }
+  },
+  zoomInRight: {
+    preset: presets.zoom,
+    vars: {
+      from: __spreadValues(__spreadValues({}, translate3d(-DISTANCE, 0, 0)), scale(0.6)),
+      to: {}
+    }
+  },
+  zoomOut: { preset: presets.zoom, vars: { from: scale(1.2), to: {} } },
+  zoomOutUp: {
+    preset: presets.zoom,
+    vars: {
+      from: __spreadValues(__spreadValues({}, translate3d(0, DISTANCE, 0)), scale(1.2)),
+      to: {}
+    }
+  },
+  zoomOutDown: {
+    preset: presets.zoom,
+    vars: {
+      from: __spreadValues(__spreadValues({}, translate3d(0, -DISTANCE, 0)), scale(1.2)),
+      to: {}
+    }
+  },
+  zoomOutLeft: {
+    preset: presets.zoom,
+    vars: {
+      from: __spreadValues(__spreadValues({}, translate3d(DISTANCE, 0, 0)), scale(1.2)),
+      to: {}
+    }
+  },
+  zoomOutRight: {
+    preset: presets.zoom,
+    vars: {
+      from: __spreadValues(__spreadValues({}, translate3d(-DISTANCE, 0, 0)), scale(1.2)),
+      to: {}
+    }
+  }
+};
+var definitions_default = definitions;
+
+// src/animation/animations.ts
+function scrollTriggerStart(anchorPlacement, offset) {
+  const [v1, v2] = anchorPlacement.split("-");
+  const anchor = `${v1} ${v2}`;
+  if (offset === 0 || Number.isNaN(offset)) return anchor;
+  const fix = `${offset > 0 ? "-" : "+"}=${Math.abs(offset)}`;
+  return `${anchor}${fix}`;
+}
+function createScrollTriggerTween(element, preset, vars, options) {
+  var _a;
+  const { from, to } = vars;
+  const { offset, delay, duration, easing, once, mirror, anchorPlacement } = mergeOptions(options);
+  const container = ((_a = element.parentElement) == null ? void 0 : _a.hasAttribute("data-aos-container")) ? element.parentElement : null;
+  return gsap.fromTo(
+    element,
+    __spreadValues(__spreadValues({}, preset.from), from),
+    __spreadProps(__spreadValues(__spreadValues({}, preset.to), to), {
+      ease: easing,
+      duration: duration / 1e3,
+      delay: delay / 1e3,
+      overwrite: "auto",
+      scrollTrigger: {
+        // markers: true,
+        trigger: container || element,
+        toggleActions: mirror ? "play reverse play reverse" : "play none none reverse",
+        once,
+        start: scrollTriggerStart(anchorPlacement, offset)
+      }
+    })
+  );
+}
+function createAnimationMap(definitions2) {
+  const result = {};
+  const keys = Object.keys(definitions2);
+  for (const key of keys) {
+    const { preset, vars } = definitions2[key];
+    result[key] = (element, options) => createScrollTriggerTween(element, preset, vars, options);
+  }
+  return result;
+}
+var animations2 = createAnimationMap(definitions_default);
+var animations_default = animations2;
+
+// src/animation/createAnimation.ts
+var ANIMATION_REGISTRY = {
+  fade: animations_default.fade,
+  "fade-up": animations_default.fadeUp,
+  "fade-down": animations_default.fadeDown,
+  "fade-left": animations_default.fadeLeft,
+  "fade-right": animations_default.fadeRight,
+  "fade-up-right": animations_default.fadeUpRight,
+  "fade-up-left": animations_default.fadeUpLeft,
+  "fade-down-right": animations_default.fadeDownRight,
+  "fade-down-left": animations_default.fadeDownLeft,
+  "flip-up": animations_default.flipUp,
+  "flip-down": animations_default.flipDown,
+  "flip-left": animations_default.flipLeft,
+  "flip-right": animations_default.flipRight,
+  "slide-up": animations_default.slideUp,
+  "slide-down": animations_default.slideDown,
+  "slide-left": animations_default.slideLeft,
+  "slide-right": animations_default.slideRight,
+  "zoom-in": animations_default.zoomIn,
+  "zoom-in-up": animations_default.zoomInUp,
+  "zoom-in-down": animations_default.zoomInDown,
+  "zoom-in-left": animations_default.zoomInLeft,
+  "zoom-in-right": animations_default.zoomInRight,
+  "zoom-out": animations_default.zoomOut,
+  "zoom-out-up": animations_default.zoomOutUp,
+  "zoom-out-down": animations_default.zoomOutDown,
+  "zoom-out-left": animations_default.zoomOutLeft,
+  "zoom-out-right": animations_default.zoomOutRight
+};
+function createAnimation(element, options) {
+  const animate = element.getAttribute("data-aos");
+  if (!animate) return;
+  const handleAnimation = ANIMATION_REGISTRY[animate];
+  if (!handleAnimation) return;
+  return handleAnimation(element, __spreadValues(__spreadValues({}, options), parseAttributes(element)));
+}
+
+// src/hooks/useAOSInitial.ts
+gsap2.registerPlugin(useGSAP);
+var AOS_ATTRIBUTE_KEYS = [
+  "data-aos",
+  "data-aos-offset",
+  "data-aos-delay",
+  "data-aos-duration",
+  "data-aos-easing",
+  "data-aos-mirror",
+  "data-aos-once",
+  "data-aos-anchor-placement"
+];
+var AOS_SELECTORS = "[data-aos]";
+function useAOSInitial(options) {
+  const containerRef = useRef(null);
+  const observerRef = useRef(null);
+  const elementAnimations = useRef(
+    /* @__PURE__ */ new WeakMap()
+  );
+  const optionsRef = useRef(options);
+  useLayoutEffect(() => {
+    optionsRef.current = options;
+  }, [options]);
+  useGSAP(
+    (_, contextSafe) => {
+      if (!containerRef.current || !contextSafe) return;
+      const removeAnimation = (element) => {
+        const animation = elementAnimations.current.get(element);
+        if (!animation) return;
+        animation.kill();
+        elementAnimations.current.delete(element);
+      };
+      const addAnimation = (element) => {
+        const newAnimation = createAnimation(element, optionsRef.current);
+        if (!newAnimation) return;
+        elementAnimations.current.set(element, newAnimation);
+      };
+      const updateAnimation = (element) => {
+        const prevAnimation = elementAnimations.current.get(element);
+        if (prevAnimation) {
+          prevAnimation.kill();
+          elementAnimations.current.delete(element);
+          gsap2.set(element, prevAnimation.vars).kill();
+        }
+        addAnimation(element);
+      };
+      const handleMutation = contextSafe((mutations) => {
+        const addedElements = [];
+        const removedElements = [];
+        const updatedElements = [];
+        for (const mutation of mutations) {
+          switch (mutation.type) {
+            case "attributes": {
+              if (!(mutation.target instanceof HTMLElement)) continue;
+              const element = mutation.target;
+              updatedElements.push(element);
+              break;
+            }
+            case "childList": {
+              addedElements.push(...collectElements(mutation.addedNodes));
+              removedElements.push(...collectElements(mutation.removedNodes));
+              break;
+            }
+            default:
+              break;
+          }
+        }
+        for (const element of removedElements) {
+          removeAnimation(element);
+        }
+        for (const element of addedElements) {
+          addAnimation(element);
+        }
+        for (const element of updatedElements) {
+          updateAnimation(element);
+        }
+      });
+      for (const element of gsap2.utils.toArray(
+        AOS_SELECTORS,
+        containerRef.current
+      )) {
+        addAnimation(element);
+      }
+      observerRef.current = new MutationObserver(handleMutation);
+      observerRef.current.observe(containerRef.current, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: AOS_ATTRIBUTE_KEYS
+      });
+      return () => {
+        if (observerRef.current) {
+          observerRef.current.disconnect();
+          observerRef.current = null;
+        }
+      };
+    },
+    { scope: containerRef, dependencies: [] }
+  );
+  return { containerRef };
+}
+function collectElements(nodes) {
+  const elements = [];
+  for (const node of nodes) {
+    if (!(node instanceof HTMLElement)) continue;
+    if (node.matches(AOS_SELECTORS)) elements.push(node);
+    elements.push(...node.querySelectorAll(AOS_SELECTORS));
+  }
+  return elements;
+}
+
+// src/utils/refreshAOS.ts
+import gsap3 from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+gsap3.registerPlugin(ScrollTrigger);
+function refreshAOS() {
+  ScrollTrigger.refresh(true);
+}
+
+// src/utils/toAOSProps.ts
+function toAOSProps(options) {
+  const attrs = {
+    "data-aos": options.animation,
+    "data-aos-offset": toNumberAttr(options.offset),
+    "data-aos-delay": toNumberAttr(options.delay),
+    "data-aos-duration": toNumberAttr(options.duration),
+    "data-aos-easing": validateEnumValue(easings, options.easing),
+    "data-aos-mirror": toBooleanAttr(options.mirror),
+    "data-aos-once": toBooleanAttr(options.once),
+    "data-aos-anchor-placement": validateEnumValue(
+      anchorPlacements,
+      options.anchorPlacement
+    )
+  };
+  return omitNil(attrs);
+}
+function omitNil(obj) {
+  const result = {};
+  for (const [key, value] of Object.entries(obj)) {
+    if (value !== void 0 && value !== null) {
+      result[key] = value;
+    }
+  }
+  return result;
+}
+function toBooleanAttr(value) {
+  return typeof value === "boolean" ? String(value) : void 0;
+}
+function toNumberAttr(value) {
+  return typeof value === "number" ? String(value) : void 0;
+}
+function validateEnumValue(list, value) {
+  return list.includes(value) ? value : void 0;
+}
+export {
+  anchorPlacements,
+  animations,
+  easings,
+  refreshAOS,
+  toAOSProps,
+  useAOSInitial
+};
+//# sourceMappingURL=index.mjs.map