【GSAP】GSAP Practice【#7 GSAP Timeline】

【#7 GSAP Timeline】

YouTube: https://youtu.be/zw5vOme3dZw
https://youtu.be/zw5vOme3dZw

今回は「Timeline」について解説していきます。

https://gsap.com/docs/v3/GSAP/Timeline/

js/main.js

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

class App {
  constructor() {
    this._initialize();
    this._renderLenis();
  }

  _initialize() {
    this._createLenis();
    this._sec1Anime();
    this._sec2Anime();
  }

  _createLenis() {
    this.lenis = new Lenis();
  }

  _renderLenis(time) {
    this.lenis.raf(time);
    requestAnimationFrame(this._renderLenis.bind(this));
  }

  _sec1Anime() {
    const tl = gsap.timeline();

    tl.to(".box-1", {
      x: 500,
      duration: 3,
    });

    tl.to(".box-1", {
      rotation: 360,
    });

    tl.to(".box-2", {
      x: 500,
      duration: 3,
    });
    tl.to(".box-3", {
      x: 500,
      duration: 3,
    });
  }

  _sec2Anime() {
    gsap.to(".box-4", {
      x: 600,
      duration: 3,
      opacity: 0,
      stagger: {
        each: 1,
        from: "center",
        yoyo: true,
        repeat: -1,
        ease: "power4.out",
      },
    });
  }
}