Guide for template

This template uses GSAP (GreenSock Animation Platform) to create smooth, high-performance animations across multiple sections of the website. All GSAP scripts are written in pure JavaScript and organized for easy customization, allowing you to adjust animation speed, direction, easing, triggers, and timing without affecting the overall structure.

Each animation includes clear comments to help you understand how it works, making it simple to modify or extend the interactions to match your project's needs while remaining fully compatible with Webflow.

Mouse trail Footer

The following script controls the mouse trail effect in the footer. You can customize it by referring to the example script below and adjusting the settings to match your preferred animation behavior.

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

  if (!window.matchMedia("(min-width: 992px)").matches) return;

  const area = document.querySelector(".area-text-footer");
  const cursor = document.querySelector(".click-mail-to");

  if (!area || !cursor) return;

  area.addEventListener("mouseenter", () => {
    gsap.to(cursor, {
      opacity: 1,
      duration: 0.25,
      ease: "power2.out"
    });
  });

  area.addEventListener("mouseleave", () => {
    gsap.to(cursor, {
      opacity: 0,
      duration: 0.25,
      ease: "power2.out"
    });
  });

  area.addEventListener("mousemove", (e) => {

    const rect = area.getBoundingClientRect();

    const x = e.clientX - rect.left - cursor.offsetWidth / 2;
    const y = e.clientY - rect.top - cursor.offsetHeight / 2;

    gsap.to(cursor, {
      x: x,
      y: y,
      duration: 0.35,
      ease: "power3.out",
      overwrite: "auto"
    });

  });

});
</script>

Data countdown for achievement

The following script powers the countdown animation for the Achievement section using GSAP's ScrambleText effect. You can customize the target values, animation duration, and trigger settings by referring to the example script below.

<script>
  gsap.registerPlugin(ScrollTrigger);

  document.querySelectorAll('[data-count]').forEach((el) => {
    const finalValue = el.getAttribute('data-count');

    const number = parseInt(finalValue.replace(/\D/g, ''));

    const suffix = finalValue.replace(/[0-9]/g, '');

    let obj = { value: 0 };

    gsap.to(obj, {
      value: number,
      duration: 2,
      ease: 'power2.out',

      onUpdate: () => {
        el.textContent = Math.floor(obj.value) + suffix;
      },

      scrollTrigger: {
        trigger: el,
        start: 'top 85%',
        once: true,
      },
    });
  });
</script>

Guide for template

Get in touch