@brandonsoccer22/gsap-editorial-carousel 0.1.3 → 0.1.4

package/README.md

@@ -153,17 +153,22 @@ registerAnimation("split-lines-exit", splitLinesExit);
 
 createCarousel("[data-carousel]", {
   gsap,
-  transition: { overlap: 0.05 }
+  transition: { overlap: 0.05, exitOverlap: 0.05 }
 });
 ```
 
+`transition.exitOverlap` controls how much the enter timeline overlaps the exit timeline; defaults to `transition.overlap`.
+
 ## Data attributes reference
 - `data-seq="1"` sequence group (integer, default 1)
 - `data-exit-seq="1"` exit sequence group (integer, defaults to `data-seq`)
 - `data-dur="0.6"` duration in seconds (default from options)
 - `data-delay="0"` delay in seconds (default 0)
+- `data-exit-dur="0.6"` exit duration in seconds (defaults to `data-dur`)
+- `data-exit-delay="0"` exit delay in seconds (defaults to `data-delay`)
 - `data-at="-=0.4"` position offset in seconds for this element within its sequence; supports `+=`/`-=` or a plain number
 - `data-ease="power2.out"` GSAP ease string
+- `data-exit-ease="power2.out"` exit ease string (defaults to `data-ease`)
 - `data-exit="fade-in"` explicit exit animation name
 
 ## Reduced motion

package/dist/index.cjs

@@ -57,6 +57,11 @@ function setSlidesState(slides, activeIndex, activeClass) {
   slides.forEach((slide, index) => {
     const isActive = index === activeIndex;
     slide.setAttribute("aria-hidden", isActive ? "false" : "true");
+    if (isActive) {
+      slide.removeAttribute("inert");
+    } else {
+      slide.setAttribute("inert", "");
+    }
     toggleClass(slide, activeClass, isActive);
   });
 }
@@ -141,6 +146,7 @@ function ensureDefaultAnimationsRegistered() {
       },
       opts.at
     );
+    tl.set(el, { autoAlpha: 0 }, ">");
   };
   const fadeUp = ({ el, gsap: gsap3, opts, tl }) => {
     tl.fromTo(
@@ -168,6 +174,35 @@ function ensureDefaultAnimationsRegistered() {
       },
       opts.at
     );
+    tl.set(el, { autoAlpha: 0 }, ">");
+  };
+  const fadeDown = ({ el, gsap: gsap3, opts, tl }) => {
+    tl.fromTo(
+      el,
+      { autoAlpha: 0, y: -24 },
+      {
+        autoAlpha: 1,
+        y: 0,
+        duration: opts.dur,
+        delay: opts.delay,
+        ease: opts.ease
+      },
+      opts.at
+    );
+  };
+  fadeDown.reverse = ({ el, gsap: gsap3, opts, tl }) => {
+    tl.to(
+      el,
+      {
+        autoAlpha: 0,
+        y: 12,
+        duration: opts.dur,
+        delay: opts.delay,
+        ease: opts.ease
+      },
+      opts.at
+    );
+    tl.set(el, { autoAlpha: 0 }, ">");
   };
   const slideIn = ({ el, gsap: gsap3, opts, tl }) => {
     tl.fromTo(
@@ -195,16 +230,303 @@ function ensureDefaultAnimationsRegistered() {
       },
       opts.at
     );
+    tl.set(el, { autoAlpha: 0 }, ">");
+  };
+  const fadeOut = ({ el, gsap: gsap3, opts, tl }) => {
+    tl.to(
+      el,
+      {
+        autoAlpha: 0,
+        duration: opts.dur,
+        delay: opts.delay,
+        ease: opts.ease
+      },
+      opts.at
+    );
+    tl.set(el, { autoAlpha: 0 }, ">");
+  };
+  fadeOut.reverse = ({ el, gsap: gsap3, opts, tl }) => {
+    tl.to(
+      el,
+      {
+        autoAlpha: 1,
+        duration: opts.dur,
+        delay: opts.delay,
+        ease: opts.ease
+      },
+      opts.at
+    );
+  };
+  const slideOut = ({ el, gsap: gsap3, opts, tl }) => {
+    tl.to(
+      el,
+      {
+        autoAlpha: 0,
+        x: opts.direction * -24,
+        duration: opts.dur,
+        delay: opts.delay,
+        ease: opts.ease
+      },
+      opts.at
+    );
+    tl.set(el, { autoAlpha: 0 }, ">");
+  };
+  slideOut.reverse = ({ el, gsap: gsap3, opts, tl }) => {
+    tl.to(
+      el,
+      {
+        autoAlpha: 1,
+        x: 0,
+        duration: opts.dur,
+        delay: opts.delay,
+        ease: opts.ease
+      },
+      opts.at
+    );
   };
   registerAnimations({
     "fade-in": fadeIn,
+    "fade-down": fadeDown,
+    "fade-down-in": fadeDownIn,
+    "fade-down-out": fadeDownOut,
+    "fade-out": fadeOut,
     "fade-up": fadeUp,
-    "slide-in": slideIn
+    "fade-up-in": fadeUpIn,
+    "fade-up-out": fadeUpOut,
+    "fade-start-in": fadeStartIn,
+    "fade-start-out": fadeStartOut,
+    "fade-end-in": fadeEndIn,
+    "fade-end-out": fadeEndOut,
+    "slide-in": slideIn,
+    "slide-out": slideOut
   });
 }
+var fadeUpIn = ({ el, gsap: gsap3, opts, tl }) => {
+  tl.fromTo(
+    el,
+    { autoAlpha: 0, y: 24 },
+    {
+      autoAlpha: 1,
+      y: 0,
+      duration: opts.dur,
+      delay: opts.delay,
+      ease: opts.ease
+    },
+    opts.at
+  );
+};
+fadeUpIn.reverse = ({ el, gsap: gsap3, opts, tl }) => {
+  tl.to(
+    el,
+    {
+      autoAlpha: 0,
+      y: -12,
+      duration: opts.dur,
+      delay: opts.delay,
+      ease: opts.ease
+    },
+    opts.at
+  );
+  tl.set(el, { autoAlpha: 0 }, ">");
+};
+var fadeUpOut = ({ el, gsap: gsap3, opts, tl }) => {
+  tl.to(
+    el,
+    {
+      autoAlpha: 0,
+      y: -12,
+      duration: opts.dur,
+      delay: opts.delay,
+      ease: opts.ease
+    },
+    opts.at
+  );
+  tl.set(el, { autoAlpha: 0 }, ">");
+};
+fadeUpOut.reverse = ({ el, gsap: gsap3, opts, tl }) => {
+  tl.fromTo(
+    el,
+    { autoAlpha: 0, y: 24 },
+    {
+      autoAlpha: 1,
+      y: 0,
+      duration: opts.dur,
+      delay: opts.delay,
+      ease: opts.ease
+    },
+    opts.at
+  );
+};
+var fadeDownIn = ({ el, gsap: gsap3, opts, tl }) => {
+  tl.fromTo(
+    el,
+    { autoAlpha: 0, y: -24 },
+    {
+      autoAlpha: 1,
+      y: 0,
+      duration: opts.dur,
+      delay: opts.delay,
+      ease: opts.ease
+    },
+    opts.at
+  );
+};
+fadeDownIn.reverse = ({ el, gsap: gsap3, opts, tl }) => {
+  tl.to(
+    el,
+    {
+      autoAlpha: 0,
+      y: 12,
+      duration: opts.dur,
+      delay: opts.delay,
+      ease: opts.ease
+    },
+    opts.at
+  );
+  tl.set(el, { autoAlpha: 0 }, ">");
+};
+var fadeDownOut = ({ el, gsap: gsap3, opts, tl }) => {
+  tl.to(
+    el,
+    {
+      autoAlpha: 0,
+      y: 12,
+      duration: opts.dur,
+      delay: opts.delay,
+      ease: opts.ease
+    },
+    opts.at
+  );
+  tl.set(el, { autoAlpha: 0 }, ">");
+};
+fadeDownOut.reverse = ({ el, gsap: gsap3, opts, tl }) => {
+  tl.fromTo(
+    el,
+    { autoAlpha: 0, y: -24 },
+    {
+      autoAlpha: 1,
+      y: 0,
+      duration: opts.dur,
+      delay: opts.delay,
+      ease: opts.ease
+    },
+    opts.at
+  );
+};
+var fadeStartIn = ({ el, gsap: gsap3, opts, tl }) => {
+  tl.fromTo(
+    el,
+    { autoAlpha: 0, x: -24 },
+    {
+      autoAlpha: 1,
+      x: 0,
+      duration: opts.dur,
+      delay: opts.delay,
+      ease: opts.ease
+    },
+    opts.at
+  );
+};
+fadeStartIn.reverse = ({ el, gsap: gsap3, opts, tl }) => {
+  tl.to(
+    el,
+    {
+      autoAlpha: 0,
+      x: -12,
+      duration: opts.dur,
+      delay: opts.delay,
+      ease: opts.ease
+    },
+    opts.at
+  );
+  tl.set(el, { autoAlpha: 0 }, ">");
+};
+var fadeStartOut = ({ el, gsap: gsap3, opts, tl }) => {
+  tl.to(
+    el,
+    {
+      autoAlpha: 0,
+      x: -12,
+      duration: opts.dur,
+      delay: opts.delay,
+      ease: opts.ease
+    },
+    opts.at
+  );
+  tl.set(el, { autoAlpha: 0 }, ">");
+};
+fadeStartOut.reverse = ({ el, gsap: gsap3, opts, tl }) => {
+  tl.fromTo(
+    el,
+    { autoAlpha: 0, x: -24 },
+    {
+      autoAlpha: 1,
+      x: 0,
+      duration: opts.dur,
+      delay: opts.delay,
+      ease: opts.ease
+    },
+    opts.at
+  );
+};
+var fadeEndIn = ({ el, gsap: gsap3, opts, tl }) => {
+  tl.fromTo(
+    el,
+    { autoAlpha: 0, x: 24 },
+    {
+      autoAlpha: 1,
+      x: 0,
+      duration: opts.dur,
+      delay: opts.delay,
+      ease: opts.ease
+    },
+    opts.at
+  );
+};
+fadeEndIn.reverse = ({ el, gsap: gsap3, opts, tl }) => {
+  tl.to(
+    el,
+    {
+      autoAlpha: 0,
+      x: 12,
+      duration: opts.dur,
+      delay: opts.delay,
+      ease: opts.ease
+    },
+    opts.at
+  );
+  tl.set(el, { autoAlpha: 0 }, ">");
+};
+var fadeEndOut = ({ el, gsap: gsap3, opts, tl }) => {
+  tl.to(
+    el,
+    {
+      autoAlpha: 0,
+      x: 12,
+      duration: opts.dur,
+      delay: opts.delay,
+      ease: opts.ease
+    },
+    opts.at
+  );
+  tl.set(el, { autoAlpha: 0 }, ">");
+};
+fadeEndOut.reverse = ({ el, gsap: gsap3, opts, tl }) => {
+  tl.fromTo(
+    el,
+    { autoAlpha: 0, x: 24 },
+    {
+      autoAlpha: 1,
+      x: 0,
+      duration: opts.dur,
+      delay: opts.delay,
+      ease: opts.ease
+    },
+    opts.at
+  );
+};
 
 // src/timeline.ts
-var defaultExitDuration = 0.25;
 function getDataNumber(el, name, fallback) {
   const value = el.getAttribute(name);
   if (!value) return fallback;
@@ -238,11 +560,29 @@ function findAnimationName(el) {
   }
   return null;
 }
+function collectExternalControls(slide, options) {
+  const root = slide.closest(options.selectors.root);
+  if (!root) return [];
+  const rootId = root.getAttribute("id");
+  const selector = `${options.selectors.prev}, ${options.selectors.next}`;
+  let candidates = [];
+  if (rootId) {
+    const scopedSelector = `${selector}[data-for="${rootId}"]`;
+    candidates = Array.from(document.querySelectorAll(scopedSelector));
+    if (!candidates.length) {
+      candidates = Array.from(root.querySelectorAll(selector));
+    }
+  } else {
+    candidates = Array.from(root.querySelectorAll(selector));
+  }
+  return candidates.filter((el) => !el.closest(options.selectors.slide));
+}
 function collectAnimItems(slide, options) {
   const elements = Array.from(slide.querySelectorAll("[class]"));
+  const externalControls = collectExternalControls(slide, options);
   const items = [];
-  elements.forEach((el) => {
-    var _a;
+  elements.concat(externalControls).forEach((el) => {
+    var _a, _b;
     const animName = findAnimationName(el);
     if (!animName) return;
     const seq = Math.max(1, Math.floor(getDataNumber(el, "data-seq", 1)));
@@ -250,8 +590,11 @@ function collectAnimItems(slide, options) {
     const dur = getDataNumber(el, "data-dur", options.defaults.dur);
     const delay = getDataNumber(el, "data-delay", 0);
     const ease = (_a = getDataString(el, "data-ease")) != null ? _a : options.defaults.ease;
+    const exitDur = getDataNumber(el, "data-exit-dur", dur);
+    const exitDelay = getDataNumber(el, "data-exit-delay", delay);
+    const exitEase = (_b = getDataString(el, "data-exit-ease")) != null ? _b : ease;
     const at = getDataString(el, "data-at");
-    items.push({ el, animName, seq, exitSeq, dur, delay, ease, at });
+    items.push({ el, animName, seq, exitSeq, dur, delay, ease, exitDur, exitDelay, exitEase, at });
   });
   return items;
 }
@@ -319,16 +662,16 @@ function buildSlideExitTimeline(slide, direction, options, gsapInstance) {
       const reverseFactory = factory && "reverse" in factory ? factory.reverse : void 0;
       const offset = (_a = parsePositionOffset(item.at)) != null ? _a : 0;
       const position = cursor + offset;
-      let usedDuration = item.dur;
+      let usedDuration = item.exitDur;
       if (exitName && factory) {
         factory({
           el: item.el,
           tl,
           gsap: gsapInstance,
           opts: {
-            dur: item.dur,
-            delay: item.delay,
-            ease: item.ease,
+            dur: item.exitDur,
+            delay: item.exitDelay,
+            ease: item.exitEase,
             direction,
             at: position
           }
@@ -339,27 +682,26 @@ function buildSlideExitTimeline(slide, direction, options, gsapInstance) {
           tl,
           gsap: gsapInstance,
           opts: {
-            dur: item.dur,
-            delay: item.delay,
-            ease: item.ease,
+            dur: item.exitDur,
+            delay: item.exitDelay,
+            ease: item.exitEase,
             direction,
             at: position
           }
         });
       } else {
-        usedDuration = Math.min(item.dur, defaultExitDuration);
         tl.to(
           item.el,
           {
             autoAlpha: 0,
             duration: usedDuration,
-            delay: item.delay,
-            ease: item.ease
+            delay: item.exitDelay,
+            ease: item.exitEase
           },
           position
         );
       }
-      groupMax = Math.max(groupMax, offset + item.delay + usedDuration);
+      groupMax = Math.max(groupMax, offset + item.exitDelay + usedDuration);
     });
     cursor += Math.max(groupMax, 0);
   });
@@ -377,7 +719,7 @@ function prefersReducedMotion() {
 // src/carousel.ts
 var generatedDotSelector = '[data-carousel-dot="true"]';
 function createCarousel(rootInput, options = {}) {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d;
   ensureDefaultAnimationsRegistered();
   const root = resolveRoot(rootInput);
   const gsapInstance = (_a = options.gsap) != null ? _a : gsap.gsap;
@@ -405,7 +747,7 @@ function createCarousel(rootInput, options = {}) {
   let currentIndex = normalizeIndex(resolved.initialIndex, slides.length, resolved.loop);
   let animating = false;
   setSlidesState(slides, currentIndex, resolved.classNames.activeSlide);
-  setDotsState(controls.dots, currentIndex, resolved.classNames.activeDot);
+  setAllDotsState(currentIndex);
   const onPrevClick = (event) => {
     event.preventDefault();
     prev();
@@ -423,11 +765,15 @@ function createCarousel(rootInput, options = {}) {
     if (!indexAttr) return;
     const index = Number.parseInt(indexAttr, 10);
     if (!Number.isFinite(index)) return;
-    goTo(index);
+    if (animating) return;
+    const nextIndex = normalizeIndex(index, slides.length, resolved.loop);
+    if (nextIndex === currentIndex) return;
+    setAllDotsState(nextIndex);
+    goTo(nextIndex);
   };
-  (_d = controls.prev) == null ? void 0 : _d.addEventListener("click", onPrevClick);
-  (_e = controls.next) == null ? void 0 : _e.addEventListener("click", onNextClick);
-  (_f = controls.dotsContainer) == null ? void 0 : _f.addEventListener("click", onDotsClick);
+  controls.prev.forEach((control) => control.addEventListener("click", onPrevClick));
+  controls.next.forEach((control) => control.addEventListener("click", onNextClick));
+  controls.dotsContainers.forEach((container) => container.addEventListener("click", onDotsClick));
   const instance = {
     goTo,
     next,
@@ -437,23 +783,34 @@ function createCarousel(rootInput, options = {}) {
     getCount: () => slides.length,
     isAnimating: () => animating
   };
-  (_g = resolved.onInit) == null ? void 0 : _g.call(resolved, instance);
+  (_d = resolved.onInit) == null ? void 0 : _d.call(resolved, instance);
   function disableControls(disabled) {
     toggleClass(root, resolved.classNames.animatingRoot, disabled);
-    setDisabled(controls.prev, disabled, resolved.classNames.disabledControl);
-    setDisabled(controls.next, disabled, resolved.classNames.disabledControl);
-    if (controls.dotsContainer) {
-      setAriaDisabled(controls.dotsContainer, disabled);
-    }
-    controls.dots.forEach((dot) => {
-      setAriaDisabled(dot, disabled);
-      toggleClass(dot, resolved.classNames.disabledControl, disabled);
+    controls.prev.forEach((control) => {
+      setDisabled(control, disabled, resolved.classNames.disabledControl);
+    });
+    controls.next.forEach((control) => {
+      setDisabled(control, disabled, resolved.classNames.disabledControl);
+    });
+    controls.dotsContainers.forEach((container) => {
+      setAriaDisabled(container, disabled);
+    });
+    controls.dots.forEach((dotGroup) => {
+      dotGroup.forEach((dot) => {
+        setAriaDisabled(dot, disabled);
+        toggleClass(dot, resolved.classNames.disabledControl, disabled);
+      });
+    });
+  }
+  function setAllDotsState(activeIndex) {
+    controls.dots.forEach((dotGroup) => {
+      setDotsState(dotGroup, activeIndex, resolved.classNames.activeDot);
     });
   }
   function applyActiveState(nextIndex) {
     currentIndex = nextIndex;
     setSlidesState(slides, currentIndex, resolved.classNames.activeSlide);
-    setDotsState(controls.dots, currentIndex, resolved.classNames.activeDot);
+    setAllDotsState(currentIndex);
   }
   function finalizeTransition(from, to, direction) {
     var _a2;
@@ -463,7 +820,7 @@ function createCarousel(rootInput, options = {}) {
     (_a2 = resolved.onAfterChange) == null ? void 0 : _a2.call(resolved, { from, to, direction });
   }
   function transitionTo(nextIndex, immediate) {
-    var _a2;
+    var _a2, _b2;
     if (animating) return;
     if (nextIndex === currentIndex) return;
     const from = currentIndex;
@@ -487,7 +844,7 @@ function createCarousel(rootInput, options = {}) {
       })
     );
     state.activeTimeline = master;
-    const overlap = Math.max(0, resolved.transition.overlap);
+    const overlap = Math.max(0, (_b2 = resolved.transition.exitOverlap) != null ? _b2 : resolved.transition.overlap);
     const enterAt = Math.max(0, exitTl.duration() - overlap);
     master.add(exitTl, 0);
     master.add(() => applyActiveState(to), enterAt);
@@ -503,59 +860,73 @@ function createCarousel(rootInput, options = {}) {
     if (animating) return;
     const nextIndex = resolveNextIndex(currentIndex, slides.length, resolved.loop);
     if (nextIndex === currentIndex) return;
+    setAllDotsState(nextIndex);
     transitionTo(nextIndex, opts == null ? void 0 : opts.immediate);
   }
   function prev(opts) {
     if (animating) return;
     const nextIndex = resolvePrevIndex(currentIndex, slides.length, resolved.loop);
     if (nextIndex === currentIndex) return;
+    setAllDotsState(nextIndex);
     transitionTo(nextIndex, opts == null ? void 0 : opts.immediate);
   }
   function destroy() {
-    var _a2, _b2, _c2, _d2;
-    (_a2 = controls.prev) == null ? void 0 : _a2.removeEventListener("click", onPrevClick);
-    (_b2 = controls.next) == null ? void 0 : _b2.removeEventListener("click", onNextClick);
-    (_c2 = controls.dotsContainer) == null ? void 0 : _c2.removeEventListener("click", onDotsClick);
-    (_d2 = state.activeTimeline) == null ? void 0 : _d2.kill();
+    var _a2;
+    controls.prev.forEach((control) => control.removeEventListener("click", onPrevClick));
+    controls.next.forEach((control) => control.removeEventListener("click", onNextClick));
+    controls.dotsContainers.forEach((container) => container.removeEventListener("click", onDotsClick));
+    (_a2 = state.activeTimeline) == null ? void 0 : _a2.kill();
     animating = false;
     ctx.revert();
-    if (controls.dotsContainer) {
-      controls.dotsContainer.querySelectorAll(generatedDotSelector).forEach((dot) => {
+    controls.dotsContainers.forEach((container) => {
+      container.querySelectorAll(generatedDotSelector).forEach((dot) => {
         dot.remove();
       });
-    }
-    if (controls.dotTemplate) {
-      controls.dotTemplate.hidden = false;
-    }
+    });
+    controls.dotTemplates.forEach((template) => {
+      if (template) {
+        template.hidden = false;
+      }
+    });
   }
   return instance;
 }
 function resolveControls(root, options, slideCount) {
   const rootId = root.getAttribute("id");
-  const queryWithFallback = (selector) => {
+  const queryAllWithFallback = (selector) => {
     if (rootId) {
-      const scoped = document.querySelector(`${selector}[data-for="${rootId}"]`);
-      if (scoped) return scoped;
+      const scoped = Array.from(document.querySelectorAll(`${selector}[data-for="${rootId}"]`));
+      if (scoped.length) return scoped;
     }
-    return qs(root, selector);
+    return qsa(root, selector);
   };
-  const prev = queryWithFallback(options.selectors.prev);
-  const next = queryWithFallback(options.selectors.next);
-  const dotsContainer = queryWithFallback(options.selectors.dots);
-  const dotTemplate = dotsContainer ? qs(dotsContainer, options.selectors.dotTemplate) : null;
-  const dots = dotsContainer ? setupDots(dotsContainer, dotTemplate, options, slideCount) : [];
-  return { prev, next, dotsContainer, dotTemplate, dots };
+  const prev = queryAllWithFallback(options.selectors.prev);
+  const next = queryAllWithFallback(options.selectors.next);
+  const dotsContainers = queryAllWithFallback(options.selectors.dots);
+  const dotTemplates = [];
+  const dots = dotsContainers.map((container) => {
+    const template = qs(container, options.selectors.dotTemplate);
+    dotTemplates.push(template);
+    return setupDots(container, template, options, slideCount);
+  });
+  return { prev, next, dotsContainers, dotTemplates, dots };
 }
 function setupDots(container, template, options, slideCount) {
   const dots = qsa(container, generatedDotSelector);
   dots.forEach((dot) => dot.remove());
   if (!template) return [];
   const clones = [];
+  const disableOpacityAttr = template.getAttribute("data-carousel-disable-opacity");
   for (let i = 0; i < slideCount; i += 1) {
     const clone = template.cloneNode(true);
     clone.removeAttribute("id");
     clone.setAttribute("data-carousel-dot", "true");
     clone.setAttribute("data-carousel-dot-index", String(i));
+    if (disableOpacityAttr !== null) {
+      clone.setAttribute("data-carousel-disable-opacity", disableOpacityAttr);
+    } else {
+      clone.removeAttribute("data-carousel-disable-opacity");
+    }
     clone.setAttribute("aria-label", `Go to slide ${i + 1}`);
     clone.classList.add(options.classNames.dot);
     if (clone instanceof HTMLButtonElement && !clone.getAttribute("type")) {