Instructions

Find easy to follow instructions

GSAP Guide

All GSAP animations used in this template are collected here. On this page, you’ll find guidance on how to locate and edit them. Each code block comes with extra notes to make it easier to understand.

You can find the code in the Embed Code inside this template.

1. Script Code for count down numberic.

You need to pay attention to the script below in the footer code → Site Setting. The script below is a countdown animation code for several text elements that are specifically numeric.
If you want to change the numbers to your preferred values, you need to pay attention to the numeric text elements. Then, check the element settings section and look at the Custom Attribute, where the name is "data-count". You can fill the value field with any number you want.

<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: 3,
      ease: 'power2.out',

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

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

2. Script Code for section service.

If you want to modify the image-trail animation in the service sections, you need to pay attention to the script code below. In this script, there are class names and container classes that must be considered when changing the classes.

<script>
const preview = document.querySelector(".area-service-overview");
const container = document.querySelector(".main-content-service");

let mouseX = 0;
let mouseY = 0;

let currentX = 0;
let currentY = 0;

let isInside = false;

const speed = 0.08;

// mouse masuk area
container.addEventListener("mouseenter", () => {
  isInside = true;

  gsap.to(preview, {
    opacity: 1,
    duration: 0.3,
    ease: "power2.out"
  });
});

// mouse keluar area
container.addEventListener("mouseleave", () => {
  isInside = false;

  gsap.to(preview, {
    opacity: 0,
    duration: 0.3,
    ease: "power2.out"
  });
});

// ambil posisi mouse hanya dalam container
container.addEventListener("mousemove", (e) => {
  const rect = container.getBoundingClientRect();

  mouseX = e.clientX - rect.left;
  mouseY = e.clientY - rect.top;
});

// smooth animation
function animate() {

  if (isInside) {
    currentX += (mouseX - currentX) * speed;
    currentY += (mouseY - currentY) * speed;

    gsap.set(preview, {
      x: currentX - 150,
      y: currentY - 100
    });
  }

  requestAnimationFrame(animate);
}

animate();
</script>