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.

Ripple bar on section our process

Use this script code for ripple bar and you can setting and adjust the start and end viewport here.

<script>
  document.addEventListener('DOMContentLoaded', () => {
    gsap.registerPlugin(ScrollTrigger);

    const wrapper = document.querySelector('.wrapper-ripple');

    if (!wrapper) {
      console.warn('wrapper-ripple not found.');
      return;
    }

    const template = wrapper.querySelector('.ripple-bar');

    if (!template) {
      console.warn('ripple-bar not-found.');
      return;
    }

    // =====================
    // CONFIG
    // =====================

    const gap = 2;
    const minScale = 0.2;
    const maxScale = 1;
    const influence = 8;

    // =====================
    // BUILD RIPPLE
    // =====================

    function buildRipple() {
      wrapper.querySelectorAll('.ripple-bar:not(:first-child)').forEach((el) => el.remove());

      const wrapperWidth = wrapper.offsetWidth;
      const barWidth = template.offsetWidth;

      const total = Math.floor(wrapperWidth / (barWidth + gap));

      wrapper.style.display = 'flex';
      wrapper.style.alignItems = 'flex-end';
      wrapper.style.gap = `${gap}px`;

      for (let i = 1; i < total; i++) {
        wrapper.appendChild(template.cloneNode(true));
      }

      updateRipple(0);
    }

    // =====================
    // UPDATE RIPPLE
    // =====================

    function updateRipple(progress) {
      const bars = wrapper.querySelectorAll('.ripple-bar');
      const active = progress * (bars.length - 1);

      bars.forEach((bar, index) => {
        const distance = Math.abs(index - active);

        // Gaussian falloff
        const strength = Math.exp(-(distance * distance) / (2 * influence * influence));

        gsap.set(bar, {
          scaleY: minScale + strength * (maxScale - minScale),
          transformOrigin: 'bottom center',
        });
      });
    }

    // =====================
    // INIT
    // =====================

    buildRipple();

    window.addEventListener('resize', buildRipple);

    ScrollTrigger.create({
      trigger: '.inner-full-tracks',

      start: 'center-=15% bottom',
      end: 'bottom-=10% top',
      scrub: true,
      markers: true,

      onUpdate: (self) => {
        updateRipple(self.progress);
      },
    });
  });
</script>

Script code for data count on every number

Create newe custom attribute on text number and input this "data-count".

<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>

Script code for scramble tagline scroll

Apply class "scramble-scroll" on tagline section.

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

const elements = document.querySelectorAll(".scramble-scroll");

elements.forEach((element) => {

  const originalText = element.textContent;

  ScrollTrigger.create({
    trigger: element,
    start: "top 76%",

    onEnter: () => {
      gsap.to(element, {
        duration: 1,
        opacity: 1,
        scrambleText: {
          text: originalText,
          chars: "83741#1!*^23",
          speed: 0.35
        }
      });
    }

  });

});

});
</script>