GSAPで一文字ずつテキストをアニメーションさせる

  • Updated: 2023.11.16
  • Published: 2023.06.07
  • 2,603views

概要

このページのようにテキストを一文字ずつ表示させるアニメーションをGSAPを使用して実装します。


スクリプト

import gsap from "gsap";
import ScrollTrigger from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);

function setTextAnim(){
  let setAnim = ($item)=>{
    let rnd = 'rnd' + Math.round(Math.random()*1000);
    let target = `.${rnd} .letter`;
    $item.classList.add(rnd);
    $item.innerHTML = $item.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

    setTimeout(()=>{
      gsap.set(target,{
        y: 50, //表示状態の指定
        opacity:0,
      });
      gsap.to(target, {
        duration: 0.3, //アニメーションの時間の設定
        y: 0, //表示状態の指定
        opacity:1,
        ease:"back",
        //同じclass名のバリデーションの設定
        stagger: {
          each: 0.05, //ディレイ時間
          from: "start", //出現方法の指定
        },
        scrollTrigger: {
          trigger: target,
          start: 'top 80%',
        }
      });
    },10);
  };
  let $items = document.querySelectorAll('[data-anime="framein"]');
  $items.forEach((item)=>{
    setAnim(item);
  });
}

window.addEventListener('load',()=>{
  setTextAnim();
});

使い方

<p data-anime="framein">アニメーションさせるテキスト</div>

要素にdata-anime=”framein”を追加する


ソース

https://github.com/hiron712/gsap_text_anim

人気の投稿

最新の投稿

タグ

月別アーカイブ

Contact

WEB制作の依頼など気軽にお問い合わせください。

お問い合わせ