svelte-gsap-pendulum

Deskripsi

Package ini memberikan efek "pendulum" untuk elemen span, sehingga terlihat seperti papan yang digantung oleh satu baut. Bisa digunakan di navbar, heading, atau teks apapun.

Instalasi

npm install svelte-gsap-pendulum
    

Contoh Penggunaan

<script>
  import function pendulum(node, options = {}) {
  const {
    angle = -25,
    duration = 1.2,
    stiffness = 0.5,
    origin = "bottom right"
  } = options;
  node.style.transformOrigin = origin;
  gsap.fromTo(
    node,
    { rotate: 0 },
    {
      rotate: angle,
      duration,
      ease: "bounce.out"
    }
  );
  function onEnter() {
    gsap.to(node, {
      rotate: 0,
      duration: 0.5,
      ease: `elastic.out(1, ${stiffness})`
    });
  }
  function onLeave() {
    gsap.to(node, {
      rotate: angle,
      duration: 0.8,
      ease: `elastic.out(1, ${stiffness})`
    });
  }
  node.addEventListener("mouseenter", onEnter);
  node.addEventListener("mouseleave", onLeave);
  return {
    destroy() {
      node.removeEventListener("mouseenter", onEnter);
      node.removeEventListener("mouseleave", onLeave);
    }
  };
} from 'svelte-gsap-pendulum';
</script>

<a href="/" class="flex items-center gap-2">
  Mikeu
  <span use:pendulum=[object Object] 
        class="bg-teal-600 text-white px-4 py-1 rounded">Dev</span>
</a>
    

Demo Interaktif

Hover pada teks Dev untuk melihat efek pendulum.