Aula 3 Minicurso

		
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>

<script>
  // use a script tag or an external JS file
  document.addEventListener("DOMContentLoaded", (event) => {
    gsap.registerPlugin(ScrollTrigger);

    const linhaDoTempo = gsap.timeline({
      scrollTrigger: {
        trigger: ".divPai",
        start: "top top",
        end: "+=2000",
        pin: true,
        scrub: 2,
      },
    });

    linhaDoTempo.to(".divGradient", {
      opacity: 0,
      duration: 1,
    });

    linhaDoTempo.from(
      ".divGradient2",
      {
        opacity: 0,
        duration: 1,
      },
      "<"
    );

    linhaDoTempo.to(
      ".tituloHero",
      {
        opacity: 0,
        duration: 1,
      },
      "<"
    );

    const listaCards = document.querySelectorAll(".card");

    listaCards.forEach((xuxa) => {
      linhaDoTempo.from(xuxa, {
        opacity: 0,
        filter: "blur(30px)",
        duration: 0.5,
      });

      linhaDoTempo.to(
        xuxa,
        {
          opacity: 0,
          filter: "blur(30px)",
          duration: 0.5,
        },
        "+=.5"
      );
    });
    
    linhaDoTempo.to(
      ".divGradient2",
      {
        opacity: 0,
        duration: 0.5,
      },
      "-=.5"
    );
    
    linhaDoTempo.from(
      ".divObrigado",
      {
        opacity: 0,
        duration: 0.5,
      },
      "<"
    );

    linhaDoTempo.to(
      ".divObrigado",
      {
        scaleX: 1,
        rotateX: 0,
        top: 0,
        borderRadius: 0,
        duration: 1,
      }
    );
  });
</script>