fluxo-animation 1.0.0

package/dist/index.global.js

@@ -0,0 +1,1248 @@
+"use strict";
+var fluxo = (() => {
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __export = (target, all) => {
+    for (var name in all)
+      __defProp(target, name, { get: all[name], enumerable: true });
+  };
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+  // src/index.ts
+  var index_exports = {};
+  __export(index_exports, {
+    ScrollTrigger: () => ScrollTrigger,
+    Timeline: () => Timeline,
+    Tween: () => Tween,
+    drawSVG: () => drawSVG,
+    easings: () => easings,
+    explodeOnScroll: () => explodeOnScroll,
+    fluxo: () => fluxo,
+    implodeOnScroll: () => implodeOnScroll,
+    magnetic: () => magnetic,
+    resolveTargets: () => resolveTargets,
+    revealText: () => revealText,
+    scrollReveal: () => scrollReveal,
+    slidingMenu: () => slidingMenu,
+    splitText: () => splitText,
+    ticker: () => ticker,
+    tilt: () => tilt
+  });
+
+  // src/ticker.ts
+  var Ticker = class {
+    callbacks = /* @__PURE__ */ new Set();
+    rafId = null;
+    lastTime = 0;
+    time = 0;
+    constructor() {
+      this.tick = this.tick.bind(this);
+    }
+    add(cb) {
+      this.callbacks.add(cb);
+      if (this.rafId === null) {
+        this.start();
+      }
+    }
+    remove(cb) {
+      this.callbacks.delete(cb);
+      if (this.callbacks.size === 0 && this.rafId !== null) {
+        this.stop();
+      }
+    }
+    start() {
+      this.lastTime = performance.now();
+      this.rafId = requestAnimationFrame(this.tick);
+    }
+    stop() {
+      if (this.rafId !== null) {
+        cancelAnimationFrame(this.rafId);
+        this.rafId = null;
+      }
+    }
+    tick(now) {
+      const dt = (now - this.lastTime) / 1e3;
+      this.lastTime = now;
+      this.time += dt;
+      const activeCallbacks = Array.from(this.callbacks);
+      for (const cb of activeCallbacks) {
+        cb(this.time, dt);
+      }
+      if (this.callbacks.size > 0) {
+        this.rafId = requestAnimationFrame(this.tick);
+      } else {
+        this.rafId = null;
+      }
+    }
+  };
+  var ticker = new Ticker();
+
+  // src/easings.ts
+  var easings = {
+    none: (t) => t,
+    linear: (t) => t,
+    "slow.in": (t) => t * t,
+    "slow.out": (t) => t * (2 - t),
+    "slow.inOut": (t) => t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2,
+    "medium.in": (t) => t * t * t,
+    "medium.out": (t) => 1 - Math.pow(1 - t, 3),
+    "medium.inOut": (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2,
+    "fast.in": (t) => t * t * t * t,
+    "fast.out": (t) => 1 - Math.pow(1 - t, 4),
+    "fast.inOut": (t) => t < 0.5 ? 8 * t * t * t * t : 1 - Math.pow(-2 * t + 2, 4) / 2,
+    "veryFast.in": (t) => t * t * t * t * t,
+    "veryFast.out": (t) => 1 - Math.pow(1 - t, 5),
+    "veryFast.inOut": (t) => t < 0.5 ? 16 * t * t * t * t * t : 1 - Math.pow(-2 * t + 2, 5) / 2
+  };
+  function getEasing(ease) {
+    if (!ease) return easings["slow.out"];
+    if (typeof ease === "function") return ease;
+    return easings[ease] || easings["slow.out"];
+  }
+
+  // src/utils.ts
+  function resolveTargets(target) {
+    if (!target) return [];
+    if (typeof target === "string") {
+      if (typeof document !== "undefined") {
+        return Array.from(document.querySelectorAll(target));
+      }
+      return [];
+    }
+    if (Array.isArray(target)) {
+      return target;
+    }
+    if (typeof NodeList !== "undefined" && target instanceof NodeList) {
+      return Array.from(target);
+    }
+    if (typeof HTMLCollection !== "undefined" && target instanceof HTMLCollection) {
+      return Array.from(target);
+    }
+    return [target];
+  }
+  function splitText(target, options = {}) {
+    const targets = resolveTargets(target);
+    const type = options.type || "chars";
+    const resultSpans = [];
+    targets.forEach((el) => {
+      if (!(el instanceof HTMLElement)) return;
+      const originalText = el.textContent || "";
+      el.innerHTML = "";
+      if (type === "chars") {
+        const chars = originalText.split("");
+        chars.forEach((char) => {
+          if (char === " ") {
+            el.appendChild(document.createTextNode(" "));
+          } else {
+            const span = document.createElement("span");
+            span.className = "fluxo-char";
+            span.style.display = "inline-block";
+            span.textContent = char;
+            el.appendChild(span);
+            resultSpans.push(span);
+          }
+        });
+      } else {
+        const words = originalText.split(" ");
+        words.forEach((word, index) => {
+          if (index > 0) {
+            el.appendChild(document.createTextNode(" "));
+          }
+          const span = document.createElement("span");
+          span.className = "fluxo-word";
+          span.style.display = "inline-block";
+          span.textContent = word;
+          el.appendChild(span);
+          resultSpans.push(span);
+        });
+      }
+    });
+    return resultSpans;
+  }
+  function drawSVG(target, vars) {
+    const targets = resolveTargets(target);
+    const path = targets.length > 0 ? targets[0] : null;
+    if (!path || typeof path.getTotalLength !== "function") {
+      throw new Error(
+        "drawSVG: Target must be a valid SVG element with getTotalLength (such as <path>)"
+      );
+    }
+    const length = path.getTotalLength();
+    path.style.strokeDasharray = String(length);
+    path.style.strokeDashoffset = String(length);
+    return new Tween(path, {
+      strokeDashoffset: 0,
+      ...vars
+    });
+  }
+
+  // src/tween.ts
+  var TRANSFORM_KEYS = /* @__PURE__ */ new Set(["x", "y", "rotation", "scale"]);
+  var RESERVED_KEYS = /* @__PURE__ */ new Set([
+    "duration",
+    "delay",
+    "ease",
+    "autoPlay",
+    "repeat",
+    "alternate",
+    "onStart",
+    "onUpdate",
+    "onComplete",
+    "onRepeat"
+  ]);
+  var Tween = class {
+    target;
+    vars;
+    duration;
+    delay;
+    ease;
+    fromVars;
+    isFrom = false;
+    playhead = 0;
+    reversed = false;
+    started = false;
+    completed = false;
+    repeatCount = 0;
+    propTweens = [];
+    constructor(target, vars, fromVars, isFrom = false) {
+      const resolved = resolveTargets(target);
+      this.target = resolved.length > 0 ? resolved[0] : null;
+      this.vars = vars;
+      this.fromVars = fromVars;
+      this.isFrom = isFrom;
+      this.duration = vars.duration !== void 0 ? vars.duration : 0.5;
+      this.delay = vars.delay !== void 0 ? vars.delay : 0;
+      this.ease = getEasing(vars.ease);
+      this.update = this.update.bind(this);
+      const autoPlay = vars.autoPlay !== false;
+      if (this.target) {
+        if (this.isFrom || this.fromVars) {
+          this.initProperties();
+          this.started = true;
+        }
+        if (autoPlay) {
+          ticker.add(this.update);
+        }
+      }
+    }
+    initProperties() {
+      this.propTweens = [];
+      const isDOM = this.target instanceof HTMLElement || typeof SVGElement !== "undefined" && this.target instanceof SVGElement;
+      let transformState = null;
+      if (isDOM) {
+        transformState = this.getTransformState(this.target);
+      }
+      for (const key in this.vars) {
+        if (RESERVED_KEYS.has(key)) continue;
+        const endValueRaw = this.vars[key];
+        const parsedEnd = this.parseValue(endValueRaw);
+        let currentVal = 0;
+        let unit = parsedEnd.unit;
+        const isTransform = isDOM && TRANSFORM_KEYS.has(key);
+        if (isTransform && transformState) {
+          currentVal = transformState[key];
+        } else if (isDOM) {
+          const computedStyle = window.getComputedStyle(this.target);
+          const styleVal = computedStyle[key] || this.target.style[key];
+          const parsedStart = this.parseValue(styleVal);
+          currentVal = parsedStart.value;
+          if (unit === "" && parsedStart.unit !== "") {
+            unit = parsedStart.unit;
+          }
+        } else {
+          currentVal = typeof this.target[key] === "number" ? this.target[key] : 0;
+        }
+        let startValue = 0;
+        let endValue = 0;
+        if (this.fromVars) {
+          const parsedFrom = this.parseValue(this.fromVars[key]);
+          startValue = parsedFrom.value;
+          endValue = parsedEnd.value;
+          unit = parsedEnd.unit || parsedFrom.unit || unit;
+        } else if (this.isFrom) {
+          startValue = parsedEnd.value;
+          endValue = currentVal;
+        } else {
+          startValue = currentVal;
+          endValue = parsedEnd.value;
+        }
+        this.propTweens.push({
+          key,
+          isTransform,
+          start: startValue,
+          end: endValue,
+          unit
+        });
+        if (this.isFrom || this.fromVars) {
+          if (isTransform && transformState) {
+            transformState[key] = startValue;
+          } else if (isDOM) {
+            this.target.style[key] = startValue + unit;
+          } else {
+            this.target[key] = startValue;
+          }
+        }
+      }
+      if ((this.isFrom || this.fromVars) && transformState && isDOM) {
+        this.applyTransform(this.target, transformState);
+      }
+    }
+    parseValue(val) {
+      if (typeof val === "number") {
+        return { value: val, unit: "" };
+      }
+      const num = parseFloat(val);
+      if (isNaN(num)) {
+        return { value: 0, unit: "" };
+      }
+      const unit = String(val).replace(/^[-\d.]+/, "");
+      return { value: num, unit };
+    }
+    getTransformState(el) {
+      if (!el._fluxoTransform) {
+        el._fluxoTransform = { x: 0, y: 0, rotation: 0, scale: 1 };
+      }
+      return el._fluxoTransform;
+    }
+    applyTransform(el, state) {
+      el.style.transform = `translate3d(${state.x}px, ${state.y}px, 0px) rotate(${state.rotation}deg) scale(${state.scale})`;
+    }
+    play() {
+      this.reversed = false;
+      this.completed = false;
+      const maxTime = this.duration + this.delay;
+      if (this.playhead >= maxTime) {
+        this.playhead = 0;
+        this.repeatCount = 0;
+      }
+      ticker.add(this.update);
+    }
+    reverse() {
+      this.reversed = true;
+      this.completed = false;
+      if (this.playhead <= 0) {
+        this.playhead = this.duration + this.delay;
+        this.repeatCount = 0;
+      }
+      ticker.add(this.update);
+    }
+    pause() {
+      ticker.remove(this.update);
+    }
+    render(time) {
+      let progress = 0;
+      if (time >= this.delay) {
+        const activeTime = time - this.delay;
+        progress = this.duration > 0 ? activeTime / this.duration : 1;
+        if (progress > 1) progress = 1;
+      }
+      if (!this.started && time >= this.delay) {
+        this.started = true;
+        this.initProperties();
+        if (this.vars.onStart) {
+          this.vars.onStart();
+        }
+      }
+      const easedProgress = this.ease(progress);
+      let hasTransform = false;
+      const transformState = this.target instanceof HTMLElement || typeof SVGElement !== "undefined" && this.target instanceof SVGElement ? this.getTransformState(this.target) : null;
+      for (const pt of this.propTweens) {
+        const currentVal = pt.start + (pt.end - pt.start) * easedProgress;
+        if (pt.isTransform && transformState) {
+          transformState[pt.key] = currentVal;
+          hasTransform = true;
+        } else if (this.target.style !== void 0) {
+          this.target.style[pt.key] = currentVal + pt.unit;
+        } else {
+          this.target[pt.key] = currentVal;
+        }
+      }
+      if (hasTransform && transformState) {
+        this.applyTransform(this.target, transformState);
+      }
+      if (this.vars.onUpdate) {
+        this.vars.onUpdate();
+      }
+    }
+    update(totalTime, dt) {
+      if (this.completed) return;
+      this.playhead += this.reversed ? -dt : dt;
+      const maxTime = this.duration + this.delay;
+      const repeatOption = this.vars.repeat !== void 0 ? this.vars.repeat : 0;
+      const alternateOption = this.vars.alternate === true;
+      if (this.reversed) {
+        if (this.playhead <= this.delay) {
+          if (repeatOption === -1 || this.repeatCount < repeatOption) {
+            this.repeatCount++;
+            if (this.vars.onRepeat) {
+              this.vars.onRepeat();
+            }
+            if (alternateOption) {
+              this.reversed = false;
+              this.playhead = this.delay;
+            } else {
+              this.playhead = maxTime;
+            }
+          } else {
+            this.playhead = 0;
+            this.completed = true;
+          }
+        }
+      } else {
+        if (this.playhead >= maxTime) {
+          if (repeatOption === -1 || this.repeatCount < repeatOption) {
+            this.repeatCount++;
+            if (this.vars.onRepeat) {
+              this.vars.onRepeat();
+            }
+            if (alternateOption) {
+              this.reversed = true;
+              this.playhead = maxTime;
+            } else {
+              this.playhead = this.delay;
+            }
+          } else {
+            this.playhead = maxTime;
+            this.completed = true;
+          }
+        }
+      }
+      this.render(this.playhead);
+      if (this.completed) {
+        ticker.remove(this.update);
+        if (this.vars.onComplete) {
+          this.vars.onComplete();
+        }
+      }
+    }
+    kill() {
+      ticker.remove(this.update);
+    }
+  };
+
+  // src/timeline.ts
+  var Timeline = class {
+    children = [];
+    vars;
+    duration = 0;
+    delay;
+    playhead = 0;
+    reversed = false;
+    started = false;
+    completed = false;
+    isPlaying = false;
+    repeatCount = 0;
+    constructor(vars = {}) {
+      this.vars = vars;
+      this.delay = vars.delay !== void 0 ? vars.delay : 0;
+      this.update = this.update.bind(this);
+      if (!vars.paused) {
+        this.play();
+      }
+    }
+    /**
+     * Adds an existing, externally created Tween instance to this timeline.
+     * Useful for inserting custom tweens like fluxo.drawSVG().
+     *
+     * @param tween The Tween instance to add.
+     * @param position Optional position key (number, relative offset like "+=0.5", or alignment like "<").
+     */
+    add(tween, position) {
+      tween.pause();
+      const baseTime = this.parsePosition(position);
+      this.addTween(tween, baseTime);
+      return this;
+    }
+    /**
+     * Adds .to() tweens to the timeline.
+     */
+    to(target, vars, position) {
+      const targets = resolveTargets(target);
+      const baseTime = this.parsePosition(position);
+      const stagger = vars.stagger || 0;
+      const tweenVars = { ...vars };
+      delete tweenVars.stagger;
+      targets.forEach((t, i) => {
+        const tween = new Tween(t, { ...tweenVars, autoPlay: false });
+        this.addTween(tween, baseTime + i * stagger);
+      });
+      return this;
+    }
+    /**
+     * Adds .from() tweens to the timeline.
+     */
+    from(target, vars, position) {
+      const targets = resolveTargets(target);
+      const baseTime = this.parsePosition(position);
+      const stagger = vars.stagger || 0;
+      const tweenVars = { ...vars };
+      delete tweenVars.stagger;
+      targets.forEach((t, i) => {
+        const tween = new Tween(
+          t,
+          { ...tweenVars, autoPlay: false },
+          void 0,
+          true
+        );
+        this.addTween(tween, baseTime + i * stagger);
+      });
+      return this;
+    }
+    /**
+     * Adds .fromTo() tweens to the timeline.
+     */
+    fromTo(target, fromVars, toVars, position) {
+      const targets = resolveTargets(target);
+      const baseTime = this.parsePosition(position);
+      const stagger = toVars.stagger || 0;
+      const tweenVars = { ...toVars };
+      delete tweenVars.stagger;
+      targets.forEach((t, i) => {
+        const tween = new Tween(t, { ...tweenVars, autoPlay: false }, fromVars);
+        this.addTween(tween, baseTime + i * stagger);
+      });
+      return this;
+    }
+    play() {
+      this.reversed = false;
+      this.completed = false;
+      const maxTime = this.duration + this.delay;
+      if (this.playhead >= maxTime) {
+        this.playhead = 0;
+        this.repeatCount = 0;
+      }
+      this.isPlaying = true;
+      ticker.add(this.update);
+    }
+    reverse() {
+      this.reversed = true;
+      this.completed = false;
+      if (this.playhead <= 0) {
+        this.playhead = this.duration + this.delay;
+        this.repeatCount = 0;
+      }
+      this.isPlaying = true;
+      ticker.add(this.update);
+    }
+    pause() {
+      if (!this.isPlaying) return;
+      this.isPlaying = false;
+      ticker.remove(this.update);
+    }
+    kill() {
+      this.isPlaying = false;
+      ticker.remove(this.update);
+      for (const child of this.children) {
+        child.tween.kill();
+      }
+    }
+    parsePosition(position) {
+      let startTime = this.duration;
+      const prevChild = this.children[this.children.length - 1];
+      if (position !== void 0) {
+        if (typeof position === "number") {
+          startTime = position;
+        } else if (typeof position === "string") {
+          if (position.startsWith("+=")) {
+            const val = parseFloat(position.slice(2));
+            startTime = this.duration + (isNaN(val) ? 0 : val);
+          } else if (position.startsWith("-=")) {
+            const val = parseFloat(position.slice(2));
+            startTime = this.duration - (isNaN(val) ? 0 : val);
+          } else if (position === "<") {
+            startTime = prevChild ? prevChild.startTime : 0;
+          } else if (position.startsWith("<")) {
+            const offsetStr = position.slice(1);
+            const baseTime = prevChild ? prevChild.startTime : 0;
+            if (offsetStr.startsWith("+=")) {
+              const val = parseFloat(offsetStr.slice(2));
+              startTime = baseTime + (isNaN(val) ? 0 : val);
+            } else if (offsetStr.startsWith("-=")) {
+              const val = parseFloat(offsetStr.slice(2));
+              startTime = baseTime - (isNaN(val) ? 0 : val);
+            }
+          }
+        }
+      }
+      return startTime;
+    }
+    addTween(tween, startTime) {
+      const tweenDuration = tween.duration + tween.delay;
+      const endTime = startTime + tweenDuration;
+      this.children.push({
+        tween,
+        startTime,
+        endTime
+      });
+      this.duration = Math.max(this.duration, endTime);
+    }
+    render(time) {
+      let activeTime = 0;
+      if (time >= this.delay) {
+        activeTime = time - this.delay;
+      }
+      if (!this.started && time >= this.delay) {
+        this.started = true;
+        if (this.vars.onStart) {
+          this.vars.onStart();
+        }
+      }
+      for (const child of this.children) {
+        const localTime = activeTime - child.startTime;
+        child.tween.render(localTime);
+      }
+      if (this.vars.onUpdate) {
+        this.vars.onUpdate();
+      }
+    }
+    update(totalTime, dt) {
+      if (this.completed) return;
+      this.playhead += this.reversed ? -dt : dt;
+      const maxTime = this.duration + this.delay;
+      const repeatOption = this.vars.repeat !== void 0 ? this.vars.repeat : 0;
+      const alternateOption = this.vars.alternate === true;
+      if (this.reversed) {
+        if (this.playhead <= this.delay) {
+          if (repeatOption === -1 || this.repeatCount < repeatOption) {
+            this.repeatCount++;
+            if (this.vars.onRepeat) {
+              this.vars.onRepeat();
+            }
+            if (alternateOption) {
+              this.reversed = false;
+              this.playhead = this.delay;
+            } else {
+              this.playhead = maxTime;
+            }
+          } else {
+            this.playhead = 0;
+            this.completed = true;
+          }
+        }
+      } else {
+        if (this.playhead >= maxTime) {
+          if (repeatOption === -1 || this.repeatCount < repeatOption) {
+            this.repeatCount++;
+            if (this.vars.onRepeat) {
+              this.vars.onRepeat();
+            }
+            if (alternateOption) {
+              this.reversed = true;
+              this.playhead = maxTime;
+            } else {
+              this.playhead = this.delay;
+            }
+          } else {
+            this.playhead = maxTime;
+            this.completed = true;
+          }
+        }
+      }
+      this.render(this.playhead);
+      if (this.completed) {
+        this.isPlaying = false;
+        ticker.remove(this.update);
+        if (this.vars.onComplete) {
+          this.vars.onComplete();
+        }
+      }
+    }
+  };
+
+  // src/scrollTrigger.ts
+  var ScrollTrigger = class _ScrollTrigger {
+    static instances = [];
+    animation;
+    triggerEl;
+    vars;
+    startScroll = 0;
+    endScroll = 0;
+    hasTriggered = false;
+    constructor(animation, vars) {
+      this.animation = animation;
+      this.vars = vars;
+      _ScrollTrigger.instances.push(this);
+      const resolved = resolveTargets(vars.trigger);
+      if (resolved.length === 0) {
+        throw new Error(
+          `ScrollTrigger: Target trigger element not found for "${vars.trigger}"`
+        );
+      }
+      this.triggerEl = resolved[0];
+      this.onScroll = this.onScroll.bind(this);
+      this.refresh = this.refresh.bind(this);
+      this.refresh();
+      window.addEventListener("scroll", this.onScroll, { passive: true });
+      window.addEventListener("resize", this.refresh, { passive: true });
+      this.onScroll();
+    }
+    refresh() {
+      const rect = this.triggerEl.getBoundingClientRect();
+      const docScrollY = window.scrollY;
+      const elTop = rect.top + docScrollY;
+      const elHeight = rect.height;
+      const startStr = this.vars.start || "top bottom";
+      this.startScroll = this.calculateScrollPos(
+        startStr,
+        elTop,
+        elHeight,
+        "top",
+        "bottom"
+      );
+      const endStr = this.vars.end || "bottom top";
+      this.endScroll = this.calculateScrollPos(
+        endStr,
+        elTop,
+        elHeight,
+        "bottom",
+        "top"
+      );
+      if (this.endScroll <= this.startScroll) {
+        this.endScroll = this.startScroll + 1;
+      }
+    }
+    calculateScrollPos(posStr, elTop, elHeight, defaultElPart, defaultVPart) {
+      const parts = posStr.split(" ");
+      const elPart = parts[0] || defaultElPart;
+      const vPart = parts[1] || defaultVPart;
+      let elOffset = 0;
+      if (elPart === "top") elOffset = 0;
+      else if (elPart === "center") elOffset = elHeight / 2;
+      else if (elPart === "bottom") elOffset = elHeight;
+      else if (elPart.endsWith("%")) {
+        elOffset = parseFloat(elPart) / 100 * elHeight;
+      } else {
+        elOffset = parseFloat(elPart) || 0;
+      }
+      let vOffset = 0;
+      const vh = window.innerHeight;
+      if (vPart === "top") vOffset = 0;
+      else if (vPart === "center") vOffset = vh / 2;
+      else if (vPart === "bottom") vOffset = vh;
+      else if (vPart.endsWith("%")) {
+        vOffset = parseFloat(vPart) / 100 * vh;
+      } else {
+        vOffset = parseFloat(vPart) || 0;
+      }
+      return elTop + elOffset - vOffset;
+    }
+    onScroll() {
+      const scrollY = window.scrollY;
+      if (this.vars.scrub) {
+        let progress = (scrollY - this.startScroll) / (this.endScroll - this.startScroll);
+        progress = Math.max(0, Math.min(1, progress));
+        const totalDuration = this.animation.duration + this.animation.delay;
+        this.animation.render(progress * totalDuration);
+      } else {
+        if (scrollY >= this.startScroll) {
+          if (!this.hasTriggered) {
+            this.hasTriggered = true;
+            this.animation.play();
+            if (this.vars.once) {
+              this.kill();
+            }
+          }
+        } else {
+          if (!this.vars.once && this.hasTriggered) {
+            this.hasTriggered = false;
+            this.animation.pause();
+            this.animation.render(0);
+          }
+        }
+      }
+    }
+    kill() {
+      window.removeEventListener("scroll", this.onScroll);
+      window.removeEventListener("resize", this.refresh);
+      const idx = _ScrollTrigger.instances.indexOf(this);
+      if (idx !== -1) {
+        _ScrollTrigger.instances.splice(idx, 1);
+      }
+    }
+    static killAll() {
+      const list = [..._ScrollTrigger.instances];
+      list.forEach((instance) => instance.kill());
+      _ScrollTrigger.instances = [];
+    }
+  };
+
+  // src/effects.ts
+  function slidingMenu(containerSelector, linksSelector, pillSelector, options = {}) {
+    const container = resolveTargets(containerSelector)[0];
+    const pill = resolveTargets(pillSelector)[0];
+    const links = container ? Array.from(container.querySelectorAll(linksSelector)) : [];
+    if (!container || !pill || links.length === 0) return;
+    const duration = options.duration !== void 0 ? options.duration : 0.35;
+    const ease = options.ease || "veryFast.out";
+    const movePill = (linkEl) => {
+      const rect = linkEl.getBoundingClientRect();
+      const parentRect = container.getBoundingClientRect();
+      const targetLeft = rect.left - parentRect.left;
+      const targetWidth = rect.width;
+      const targetTop = rect.top - parentRect.top;
+      const targetHeight = rect.height;
+      new Tween(pill, {
+        left: targetLeft,
+        width: targetWidth,
+        top: targetTop,
+        height: targetHeight,
+        opacity: 1,
+        duration,
+        ease,
+        autoPlay: true
+      });
+    };
+    links.forEach((link) => {
+      if (!(link instanceof HTMLElement)) return;
+      link.addEventListener("mouseenter", () => movePill(link), {
+        passive: true
+      });
+    });
+    container.addEventListener(
+      "mouseleave",
+      () => {
+        new Tween(pill, {
+          opacity: 0,
+          duration: 0.3,
+          ease: "medium.out",
+          autoPlay: true
+        });
+      },
+      { passive: true }
+    );
+  }
+  function magnetic(target, options = {}) {
+    const resolved = resolveTargets(target);
+    const strength = options.strength !== void 0 ? options.strength : 0.45;
+    const proximity = options.proximity !== void 0 ? options.proximity : 100;
+    const duration = options.duration !== void 0 ? options.duration : 0.3;
+    const ease = options.ease || "veryFast.out";
+    resolved.forEach((el) => {
+      if (!(el instanceof HTMLElement)) return;
+      let isInside = false;
+      const onMouseMove = (e) => {
+        const rect = el.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        const deltaX = e.clientX - centerX;
+        const deltaY = e.clientY - centerY;
+        const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+        if (distance < proximity) {
+          isInside = true;
+          new Tween(el, {
+            x: deltaX * strength,
+            y: deltaY * strength,
+            duration,
+            ease,
+            autoPlay: true
+          });
+        } else if (isInside) {
+          isInside = false;
+          new Tween(el, {
+            x: 0,
+            y: 0,
+            duration: 0.6,
+            ease: "medium.out",
+            autoPlay: true
+          });
+        }
+      };
+      window.addEventListener("mousemove", onMouseMove, { passive: true });
+    });
+  }
+  function tilt(target, options = {}) {
+    const resolved = resolveTargets(target);
+    const maxTilt = options.maxTilt !== void 0 ? options.maxTilt : 25;
+    const perspective = options.perspective !== void 0 ? options.perspective : 800;
+    const duration = options.duration !== void 0 ? options.duration : 0.2;
+    const ease = options.ease || "veryFast.out";
+    resolved.forEach((el) => {
+      if (!(el instanceof HTMLElement)) return;
+      const onMouseMove = (e) => {
+        const rect = el.getBoundingClientRect();
+        const mouseX = e.clientX - rect.left;
+        const mouseY = e.clientY - rect.top;
+        const pctX = mouseX / rect.width * 100;
+        const pctY = mouseY / rect.height * 100;
+        el.style.setProperty("--mouse-x", `${pctX}%`);
+        el.style.setProperty("--mouse-y", `${pctY}%`);
+        const tiltX = (mouseY / rect.height - 0.5) * -maxTilt;
+        const tiltY = (mouseX / rect.width - 0.5) * maxTilt;
+        new Tween(el, {
+          transform: `perspective(${perspective}px) rotateX(${tiltX}deg) rotateY(${tiltY}deg)`,
+          duration,
+          ease,
+          autoPlay: true
+        });
+      };
+      const onMouseLeave = () => {
+        new Tween(el, {
+          transform: `perspective(${perspective}px) rotateX(0deg) rotateY(0deg)`,
+          duration: 0.6,
+          ease: "medium.out",
+          autoPlay: true
+        });
+        el.style.setProperty("--mouse-x", "50%");
+        el.style.setProperty("--mouse-y", "50%");
+      };
+      el.addEventListener("mousemove", onMouseMove, { passive: true });
+      el.addEventListener("mouseleave", onMouseLeave, { passive: true });
+    });
+  }
+  function explodeOnScroll(target, options = {}) {
+    const resolved = resolveTargets(target);
+    const strength = options.strength !== void 0 ? options.strength : 1;
+    const start = options.start || "top 70%";
+    const end = options.end || "top 20%";
+    const ease = options.ease || "medium.out";
+    resolved.forEach((el) => {
+      const chars = splitText(el, { type: "chars" });
+      const tl = new Timeline({ paused: true });
+      chars.forEach((char) => {
+        const targetX = (Math.random() - 0.5) * 600 * strength;
+        const targetY = (Math.random() - 0.5) * 500 * strength;
+        const targetRot = (Math.random() - 0.5) * 360;
+        const targetScale = 0.1 + Math.random() * 2.2;
+        const tween = new Tween(char, {
+          x: targetX,
+          y: targetY,
+          rotation: targetRot,
+          scale: targetScale,
+          opacity: 0,
+          duration: 1,
+          ease,
+          autoPlay: false
+        });
+        tl.add(tween, 0);
+      });
+      new ScrollTrigger(tl, {
+        trigger: el,
+        start,
+        end,
+        scrub: true
+      });
+    });
+  }
+  function implodeOnScroll(target, options = {}) {
+    const resolved = resolveTargets(target);
+    const strength = options.strength !== void 0 ? options.strength : 1;
+    const start = options.start || "top 95%";
+    const end = options.end || "top 50%";
+    const ease = options.ease || "medium.out";
+    resolved.forEach((el) => {
+      const chars = splitText(el, { type: "chars" });
+      const tl = new Timeline({ paused: true });
+      chars.forEach((char) => {
+        const startX = (Math.random() - 0.5) * 700 * strength;
+        const startY = (Math.random() - 0.5) * 600 * strength;
+        const startRot = (Math.random() - 0.5) * 360;
+        const startScale = 0.1 + Math.random() * 2.5;
+        const tween = new Tween(
+          char,
+          {
+            x: 0,
+            y: 0,
+            rotation: 0,
+            scale: 1,
+            opacity: 1,
+            duration: 1,
+            ease,
+            autoPlay: false
+          },
+          {
+            x: startX,
+            y: startY,
+            rotation: startRot,
+            scale: startScale,
+            opacity: 0
+          }
+        );
+        tl.add(tween, 0);
+      });
+      new ScrollTrigger(tl, {
+        trigger: el,
+        start,
+        end,
+        scrub: true
+      });
+    });
+  }
+  function revealText(target, options = {}) {
+    const type = options.type || "chars";
+    const stagger = options.stagger !== void 0 ? options.stagger : type === "chars" ? 0.03 : 0.12;
+    const duration = options.duration !== void 0 ? options.duration : 0.8;
+    const ease = options.ease || "veryFast.out";
+    const delay = options.delay !== void 0 ? options.delay : 0;
+    const resolved = resolveTargets(target);
+    resolved.forEach((el) => {
+      const spans = splitText(el, { type });
+      const tl = new Timeline({ delay, paused: true });
+      spans.forEach((span, i) => {
+        const tween = new Tween(
+          span,
+          {
+            opacity: 1,
+            y: 0,
+            scale: 1,
+            rotation: 0,
+            duration,
+            ease,
+            autoPlay: false
+          },
+          {
+            opacity: 0,
+            y: 40,
+            scale: 0.5,
+            rotation: 15
+          }
+        );
+        tl.add(tween, i * stagger);
+      });
+      tl.play();
+    });
+  }
+  function scrollReveal(target, options = {}) {
+    const resolved = resolveTargets(target);
+    const stagger = options.stagger !== void 0 ? options.stagger : 0.1;
+    const y = options.y !== void 0 ? options.y : 50;
+    const duration = options.duration !== void 0 ? options.duration : 0.8;
+    const ease = options.ease || "medium.out";
+    const start = options.start || "top 85%";
+    const once = options.once !== false;
+    if (resolved.length === 0) return;
+    const tl = new Timeline({ paused: true });
+    resolved.forEach((el, i) => {
+      const tween = new Tween(
+        el,
+        {
+          opacity: 1,
+          y: 0,
+          duration,
+          ease,
+          autoPlay: false
+        },
+        {
+          opacity: 0,
+          y
+        }
+      );
+      tl.add(tween, i * stagger);
+    });
+    new ScrollTrigger(tl, {
+      trigger: resolved[0],
+      start,
+      once
+    });
+  }
+
+  // src/index.ts
+  var fluxo = {
+    /**
+     * Creates an animation that goes FROM the current values of the target
+     * TO the values defined in 'vars'. Supports multiple targets, stagger, and scroll animator.
+     */
+    to(target, vars) {
+      const targets = resolveTargets(target);
+      const hasScroll = vars.scroll !== void 0;
+      const varsWithAutoPlay = { ...vars };
+      if (hasScroll) {
+        varsWithAutoPlay.autoPlay = false;
+      }
+      let animation;
+      if (targets.length === 0) {
+        animation = new Tween(null, varsWithAutoPlay);
+      } else if (targets.length === 1) {
+        animation = new Tween(targets[0], varsWithAutoPlay);
+      } else {
+        const tl = new Timeline({
+          delay: varsWithAutoPlay.delay,
+          onStart: varsWithAutoPlay.onStart,
+          onUpdate: varsWithAutoPlay.onUpdate,
+          onComplete: varsWithAutoPlay.onComplete,
+          paused: true
+        });
+        const stagger = varsWithAutoPlay.stagger || 0;
+        const tweenVars = { ...varsWithAutoPlay };
+        delete tweenVars.delay;
+        delete tweenVars.onStart;
+        delete tweenVars.onUpdate;
+        delete tweenVars.onComplete;
+        delete tweenVars.stagger;
+        delete tweenVars.scroll;
+        targets.forEach((t, i) => {
+          tl.to(t, tweenVars, i * stagger);
+        });
+        if (!hasScroll) {
+          tl.play();
+        }
+        animation = tl;
+      }
+      if (hasScroll && vars.scroll) {
+        new ScrollTrigger(animation, vars.scroll);
+      }
+      return animation;
+    },
+    /**
+     * Creates an animation that goes FROM the values defined in 'vars'
+     * TO the current values of the target. Supports multiple targets, stagger, and scroll animator.
+     */
+    from(target, vars) {
+      const targets = resolveTargets(target);
+      const hasScroll = vars.scroll !== void 0;
+      const varsWithAutoPlay = { ...vars };
+      if (hasScroll) {
+        varsWithAutoPlay.autoPlay = false;
+      }
+      let animation;
+      if (targets.length === 0) {
+        animation = new Tween(null, varsWithAutoPlay, void 0, true);
+      } else if (targets.length === 1) {
+        animation = new Tween(targets[0], varsWithAutoPlay, void 0, true);
+      } else {
+        const tl = new Timeline({
+          delay: varsWithAutoPlay.delay,
+          onStart: varsWithAutoPlay.onStart,
+          onUpdate: varsWithAutoPlay.onUpdate,
+          onComplete: varsWithAutoPlay.onComplete,
+          paused: true
+        });
+        const stagger = varsWithAutoPlay.stagger || 0;
+        const tweenVars = { ...varsWithAutoPlay };
+        delete tweenVars.delay;
+        delete tweenVars.onStart;
+        delete tweenVars.onUpdate;
+        delete tweenVars.onComplete;
+        delete tweenVars.stagger;
+        delete tweenVars.scroll;
+        targets.forEach((t, i) => {
+          tl.from(t, tweenVars, i * stagger);
+        });
+        if (!hasScroll) {
+          tl.play();
+        }
+        animation = tl;
+      }
+      if (hasScroll && vars.scroll) {
+        new ScrollTrigger(animation, vars.scroll);
+      }
+      return animation;
+    },
+    /**
+     * Creates an animation that goes FROM the values defined in 'fromVars'
+     * TO the values defined in 'toVars'. Supports multiple targets, stagger, and scroll animator.
+     */
+    fromTo(target, fromVars, toVars) {
+      const targets = resolveTargets(target);
+      const hasScroll = toVars.scroll !== void 0;
+      const toVarsWithAutoPlay = { ...toVars };
+      if (hasScroll) {
+        toVarsWithAutoPlay.autoPlay = false;
+      }
+      let animation;
+      if (targets.length === 0) {
+        animation = new Tween(null, toVarsWithAutoPlay, fromVars);
+      } else if (targets.length === 1) {
+        animation = new Tween(targets[0], toVarsWithAutoPlay, fromVars);
+      } else {
+        const tl = new Timeline({
+          delay: toVarsWithAutoPlay.delay,
+          onStart: toVarsWithAutoPlay.onStart,
+          onUpdate: toVarsWithAutoPlay.onUpdate,
+          onComplete: toVarsWithAutoPlay.onComplete,
+          paused: true
+        });
+        const stagger = toVarsWithAutoPlay.stagger || 0;
+        const tweenVars = { ...toVarsWithAutoPlay };
+        delete tweenVars.delay;
+        delete tweenVars.onStart;
+        delete tweenVars.onUpdate;
+        delete tweenVars.onComplete;
+        delete tweenVars.stagger;
+        delete tweenVars.scroll;
+        targets.forEach((t, i) => {
+          tl.fromTo(t, fromVars, tweenVars, i * stagger);
+        });
+        if (!hasScroll) {
+          tl.play();
+        }
+        animation = tl;
+      }
+      if (hasScroll && toVars.scroll) {
+        new ScrollTrigger(animation, toVars.scroll);
+      }
+      return animation;
+    },
+    /**
+     * Creates a new Timeline instance for sequencing multiple animations.
+     */
+    timeline(vars) {
+      const hasScroll = vars?.scroll !== void 0;
+      const timelineVars = { ...vars };
+      if (hasScroll) {
+        timelineVars.paused = true;
+      }
+      const tl = new Timeline(timelineVars);
+      if (hasScroll && vars?.scroll) {
+        new ScrollTrigger(tl, vars.scroll);
+      }
+      return tl;
+    },
+    /**
+     * Splits text of DOM elements into individual character or word spans,
+     * making them ready for cascaded stagger animations.
+     */
+    splitText(target, options) {
+      return splitText(target, options);
+    },
+    /**
+     * Animates the outline drawing of SVG paths.
+     */
+    drawSVG(target, vars) {
+      const hasScroll = vars.scroll !== void 0;
+      const varsWithAutoPlay = { ...vars };
+      if (hasScroll) {
+        varsWithAutoPlay.autoPlay = false;
+      }
+      const tween = drawSVG(target, varsWithAutoPlay);
+      if (hasScroll && vars.scroll) {
+        new ScrollTrigger(tween, vars.scroll);
+      }
+      return tween;
+    },
+    magnetic(target, options) {
+      magnetic(target, options);
+    },
+    tilt(target, options) {
+      tilt(target, options);
+    },
+    explodeOnScroll(target, options) {
+      explodeOnScroll(target, options);
+    },
+    implodeOnScroll(target, options) {
+      implodeOnScroll(target, options);
+    },
+    revealText(target, options) {
+      revealText(target, options);
+    },
+    scrollReveal(target, options) {
+      scrollReveal(target, options);
+    },
+    slidingMenu(container, links, pill, options) {
+      slidingMenu(container, links, pill, options);
+    },
+    killAllTriggers() {
+      ScrollTrigger.killAll();
+    }
+  };
+  return __toCommonJS(index_exports);
+})();