Instructions

Lenis creates a smooth scrolling experience across the entire site.

ou can edit the code by going into any Page Settings → Before </body> tag.

const lenis = new Lenis({
  smooth: true,
  lerp: 0.1,
  wheelMultiplier: 1,
  infinite: false,
});

lenis.on('scroll', ScrollTrigger.update);
gsap.ticker.lagSmoothing(0);

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

You can modify the values below to adjust the easing and behavior.

const lenis = new Lenis({
  smooth: true,       // Enable or disable smooth scrolling entirely (true / false)
  lerp: 0.1,          // Smoothing intensity — lower = smoother, higher = snappier (0.01 – 1)
  wheelMultiplier: 1, // Scroll speed multiplier for mouse wheel (e.g. 0.5 = slower, 2 = faster)
  infinite: false,    // Enable infinite scrolling (true / false)
});

To temporarily disable the code, comment out the whole block like this.

<!-- 
const lenis = new Lenis({ ... });
...
requestAnimationFrame(raf);
-->

The Digital Clock displays the current time for a specified timezone and automatically updates every second. Add the class .digital-clock to any element where you want the clock to appear. The clock supports both 12-hour and 24-hour formats and uses the browser's built-in Intl/toLocaleTimeString() timezone handling.

ou can edit the code by going into any Page Settings → Before </body> tag.

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

    // ----------------------------------------
    // DIGITAL CLOCK
    // ----------------------------------------

    const clockElements = document.querySelectorAll('.digital-clock');

    if (clockElements.length) {
      const clockTimezone = 'America/New_York';
      const clockFormat24 = false;

      clockElements.forEach((clock) => {
        clock.innerHTML = `
          <span class="clock-time"></span>
          <span class="clock-colon">:</span>
          <span class="clock-minutes"></span>
          <span class="clock-period"></span>
        `;

        const timeElement = clock.querySelector('.clock-time');
        const colonElement = clock.querySelector('.clock-colon');
        const minutesElement = clock.querySelector('.clock-minutes');
        const periodElement = clock.querySelector('.clock-period');

        gsap.set(clock, {
          display: 'flex',
          alignItems: 'center',
          gap: '2px',
        });

        gsap.set(colonElement, {
          lineHeight: '0.6',
          transform: 'translateY(-15%)',
        });

        gsap.to(colonElement, {
          autoAlpha: 0,
          duration: 0,
          repeat: -1,
          repeatDelay: 0.5,
          yoyo: true,
        });

        function updateClock() {
          const now = new Date();

          const timeString = now.toLocaleTimeString('en-US', {
            timeZone: clockTimezone,
            hour12: !clockFormat24,
            hour: 'numeric',
            minute: '2-digit',
          });

          const parts = timeString.split(':');
          const hours = parts[0];
          const minutesPart = parts[1].split(' ');
          const minutes = minutesPart[0];
          const period = minutesPart[1] || '';

          timeElement.textContent = hours;
          minutesElement.textContent = minutes;
          periodElement.textContent = period;
        }

        updateClock();
        setInterval(updateClock, 1000);
      });
    }

  });
</script>

You can modify the values below to adjust the timezone, time format, spacing, and clock styling.

const clockTimezone = 'America/New_York';
const clockFormat24 = false;

To temporarily disable the code, comment out the whole block like this.

<!--
const clockElements = document.querySelectorAll('.digital-clock');
if (clockElements.length) { 
  ... 
}
-->