Split Text

<script src="<https://unpkg.com/split-type>"></script>
<script>
let typeSplit = new SplitType(".work_title", {
  types: "words, chars",
  tagName: "span"
});
</script>

Stagger on Page Load

<script src="<https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js>"></script>
<script>
// On Page Load
function pageLoad() {
  let tl = gsap.timeline({ delay: 0.6 });
  tl.from(".img-grid_photo", {
    scale: 0.6,
    opacity: 0,
    ease: "power3.out",
    stagger: {
      each: 0.1,
      from: "end"
    },
    duration: 0.6
  });
}
pageLoad();
</script>

Stagger on 1st Click / 2nd Click

<script src="<https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js>"></script>
<script>
// First Click / Second Click
$(".hamburger").each(function (index) {
  let tl = gsap.timeline({ paused: true });
  tl.fromTo(
    ".menu_link-text",
    { y: "100%" },
    {
      y: "0%",
      ease: "power2.out",
      stagger: {
        each: 0.2,
        from: "end"
      },
      duration: 0.4,
      delay: 0.6
    }
  );
  $(this).on("click", function () {
    $(this).toggleClass("clicked");
    if ($(this).hasClass("clicked")) {
      tl.restart();
    } else {
      tl.reverse();
    }
  });
});
</script>

Stagger on Hover

<script src="<https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js>"></script>
<script>
// Hover
$(".work_link").each(function (index) {
  let tl = gsap.timeline({ paused: true });
  tl.fromTo(
    $(this).find(".work_title.is-1 .char"),
    { y: "0%" },
    {
      y: "-120%",
      ease: "power2.inOut",
      stagger: {
        each: 0.015
      },
      duration: 0.5
    }
  ).fromTo(
    $(this).find(".work_title.is-2 .char"),
    { y: "120%" },
    {
      y: "0%",
      ease: "power2.inOut",
      stagger: {
        each: 0.015
      },
      duration: 0.5
    },
    0
  );
  $(this).on("mouseenter", function () {
    tl.restart();
  });
  $(this).on("mouseleave", function () {
    tl.reverse();
  });
});
</script>

Stagger on Scroll Into View

<script src="<https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js>"></script>
<script src="<https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js>"></script>
<script>
// Scroll Into View
$(".work_list").each(function (index) {
  let tl = gsap.timeline({
    scrollTrigger: {
      trigger: $(this),
      start: "top center",
      end: "bottom top",
      // "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none"
      toggleActions: "restart none none reverse"
    }
  });
  tl.from($(this).find(".work_line"), {
    width: "0%",
    ease: "power3.out",
    stagger: {
      each: 0.2
    },
    duration: 0.7
  });
});
</script>

Stagger While Scrolling In View

<script src="<https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js>"></script>
<script src="<https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js>"></script>
<script>
// While Scrolling
$(".footer_email").each(function (index) {
  let tl = gsap.timeline({
    scrollTrigger: {
      trigger: $(this),
      start: "top bottom",
      end: "bottom center",
      scrub: 1
    }
  });
  tl.from($(this).find(".char"), {
    y: "30%",
    opacity: 0,
    ease: "power2.out",
    stagger: {
      each: 0.1,
      from: "random"
    },
    duration: 1
  });
});
</script>