My Gallery Site

GSAP CODE

TOPページで適用したGSAP用コードです。スクロールトリガーのプラグインも使いました。
様々な動きによって専用プラグインも豊富に揃えられて、動作の仕組みに慣れるのに少し時間がかかりました。

組み合わせによって色々なバリエーションが組めるので、LPやプロモーションサイトだったらかなり重宝しそうです。

//js
const elements = document.querySelectorAll('.animeText');
elements.forEach((elem) => {
  const word = elem.textContent;
  //console.log('word', word);
  elem.innerHTML = '';

  //wordごとにspanで囲む
  word.split(' ').forEach(function (c) {
    elem.innerHTML += '<span class="word">' + c + '</span>';
  });

  //textごとにspanで囲む
  let words = elem.querySelectorAll(".word");
  words.forEach((word) => {
    const text = word.textContent;
    word.innerHTML = '';

    text.split('').forEach(function (c) {
      word.innerHTML += '<span class="letter">' + c + '</span>';
    });

    const letter = elem.querySelectorAll(".letter");

    gsap.set(letter, {
      y: 100,
      autoAlpha: 0
    });

  //textアニメーション
    gsap.to(letter, {
      y: 0,
      autoAlpha: 1,
      duration: 0.5,
      ease: 'power3.out',
      stagger: 0.03,
      scrollTrigger: {
        trigger: elem,
        start: 'top center',
        end: 'bottom center',
        toggleActions: 'play none none reverse',
      }
    });
  });
});

//forEachうまく差し込めないので個別で
const boxShow = (box, trg) => {
  gsap.set(box, {
    y: 40,
    autoAlpha: 0
  });

  gsap.to(box, 1, {
    y: 0,
    autoAlpha: 1,
    scrollTrigger: {
      trigger: trg,
      start: '20px',
      toggleActions: 'play none none',
    }
  });
}
boxShow('.eBox1', '#header');
boxShow('.eBox2', '#section1');
boxShow('.eBox3', '#section2');
boxShow('.eBox4', '#section3');
boxShow('.eBox5', '#section4');


//パララックス
/*これNuxt3でエラーになるので外した
let panels = gsap.utils.toArray(".panel");
panels.forEach((panel, i) => {
  ScrollTrigger.create({
    trigger: panel,
    start: () => panel.offsetHeight < window.innerHeight ? "top top" : "bottom bottom",
    pin: true,
    pinSpacing: false,
    toggleActions: 'play none none reverse',
  });
});
*/

TOP PAGE

Gallery Nuxt.ver

js・php開発用サイト

GSAP CODE