A Comprehensive list of GSAP resources for Webflow developers

window.addEventListener("DOMContentLoaded", (event) => {
	// your code here
});

 <script src="https://unpkg.com/split-type"></script>
<script>
// text splitting code
  let typeSplit;

  function runSplitType() {
    typeSplit = new SplitType("[split-text]", {
      types: "lines, words, chars",
      tagName: "span"
    });
  }

  runSplitType();

  //Run the code when window width changes
  let windowWidth = window.innerWidth;
  window.addEventListener("resize", function () {
    if (windowWidth !== window.innerWidth) {
      windowWidth = window.innerWidth;
      typeSplit.revert();
      runSplitType();
    }
  });
</script> 

$(".class-name").each(function (index) {
  // your code here
});

// navbar first and second click
    $(".trigger-class").on("click", function () {
      $(this).toggleClass("clicked");
      if ($(this).hasClass("clicked")) {
      // first click code
      } else {
      // second click code
      }
    });

//Set sticky section heights based on inner content width
    // Makes scroll timing feel more natural
    function setTrackHeights() {
      $(".horizontal-scroll_section-height").each(function (index) {
        let trackWidth = $(this).find(".horizontal-scroll_track").outerWidth();
        $(this).height(trackWidth);
      });
    }
    setTrackHeights();
    window.addEventListener("resize", function () {
      setTrackHeights();
    });

    // Add horizontal scroll to the page
    let horizontalMainTl = gsap.timeline({
      scrollTrigger: {
        trigger: ".horizontal-scroll_section-height",
        start: "top top",
        end: "bottom bottom",
        scrub: 1
      }
    });
    horizontalMainTl.to(".horizontal-scroll_track", {
      xPercent: -100,
      ease: "none",
    });

// gsap to animtion 
let tl = gsap.timeline();

tl.to(".box", {
  rotation: 180,
  x: 200,
  duration: 1
});

// gsap from animtion
let tl = gsap.timeline();

tl.from(".box", {
  rotation: 180,
  x: 200,
  duration: 1
});

// gsap from to animtion
let tl = gsap.timeline();

tl.fromTo(
  ".box",
  {
    rotation: 180,
    y: 100,
    x: 100
  },
  {
    rotation: 0,
    y: 0,
    x: 300,
    duration: 2
  }
);

// gsap scroll trigger 
let tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".trigger-class",
    start: "top top",
    end: "bottom bottom",
    // toggleActions: "play none none none",
    //markers: true,
    scrub: true
  }
});
tl.to(".target-class", { opacity: 0 });