GSAPで作る！marqueeのような無限スクロールアニメーション

記事は上記記事を意訳したものです。

※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。

まず最初に: GSAPについて興味があるけれど、正確に何なのかわからないためにここに来ましたか? 簡単な概要を説明しましょう。

GSAPとは?

GSAPはGreenSockが提供するJavaScriptアニメーションライブラリです。高品質なGSAPアニメーションを作成することができ、どのブラウザでも優れたパフォーマンスを発揮します。

また、GSAPライブラリの機能を拡張するGSAPプラグインもあり、より多くのことを実現できます。

CSSのみでtransformプロパティをアニメーション化してマーキー効果を作成することは確かに可能です。しかし、このチュートリアルではGSAPを使用して構築する方法について説明します。これにより、このライブラリの追加機能をすべて活用することができます。

最も基本的な形式では、GSAPでマーキーを作成するために必要なのは、horizontalLoop()とverticalLoop()のヘルパー関数だけです。

今回は、より一般的な水平方向のGSAPマーキーアニメーションにのみ焦点を当てます。

注目すべき点として、水平マーキーには多くのアクセシビリティの課題があります。移動するテキストは注意を逸らし、読みにくい場合があります。このような表示方法でどのようなコンテンツを表示するかは慎重に検討してください！

最も単純な実装では、以下のようなデモを考えてみましょう。ロゴを無限にアニメーション化します:

window.addEventListener("load", function () {
  horizontalLoop(".marquee-item", {
    repeat: -1,
    paddingRight: 40,
    speed: 0.5,
  });
});

paddingRight設定プロパティに注目してください。GSAPマーキーアイテム間のギャップ(40px)に一致する値を使用しています。

これは、最初と最後の要素の重なりを防ぎ、他の要素と一致するスペースを与えるためです。つまり、paddingRight: 0とすると、異なる結果になります。

この例では、各マーキーアイテムは同じテキストとLottieアニメーションを含んでいます。HTMLを肥大化させないために、JavaScriptを使用して水平マーキーアイテムを生成します。実際のシナリオでは、アクセシビリティを向上させるためにARIA属性を追加することもできます。

アイテムにホバーするたびにHTMLマーキー効果が一時停止します。これを実現するために、GSAPタイムラインで利用可能なpause()/)とplay()/)メソッドを使用します。

より複雑な例を見てみましょう。この例では、反対方向に動く2つの水平マーキー効果があります。

方向はdata-reversed HTML属性の値によって決定されます。

このデモの興味深い点は何でしょうか？GSAPのmatchmedia()/)メソッドを使用して、画面サイズに応じて異なるpaddingRightとspeedプロパティ値を適用しています。ブラウザウィンドウのサイズを変更して確認してみてください。

次のデモでは、GSAPのScrollTriggerプラグインを使用します。マーキーは表示されているときにのみ再生されます。これにより、サイト訪問者がすべてのアニメーションアイテムを確実に見ることができるようにしています。

ブラウザのインスペクターを使用して、HTMLマーキーがビューポートから出たときにGSAPアニメーションが停止する様子をテストしてください。

この例では、マーキーがスライダーのように動作します。自動再生され、前後に移動するための矢印があります。

さらに、GSAPのDraggableプラグインを使用してドラッグ機能を有効にしています。これはhorizontalLoop()関数にdraggable: true設定プロパティを渡すことで実現しています。

GSAPのプレミアムまたはビジネスメンバーの場合、Inertiaプラグインを使用してドラッグをよりスムーズにすることができます。

ボーナス機能として、画像にホバーするたびにHTMLマーキーが停止します。その瞬間、対応するオーバーレイがスライドGSAPアニメーションで表示されます。

ここでも、ブラウザウィンドウのサイズを変更してレイアウトの変化を確認してください。

構築したGSAPマーキーを楽しんでいただけたでしょうか。これで、独自のマーキーを構築するための十分な知識とインスピレーションを得ることができました。

最後に、このチュートリアルのすべてのデモをCodePen Collectionに追加しました。

いつもお読みいただき、ありがとうございます！