Instructions

<link rel="stylesheet" href="https://unpkg.com/lenis@1.3.20/dist/lenis.css" />
<script src="https://unpkg.com/lenis@1.3.20/dist/lenis.min.js"></script> 
<script>
  gsap.registerPlugin(ScrollTrigger);

  const lenis = new Lenis({
    duration: 1.5,
    easing: (t) => 1 - Math.pow(1 - t, 3),
    smooth: true,
    smoothTouch: false, // ✅ important
  });

  // sync
  lenis.on('scroll', ScrollTrigger.update);

  // raf loop
  function raf(time) {
    lenis.raf(time);
    requestAnimationFrame(raf);
  }
  requestAnimationFrame(raf);

  // ✅ correct scroller
  ScrollTrigger.scrollerProxy(document.documentElement, {
    scrollTop(value) {
      return arguments.length ? lenis.scrollTo(value, { immediate: true }) : lenis.scroll;
    },
    getBoundingClientRect() {
      return {
        top: 0,
        left: 0,
        width: window.innerWidth,
        height: window.innerHeight,
      };
    },
  });

  // ✅ important
  ScrollTrigger.defaults({
    scroller: document.documentElement,
  });

  // refresh fix
  ScrollTrigger.addEventListener('refresh', () => lenis.resize());

  ScrollTrigger.refresh();
</script>

<!-- GSAP Counter Animation -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>

<script>
window.addEventListener('load', function () {
  gsap.registerPlugin(ScrollTrigger);

  const counters = document.querySelectorAll('[data-target]');

  counters.forEach(function (el, index) {
    const target    = parseFloat(el.getAttribute('data-target'));
    const isDecimal = target % 1 !== 0;

    gsap.set(el, { opacity: 0, y: 0 });

    ScrollTrigger.create({
      trigger : el,
      start   : 'top 85%',
      once    : true,
      onEnter : function () {

        const entryDelay = index * 0.3;

        // Fade in
        gsap.to(el, { opacity: 1, duration: 0.3, delay: entryDelay });

        // 🎯 Smooth duration
        const baseSpeed = 40;
        const duration  = Math.min(3, Math.max(0.8, target / baseSpeed));

        const obj = { val: 0 };

        gsap.to(obj, {
          val      : target,
          duration : duration,
          delay    : entryDelay,
          ease     : 'power2.out',

          onUpdate : function () {
            el.innerText = isDecimal
              ? obj.val.toFixed(1)
              : Math.floor(obj.val);
          }

        });
      }
    });
  });
});
</script>

<!-- GSAP Draggable Animation -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/Draggable.min.js"></script>

<script>
document.addEventListener("DOMContentLoaded", () => {

  gsap.registerPlugin(Draggable);

 Draggable.create(".draggable-widget", {
  type: "x,y",
  bounds: ".draggable-widgets-main",

  onDrag() {
    gsap.to(this.target, {
      rotation: this.deltaX * 0.3,
      duration: 0.1,
      overwrite: true
    });
  },

  onRelease() {
    gsap.to(this.target, {
      rotation: 0,
      scale: 1,
      duration: 0.3
    });
  }
});

});
</script>