Instructions - KRYNT - Webflow HTML website template

GSAP Custom Code

All GSAP code used in this template is included here for understanding, customizing, and managing this website template. Each code block comes with additional explanations to help you understand everything.

Open the relevant Page Settings and scroll to the Custom Code section. Most animation scripts are located inside the “Before </body> tag” field.

SMOOTH SCROLL LENIS

This script adds smooth and controlled vertical scrolling using Lenis. It also provides custom attributes to start, stop, or toggle page scrolling, making it useful for menus, overlays, and modal interactions.

<link rel="stylesheet" href="https://unpkg.com/lenis@1.2.3/dist/lenis.css">
<script src="https://unpkg.com/lenis@1.2.3/dist/lenis.min.js"></script>
<script>
let lenis = new Lenis({
  lerp: 0.1,
  wheelMultiplier: 0.7,
  gestureOrientation: "vertical",
  normalizeWheel: false,
  smoothTouch: false,
});
function raf(time) {
  lenis.raf(time);
  requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
$("[data-lenis-start]").on("click", function () {
  lenis.start();
});
$("[data-lenis-stop]").on("click", function () {
  lenis.stop();
});
$("[data-lenis-toggle]").on("click", function () {
  $(this).toggleClass("stop-scroll");
  if ($(this).hasClass("stop-scroll")) {
    lenis.stop();
  } else {
    lenis.start();
  }
});
</script>

FAQ ACCORDION

This script creates an animated FAQ accordion using GSAP. The first item opens automatically, only one answer can remain open at a time, and the content and icon animate smoothly when an item is opened or closed.

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

  const accordions =
    gsap.utils.toArray(".faq-accordion");

  let isAnimating = false;

  /*
  INITIAL STATE
  */

  accordions.forEach((accordion,index)=>{

    const body =
      accordion.querySelector(".faq-body");

    const answer =
      accordion.querySelector(".faq-answers");

    const icon =
      accordion.querySelector(".faq-icon");

    accordion.dataset.open = "false";

    gsap.set(body,{
      height:0,
      overflow:"hidden"
    });

    gsap.set(answer,{
      opacity:0,
      y:-5
    });

    if(icon){
      gsap.set(icon,{
        rotation:0
      });
    }

  });


  /*
  OPEN FIRST ITEM
  */

  if(accordions[0]){

    const first =
      accordions[0];

    const body =
      first.querySelector(".faq-body");

    const answer =
      first.querySelector(".faq-answers");

    const icon =
      first.querySelector(".faq-icon");

    first.dataset.open = "true";

    gsap.to(body,{
      height:answer.scrollHeight,
      duration:0.3,
      ease:"power2.inOut"
    });

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

    if(icon){
      gsap.to(icon,{
        rotation:45,
        duration:0.3,
        ease:"power2.inOut"
      });
    }

  }


  /*
  CLICK EVENT
  */

  accordions.forEach(accordion => {

    const heading =
      accordion.querySelector(".faq-heading");

    if(!heading) return;

    heading.addEventListener("click",()=>{

      if(isAnimating) return;

      isAnimating = true;

      const body =
        accordion.querySelector(".faq-body");

      const answer =
        accordion.querySelector(".faq-answers");

      const icon =
        accordion.querySelector(".faq-icon");

      const isOpen =
        accordion.dataset.open === "true";


      /*
      CLOSE OTHER ITEMS
      */

      accordions.forEach(other => {

        if(
          other !== accordion &&
          other.dataset.open === "true"
        ){

          const otherBody =
            other.querySelector(".faq-body");

          const otherAnswer =
            other.querySelector(".faq-answers");

          const otherIcon =
            other.querySelector(".faq-icon");

          gsap.to(otherBody,{
            height:0,
            duration:0.3,
            ease:"power2.inOut"
          });

          gsap.to(otherAnswer,{
            opacity:0,
            y:-5,
            duration:0.2,
            ease:"power2.in"
          });

          if(otherIcon){
            gsap.to(otherIcon,{
              rotation:0,
              duration:0.3,
              ease:"power2.inOut"
            });
          }

          other.dataset.open = "false";
        }

      });


      /*
      OPEN CURRENT
      */

      if(!isOpen){

        gsap.to(body,{
          height:answer.scrollHeight,
          duration:0.3,
          ease:"power2.inOut",
          onComplete:()=>{
            isAnimating = false;
          }
        });

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

        if(icon){
          gsap.to(icon,{
            rotation:45,
            duration:0.3,
            ease:"power2.inOut"
          });
        }

        accordion.dataset.open = "true";
      }


      /*
      CLOSE CURRENT
      */

      else{

        gsap.to(body,{
          height:0,
          duration:0.3,
          ease:"power2.inOut",
          onComplete:()=>{
            isAnimating = false;
          }
        });

        gsap.to(answer,{
          opacity:0,
          y:-5,
          duration:0.2,
          ease:"power2.in"
        });

        if(icon){
          gsap.to(icon,{
            rotation:0,
            duration:0.3,
            ease:"power2.inOut"
          });
        }

        accordion.dataset.open = "false";
      }

    });

  });

});
</script>