3 replies

Greensock (GSAP) ScrollTrigger - 2 consecutive ScrollTrigger animations?

GH: https://github.com/nnall/GSAP/tree/main/experiments/react-playground/src

I have a para that I've applied a 'SplitType' to in order to get the paragraph lines, apply .to() methods to them, and translate them X in my GSAP scrollTrigger animation:

let tl = gsap.timeline();

const my_para = document.querySelector(".reveal-type"); // SELECT PARA
    const text = new SplitType(my_para, { types: "chars, words, lines" });

    const lines = [...text.lines];
    const linesRev = [...lines].reverse();

    // console.log(lines);

    lines.forEach((line, index) => {
      tl.to(
        line,
        {
          x: "-100vw",
          duration: 3,
          // opacity: 1,
        },
        "-=2.5"
      );
    });
    scrollTrigger.create({
      trigger: ".spacer_2",
      start: "45% 100%",
      end: "30% 30%",
      scrub: true,
      markers: true, // for debugging
      animation: tl, // Assign the timeline to ScrollTrigger
    });

let tl = gsap.timeline();

const my_para = document.querySelector(".reveal-type"); // SELECT PARA
    const text = new SplitType(my_para, { types: "chars, words, lines" });

    const lines = [...text.lines];
    const linesRev = [...lines].reverse();

    // console.log(lines);

    lines.forEach((line, index) => {
      tl.to(
        line,
        {
          x: "-100vw",
          duration: 3,
          // opacity: 1,
        },
        "-=2.5"
      );
    });
    scrollTrigger.create({
      trigger: ".spacer_2",
      start: "45% 100%",
      end: "30% 30%",
      scrub: true,
      markers: true, // for debugging
      animation: tl, // Assign the timeline to ScrollTrigger
    });

let tl = gsap.timeline();

const my_para = document.querySelector(".reveal-type"); // SELECT PARA
    const text = new SplitType(my_para, { types: "chars, words, lines" });

    const lines = [...text.lines];
    const linesRev = [...lines].reverse();

    // console.log(lines);

    lines.forEach((line, index) => {
      tl.to(
        line,
        {
          x: "-100vw",
          duration: 3,
          // opacity: 1,
        },
        "-=2.5"
      );
    });
    scrollTrigger.create({
      trigger: ".spacer_2",
      start: "45% 100%",
      end: "30% 30%",
      scrub: true,
      markers: true, // for debugging
      animation: tl, // Assign the timeline to ScrollTrigger
    });

let tl = gsap.timeline();

const my_para = document.querySelector(".reveal-type"); // SELECT PARA
    const text = new SplitType(my_para, { types: "chars, words, lines" });

    const lines = [...text.lines];
    const linesRev = [...lines].reverse();

    // console.log(lines);

    lines.forEach((line, index) => {
      tl.to(
        line,
        {
          x: "-100vw",
          duration: 3,
          // opacity: 1,
        },
        "-=2.5"
      );
    });
    scrollTrigger.create({
      trigger: ".spacer_2",
      start: "45% 100%",
      end: "30% 30%",
      scrub: true,
      markers: true, // for debugging
      animation: tl, // Assign the timeline to ScrollTrigger
    });

Each of the paragraph lines come into screen from the right side (translate x) when the user scrolls downward, starting at the top line moving to the bottom, and with a slight stagger thanks to the

"-=2.5"

"-=2.5"

"-=2.5"

"-=2.5". I want to have a second scrollTrigger animation to move the lines back out - see my comment..

GitHub

GSAP/experiments/react-playground/src at main · nnall/GSAP

for GSAP experimenting. Contribute to nnall/GSAP development by creating an account on GitHub.

Greensock (GSAP) ScrollTrigger - 2 consecutive ScrollTrigger animations?

Similar Threads

Similar Threads

Similar Threads