【GSAP】GSAP Practice【#４ GSAP TO Special Properties】

【#４ GSAP TO Special Properties】

YouTube: https://youtu.be/53LbNsB7bnE
https://youtu.be/53LbNsB7bnE

今回は「gsap.to」の第２引数のオブジェクトで
よく使用する値について見ていきます。

https://gsap.com/docs/v3/GSAP/gsap.to()

https://gsap.com/docs/v3/Eases

js/main.js

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

  // Initialize Lenis
  const lenis = new Lenis();

  // Use requestAnimationFrame to continuously update the scroll
  function raf(time) {
    lenis.raf(time);
    requestAnimationFrame(raf);
  }

  requestAnimationFrame(raf);

  // gsap code here!

  // gsap.set(".box-1", {
  //   x: 300,
  // });

  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,
    }
  );

  // windowResize(() => {
  //   gsap.to(".box-1", {
  //     x: window.innerWidth - 160,
  //     duration: 3,
  //   });
  // });
});

// let timer;

// const windowResize = (fn) => {
//   window.addEventListener("resize", () => {
//     clearTimeout(timer);
//     timer = setTimeout(() => {
//       console.log("resize");
//       fn();
//     }, 500);
//   });
// };