A Comprehensive list of GSAP resources for Webflow developers

This list is not meant to be exhaustive, but rather a small selection of tools and resources that will help a webflow developer to get started on the GSAP journey.

Start Learning GSAP now
Skyline

GSAP for webflow dev course: Learn by building a Awwward winning site

In this course we are going to rebuild Studo Rhe's site Using GSAP.
You can start by Cloning this project.

People you should follow

Resources to get you started with GSAP in record time

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

DOM Content loaded

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

Code to split the text into spans

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

For each loop

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

Tracking the first and second click

//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",
    });

Horizontal scroll code by Timothy Ricks

GSAP Basics

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

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

GSAP To Tween

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

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

GSAP From Tween

// 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 From to Tween

// 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 });

GSAP Scroll Trigger

Tying to implement GSAP on your webflow site and stuck somewhere?

Drop us a message and we will try our best to guide you toward the right direction.

Help me with GSAP
A man with a confused expression with a question mark over his head