citrus/resources/views/templates/neler-yapariz/sections/inertia.blade.php

</script></div></section><section id="inertia" data-animate="inertia" class="sec inertia" style="transform-style: preserve-3d; perspective: 5000px; touch-action: pan-y; cursor: grab; user-select: none;"><div data-inertia="item" class="comp inertia" style="transform-style: preserve-3d; touch-action: pan-y;"><div class="inertia-slide" style="translate: none; rotate: none; scale: none; touch-action: pan-y; transform: translate3d(127.949px, 0px, -809.47px) rotateY(-218.664deg); transform-origin: 50% 50%;"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68014be6408118620403e9a0_run1.avif" loading="lazy" alt="" class="img-full" style="touch-action: pan-y;"></div><div class="inertia-slide" style="translate: none; rotate: none; scale: none; touch-action: pan-y; transform: translate3d(-74.5137px, 0px, -840.321px) rotateY(-158.664deg); transform-origin: 50% 50%;"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68014be61c6cd36ab183dfcb_run2.avif" loading="lazy" alt="" class="img-full" style="touch-action: pan-y;"></div><div class="inertia-slide" style="translate: none; rotate: none; scale: none; touch-action: pan-y; transform: translate3d(-202.463px, 0px, -680.408px) rotateY(-98.664deg); transform-origin: 50% 50%;"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68014be69e11d4352fe75f35_run3.avif" loading="lazy" alt="" class="img-full" style="touch-action: pan-y;"></div><div class="inertia-slide" style="translate: none; rotate: none; scale: none; touch-action: pan-y; transform: translate3d(-127.949px, 0px, -489.645px) rotateY(-38.664deg); transform-origin: 50% 50%;"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68014be611882842b65d0cde_run4.avif" loading="lazy" alt="" class="img-full" style="touch-action: pan-y;"></div><div class="inertia-slide" style="translate: none; rotate: none; scale: none; touch-action: pan-y; transform: translate3d(74.5137px, 0px, -458.794px) rotateY(21.336deg); transform-origin: 50% 50%;"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68014be65c4395c2a01bca17_run5.avif" loading="lazy" alt="" class="img-full" style="touch-action: pan-y;"></div><div class="inertia-slide" style="translate: none; rotate: none; scale: none; touch-action: pan-y; transform: translate3d(202.463px, 0px, -618.706px) rotateY(81.336deg); transform-origin: 50% 50%;"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68014be64f5f29ef20ed7ccc_run6.avif" loading="lazy" alt="" class="img-full" style="touch-action: pan-y;"></div><div style="position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 1; cursor: grab; translate: none; rotate: none; scale: none; touch-action: pan-y;"></div></div><div class="explainer-w" style="touch-action: pan-y;"><div data-module="explainer" data-css="explainer" class="explainer-comp" style="touch-action: pan-y;"><label class="div" style="touch-action: pan-y;"><input type="checkbox" class="input" style="touch-action: pan-y;"><span class="span" style="touch-action: pan-y;"><div class="explainer-he" style="touch-action: pan-y;">Feel the inertia</div><div class="plus-icon-w" style="touch-action: pan-y;"><div class="plus-line rotate" style="touch-action: pan-y;"></div><div class="plus-line" style="touch-action: pan-y;"></div></div></span></label><div data-css="" class="explainer-expandable-w" style="touch-action: pan-y;"><div class="explainer-overflow" style="touch-action: pan-y;"><div class="explainer-content-w" style="touch-action: pan-y;"><p class="explainer-par" style="touch-action: pan-y;">Continue movement from a given speed, slow naturally to a stop. Perfect for adding physicality and flow to your interface.</p></div></div></div><div class="explainer-copy-btn-w" style="touch-action: pan-y;"><button data-module="copybtn" data-copy="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/6811e2c7ef67f371639c0386_inertia-final.json.txt" class="btn copy" style="touch-action: pan-y;"><div class="btn-cent-w" style="touch-action: pan-y;"><div class="text-block" style="touch-action: pan-y;">Copy this</div><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 9 11" fill="none" class="svg copy-icon" style="touch-action: pan-y;"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 1.5H1V6.5H5V1.5ZM0 0.5V7.5H6V0.5H0Z" fill="currentColor" style="touch-action: pan-y;"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M3 8.757V10.5H9V3.5H7.42V4.5H8V9.5H4V8.757H3Z" fill="currentColor" style="touch-action: pan-y;"></path></svg></div></button></div><div class="mobile-explainer-prompt" style="touch-action: pan-y;">Copy this on Desktop</div></div></div><div class="code-block w-embed w-script" style="touch-action: pan-y;"><script style="touch-action: pan-y;">
{
// CREDITS: https://codepen.io/GreenSock/pen/RwLepdQ?editors=1010

addEventListener("GSAPReady", (event) => {
  // console.log("inertia");
  const wrapper = document.querySelector("[data-animate='inertia']");
  const items = [...wrapper.querySelector("[data-inertia='item']").children];

  /** --  Params */
  let dragDistancePerRotation = 3000;
  let itemWidth = items[0].offsetWidth; // Get width of the first item
  let itemCount = items.length;
  let radius = (itemWidth / (2 * Math.sin(Math.PI / itemCount))) * 0.85; // Dynamic radius
  const perspective = 5000; // Controls the strength of the perspective effect
  const proxy = document.createElement("div");
  const progressWrap = gsap.utils.wrap(0, 1);
  let startProgress = 0; // Define startProgress variable

  // Set up the perspective on the wrapper
  gsap.set(wrapper, {
    perspective: perspective,
    transformStyle: "preserve-3d",
  });

  // Set up the container for the rotating items
  const container = wrapper.querySelector("[data-inertia='item']");
  gsap.set(container, {
    transformStyle: "preserve-3d",
  });

  const spin = gsap.fromTo(
    items,
    {
      rotationY: (i) => (i * 360) / items.length,
      z: -radius, // Use dynamic radius
    },
    {
      rotationY: "-=360",
      duration: 20,
      ease: "none",
      repeat: -1,
      transformOrigin: "50% 50% " + -radius + "px",
      z: -radius, // Maintain the z position throughout the animation
    }
  );

  // Set up the proxy element properly
  proxy.style.position = "absolute";
  proxy.style.width = "100%";
  proxy.style.height = "100%";
  proxy.style.top = "0";
  proxy.style.left = "0";
  proxy.style.zIndex = "1";
  proxy.style.cursor = "grab";
  wrapper.children[0].appendChild(proxy);

  // Create Draggable with mobile-friendly settings
  Draggable.create(proxy, {
    trigger: wrapper,
    type: "x",
    inertia: true,
    // allowNativeTouchScrolling: false, // Changed to false to prevent conflicts
    onPress() {
      gsap.killTweensOf(spin);
      spin.timeScale(0);
      startProgress = spin.progress();
    },
    onDrag: updateRotation,
    onThrowUpdate: updateRotation,
    onRelease() {
      if (!this.tween || !this.tween.isActive()) {
        gsap.to(spin, { timeScale: 1, duration: 1 });
      }
    },
    onThrowComplete() {
      gsap.to(spin, { timeScale: 1, duration: 1 });
    },
  });

  function updateRotation() {
    let p = startProgress + (this.startX - this.x) / dragDistancePerRotation;
    spin.progress(progressWrap(p));
  }

  function recalculatePositions() {
    itemWidth = items[0].offsetWidth;
    itemCount = items.length;
    radius = (itemWidth / (2 * Math.sin(Math.PI / itemCount))) * 0.8;

    // Update each item's rotationY and z
    items.forEach((item, i) => {
      gsap.set(item, {
        rotationY: (i * 360) / itemCount,
        z: -radius,
      });
    });

    // Update the spin tween's transformOrigin and z
    spin.vars.transformOrigin = "50% 50% " + -radius + "px";
    spin.vars.z = -radius;
    spin.invalidate(); // Re-initialize the tween with new values

    // Update the perspective if needed
    gsap.set(wrapper, {
      perspective: perspective,
    });
  }

  // Call on resize
  window.addEventListener("resize", recalculatePositions);

  // Add touch event listeners for better mobile support
  wrapper.addEventListener(
    "touchstart",
    (e) => {
      // Prevent default only if we're actually dragging
      if (e.target === wrapper || e.target === proxy) {
        e.preventDefault();
      }
    },
    { passive: false }
  );
});

}
</script></div></section><section id="text" class="sec"><ul role="list" class="comp text-exp w-list-unstyled"><li class="text-g-item"><div class="text-example-container"><div data-delay=".1" data-animate="text" data-type="chars" data-duration="1.2" class="text-effect-w" aria-label="Split Chars" style="overflow: hidden;"><div class="text-effect-tx"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 120%);">S</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 120%);">p</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 120%);">l</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 120%);">i</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 120%);">t</div> <div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 120%);">C</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 120%);">h</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 120%);">a</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 120%);">r</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 120%);">s</div></div></div></div><div class="text-example-tx-w"><div>Character Split Reveal</div></div></li><li class="text-g-item"><div class="text-example-container"><div data-delay=".2" data-animate="text" data-type="words" data-duration="1.2" class="text-effect-w" aria-label="Split By Words" style="overflow: hidden;"><div class="text-effect-tx"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 120%);">Split</div> <div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 120%);">By</div> <div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 120%);">Words</div></div></div></div><div class="text-example-tx-w"><div>Word Split Reveal</div></div></li><li class="text-g-item"><div class="text-example-container"><div data-delay=".1" data-animate="text" data-type="scramble" data-duration="1.2" class="text-effect-w"><div class="text-effect-tx">niiyhgir</div></div></div><div class="text-example-tx-w"><div>Scramble Text Reveal</div></div></li><li class="text-g-item"><div class="text-example-container"><div data-delay=".1" data-animate="text" data-type="alpha" data-duration="1.2" class="text-effect-w" aria-label="Split Alpha"><div class="text-effect-tx"><div aria-hidden="true" style="position: relative; display: inline-block; opacity: 0; visibility: hidden;">S</div><div aria-hidden="true" style="position: relative; display: inline-block; opacity: 0; visibility: hidden;">p</div><div aria-hidden="true" style="position: relative; display: inline-block; opacity: 0; visibility: hidden;">l</div><div aria-hidden="true" style="position: relative; display: inline-block; opacity: 0; visibility: hidden;">i</div><div aria-hidden="true" style="position: relative; display: inline-block; opacity: 0; visibility: hidden;">t</div> <div aria-hidden="true" style="position: relative; display: inline-block; opacity: 0; visibility: hidden;">A</div><div aria-hidden="true" style="position: relative; display: inline-block; opacity: 0; visibility: hidden;">l</div><div aria-hidden="true" style="position: relative; display: inline-block; opacity: 0; visibility: hidden;">p</div><div aria-hidden="true" style="position: relative; display: inline-block; opacity: 0; visibility: hidden;">h</div><div aria-hidden="true" style="position: relative; display: inline-block; opacity: 0; visibility: hidden;">a</div></div></div></div><div class="text-example-tx-w"><div>Alpha Reveal</div></div></li><li class="text-g-item"><div class="text-example-container"><div data-delay=".1" data-animate="text" data-type="side" data-duration="1.2" class="text-effect-w" aria-label="From the Side"><div class="text-effect-tx" aria-label="From the Side"><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(100px, 0px);">F</div></div><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(100px, 0px);">r</div></div><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(100px, 0px);">o</div></div><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(100px, 0px);">m</div></div> <div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(100px, 0px);">t</div></div><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(100px, 0px);">h</div></div><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(100px, 0px);">e</div></div> <div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(100px, 0px);">S</div></div><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(100px, 0px);">i</div></div><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(100px, 0px);">d</div></div><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(100px, 0px);">e</div></div></div></div></div><div class="text-example-tx-w"><div>SIide Char Reveal</div></div></li><li class="text-g-item"><div class="text-example-container"><div data-delay=".1" data-animate="text" data-type="updown" data-duration="1.2" class="text-effect-w" aria-label="Up and Down"><div class="text-effect-tx" aria-label="Up and Down"><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 100%);">U</div></div><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, -100%);">p</div></div> <div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 100%);">a</div></div><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, -100%);">n</div></div><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 100%);">d</div></div> <div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, -100%);">D</div></div><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 100%);">o</div></div><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, -100%);">w</div></div><div aria-hidden="true" style="position: relative; display: inline-block; overflow: hidden;"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0%, 100%);">n</div></div></div></div></div><div class="text-example-tx-w"><div>Up and down Reveal</div></div></li></ul><div class="explainer-w"><div data-module="explainer" data-css="explainer" class="explainer-comp"><label class="div"><input type="checkbox" class="input"><span class="span"><div class="explainer-he">Split, animate, reveal</div><div class="plus-icon-w"><div class="plus-line rotate"></div><div class="plus-line"></div></div></span></label><div data-css="" class="explainer-expandable-w"><div class="explainer-overflow"><div class="explainer-content-w"><p class="explainer-par">Animate each one independently. It’s all motion, no compromise: screen readers and search engines still see the original text.</p></div></div></div><div class="explainer-copy-btn-w"><button data-module="copybtn" data-copy="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/6811e2c873ab161c8499accd_text-final.json.txt" class="btn copy"><div class="btn-cent-w"><div class="text-block">Copy this</div><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 9 11" fill="none" class="svg copy-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 1.5H1V6.5H5V1.5ZM0 0.5V7.5H6V0.5H0Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M3 8.757V10.5H9V3.5H7.42V4.5H8V9.5H4V8.757H3Z" fill="currentColor"></path></svg></div></button></div><div class="mobile-explainer-prompt">Copy this on Desktop</div></div></div><div class="code-block w-embed w-script"><script>