Zenn
🖋️

【GSAP】GSAPでホバーアクションを実装する

2023/08/05に公開
GSAP
tech

はじめに

これまで実務でホバーアクションを実装する際はCSSのみで行っていましたが、先日GSAPを使って実装したため、備忘録的に記事にしておきます！

実装サンプル

const btn_hover = 
gsap.timeline({
   paused: true
})
  .to(".btn",{
  background:"#1C1D1D",
        })
  .to(".txt",{
  yPercent:-100,
        },"<");

$("#hover_trigger").hover(
  function(){
    btn_hover.play();
  },
  function(){
    btn_hover.reverse();
  }
);

解説

サンプルコードの中身を解説します。サンプルコードでは以下２点の記述で構成されています。

  • アニメーションの記述
  • 対象をホバーした際にアニメーションを実行する記述

①アニメーションの記述

const btn_hover = 
gsap.timeline({
   paused: true
})
  .to(".btn",{
  background:"#1C1D1D",
        })
  .to(".txt",{
  yPercent:-100,
        },"<");

ボタンをホバーした場合、下記アニメーションが同時に実行されます。

  • ボタンの色をbackground:"#1C1D1D"に変更
  • 予め隠しておいた「view more」をtransform:translate(-100%); で出現させる。

そしてこの内容を「const btn_hover」として定義しておきます。
※btn_hoverは任意の名前でOKです。

また、ホバーされた際に初めてアニメーションを実行させたいので、下記のように「paused: true」と書いておきます。
※これを書かないと読み込まれた瞬間にアニメーションが実行されてしまいます。

gsap.timeline({
   paused: true
})

②要素をホバーした際にアニメーションを実行する記述

$("#hover_trigger").hover(
  function(){
    btn_hover.play();
  },
  function(){
    btn_hover.reverse();
  }

ボタンをホバーした場合は「btn_hover.play();」でアニメーションが実行されます。
ホバーを離した場合はアニメーションを逆再生してもとに戻したいので「btn_hover.reverse();」と記述します。

おわりに

GSAPのTimelineを使えば、より複雑なホバーアクションをシンプルな記述で実装できるので便利かと思います！

GSAPを使う際の参考になれば幸いです。
それでは。

Discussion