【GSAP】GSAP Practice【#6 GSAP Change Code to Class】

【#6 GSAP Change Code to Class】

YouTube: https://youtu.be/D_1uCpFZrlg
https://youtu.be/D_1uCpFZrlg

今回は、ここまでのコードをクラスにまとめて
すっきりさせていきます。

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() {
    gsap.to(".box-1", {
      x: 500,
      duration: 3,
      delay: 0,
      yoyo: true,
      repeat: -1,
      ease: "power4.out",
    });

    gsap.from(".box-2", {
      x: 500,
      duration: 3,
      delay: 1,
    });

    gsap.fromTo(
      ".box-3",
      {
        x: 500,
      },
      {
        x: 200,
        duration: 3,
        delay: 2,
      }
    );
  }

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