Matrix themes - Updates #19

<!-- Include GSAP and plugins -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script> 
<script src="https://cdn.jsdelivr.net/npm/split-type@0.3.4/umd/index.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script> 
<script>
/* <![CDATA[ */
(function($) {
  $(document).ready(function() {
      
    gsap.registerPlugin(ScrollTrigger);

    // Split text into spans for elements with the attribute [text-split]
    function initSplitType(selector) {
      $(selector).each(function() {
        new SplitType(this, {
          types: "words, chars",
          tagName: "span"
        });
      });
    }

    // Reusable function to create scroll triggers
    function createScrollTrigger(triggerElement, timeline, options = {}) {
      ScrollTrigger.create({
        trigger: triggerElement,
        start: options.start || "top 60%",
        end: options.end || "bottom top",
        onEnter: () => timeline.play(),
        onLeaveBack: () => timeline.reverse()
      });
    }

    // Animation functions
    function animateWordsSlideUp() {
      $("[words-slide-up]").each(function () {
        let tl = gsap.timeline({ paused: true });
        tl.from($(this).find(".word"), {
          opacity: 0,
          yPercent: 100,
          duration: 0.5,
          ease: "back.out(2)",
          stagger: { amount: 0.5 }
        });
        createScrollTrigger(this, tl);
      });
    }

    function animateWordsRotateIn() {
      $("[words-rotate-in]").each(function () {
        let tl = gsap.timeline({ paused: true });
        tl.set($(this).find(".word"), { transformPerspective: 1000 });
        tl.from($(this).find(".word"), {
          rotationX: -90,
          duration: 0.6,
          ease: "power2.out",
          stagger: { amount: 0.6 }
        });
        createScrollTrigger(this, tl);
      });
    }

    function animateWordsSlideFromRight() {
      $("[words-slide-from-right]").each(function () {
        let tl = gsap.timeline({ paused: true });
        tl.from($(this).find(".word"), {
          opacity: 0,
          x: "1em",
          duration: 0.6,
          ease: "power2.out",
          stagger: { amount: 0.2 }
        });
        createScrollTrigger(this, tl);
      });
    }

    function animateLettersSlideUp() {
      $("[letters-slide-up]").each(function () {
        let tl = gsap.timeline({ paused: true });
        tl.from($(this).find(".char"), {
          yPercent: 100,
          duration: 0.2,
          ease: "power1.out",
          stagger: { amount: 0.6 }
        });
        createScrollTrigger(this, tl);
      });
    }

    function animateLettersSlideDown() {
      $("[letters-slide-down]").each(function () {
        let tl = gsap.timeline({ paused: true });
        tl.from($(this).find(".char"), {
          yPercent: -120,
          duration: 0.3,
          ease: "power1.out",
          stagger: { amount: 0.7 }
        });
        createScrollTrigger(this, tl);
      });
    }

    function animateLettersFadeIn() {
      $("[letters-fade-in]").each(function () {
        let tl = gsap.timeline({ paused: true });
        tl.from($(this).find(".char"), {
          opacity: 0,
          duration: 0.2,
          ease: "power1.out",
          stagger: { amount: 0.8 }
        });
        createScrollTrigger(this, tl);
      });
    }

    function animateLettersFadeInRandom() {
      $("[letters-fade-in-random]").each(function () {
        let tl = gsap.timeline({ paused: true });
        tl.from($(this).find(".char"), {
          opacity: 0,
          duration: 0.05,
          ease: "power1.out",
          stagger: { amount: 0.4, from: "random" }
        });
        createScrollTrigger(this, tl);
      });
    }

    function animateScrubEachWord() {
      $("[scrub-each-word]").each(function () {
        let tl = gsap.timeline({
          scrollTrigger: {
            trigger: this,
            start: "top 90%",
            end: "top center",
            scrub: true
          }
        });
        tl.from($(this).find(".word"), {
          opacity: 0.2,
          duration: 0.2,
          ease: "power1.out",
          stagger: { each: 0.4 }
        });
      });
    }

    // Initialize SplitType and animations
    initSplitType("[text-split]");

    animateWordsSlideUp();
    animateWordsRotateIn();
    animateWordsSlideFromRight();
    animateLettersSlideUp();
    animateLettersSlideDown();
    animateLettersFadeIn();
    animateLettersFadeInRandom();
    animateScrubEachWord();

    // Avoid flash of unstyled content
    gsap.set("[text-split]", { opacity: 1 });
    // Apply overflow: hidden to .word elements
      $(".word").css("overflow", "hidden");
  });
})(jQuery);
/*]]>*/
</script>
<div class="matrix-msg invisible">
    GSAP animations
</div>

<p words-slide-up="" text-split="">
   Whatever it is, the way you tell your story online can make all the difference
</p>