Web活のロゴ

Web制作Output&初心者のための徹底ガイド

Gsapを使用した
メインビジュアルのアニメーション #1/2

2023.09.08Gsapでメインビジュアルのアニメーション
はじめに
概要

Gsapを使用して、メインビジュアルのアニメーションを実装します。参考にしていただければ幸いです。

スポンサーリンク
※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。

実装のアニメーション

リプレイ
  • テキスト
  • テキストテキスト
  • テキスト

まず、画面全体を黒色のカバーで覆います。 カバーを4つに区切り、画面外にスライドさせた後、メインビジュアルのテキストを表示させています。

スポンサーリンク

ポイントの解説

gsapのtilelineでアニメーションを制御する。tilelineについてはこちらを参照ください。

4つに区切るボックスの中に子要素で更にボックスを作ることにより、アニメーションがより明確になります。 以下はspanタグを使った一例です。

<div class="content-cover flex absolute top-0 left-0 right-0 w-[100%] h-[100vh]">

  <span class="overflow-hidden w-[20%] flex">
    <span class="js_1 bg-black w-[100%]"></span>
  </span>

  <span class="overflow-hidden w-[20%] flex">
    <span class="js_1 bg-black w-[100%]"></span>
  </span>

  <span class="overflow-hidden w-[20%] flex">
    <span class="js_1 bg-black w-[100%]"></span>
  </span>

  <span class="overflow-hidden w-[20%] flex">
    <span class="js_1 bg-black w-[100%]"></span>
  </span>

  <span class="overflow-hidden w-[20%] flex">
    <span class="js_1 bg-black w-[100%]"></span>
  </span>

</div><!-- /.content-cover -->

サンプルコード

サンプルコードを配布いたします。参考にしていただければ幸いです。
スポンサーリンク
まとめ
  • gsapを使えば複雑なアニメーションも簡単に実装ができる
  • アニメーションの制御にはtimeline()関数を使用
  • CSSアニメーションの知識を活かすことができる