Instruction - Offsites - Webflow HTML website template

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.

SCROLL TO TOP AFTER PAGE LOAD

You need to use the following script to smoothly scroll to the top after the page is loaded

<script>
  window.addEventListener('load', () => {
    setTimeout(() => {
      window.scrollTo(0, 0);
    }, 150);
  });
</script>

Script code for specific time zone

You have to enter the following script to display a specific time

<!--HERO DIGITAL CLOCK GSAP-->
<script>
const hourEl = document.querySelector('.hour');
const minuteEl = document.querySelector('.minute');
const colonEl = document.querySelector('.colon');

// 🕐 Update the time
function updateTime() {
  const now = new Date();
  let hours = now.getHours();
  let minutes = now.getMinutes();

  // Convert to 12-hour format (optional)
  // hours = hours % 12 || 12;

  hourEl.textContent = String(hours).padStart(2, "0");
  minuteEl.textContent = String(minutes).padStart(2, "0");
}

updateTime();
setInterval(updateTime, 1000 * 10); // refresh every 10s

// 💡 GSAP blinking colon
gsap.to(colonEl, {
  opacity: 0,
  duration: 0.6,
  ease: "power1.inOut",
  repeat: -1,
  yoyo: true
});
</script>
<!--END HERO DIGITAL CLOCK GSAP-->

MOUSE TRACKING CURSOR WITH GSAP

You need to use the following script to create a smooth mouse tracking cursor that follows the mouse movement within the viewport

<!--START MOUSE TRACKING CURSOR WORKS GSAP-->
<script>
  document.addEventListener('mousemove', (e) => {
    const cursorWrapper = document.querySelector('.wrapper-cursor-works');

    const mouseX = e.clientX;
    const mouseY = e.clientY;

    const viewportWidth = window.innerWidth;
    const viewportHeight = window.innerHeight;

    const xPercent = (mouseX / viewportWidth) * 100;
    const yPercent = (mouseY / viewportHeight) * 100;

    const moveX = (xPercent / 100) * 90 - 45;
    const moveY = (yPercent / 100) * 90 - 45;

    gsap.to(cursorWrapper, {
      x: moveX + 'vw',
      y: moveY + 'vh',
      duration: 0.25,
      ease: 'power2.out',
    });
  });
</script>
<!--END MOUSE TRACKING CURSOR WORKS GSAP-->

Instructions