ScrollLegelを使用してオブジェクトを構築するには?nezukoのアニメーション

この動画はとても驚くべきものですが、実際にはかなり簡単です.GSapは、我々がスクロールに基づくViewPortとトリガーアニメーションにオブジェクトをアニメーション化するのを可能にするSlrollVectorプラグインを提供します.ここでは、我々だけでなく、アニメーションをトリガするだけでなく、我々のスクロールに要素の動きを接続します.

セットアップ
私は、デモンストレーション目的のために単純なHTMLとバニラJSを使っています.しかし、GSAPとScrollAgentは、反応とVueのようなフロントエンドフレームワークで使用することができます.
セットアップのために、私たちは、CDNを使用することでgsapとscrolltriggerパッケージをインポートするだけです.そして、我々のJSとCSSファイルをリンクしてください.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>

HTMLに関しては、イメージの代わりにSVGを使うことを強く勧めます.例えば、ここでは目、鼻、ドレス、ヘアバンドをアニメーションしています.SVGオブジェクトを使うなら、CSSを使ってスタイルを作る必要はありません.イメージを使用する場合は、オブジェクトの各要素を非常に慎重に完全なオブジェクトに似て配置する必要があります.しかしSVGでは、各要素はそれぞれの場所に既に位置している.
私は350行のように長いので、全体のSVGを投稿できません.しかし、私はSVGの基本的なレイアウトのスクリーンショットを共有します.
私は、FigmaコミュニティでこのSVGを見つけました.https://www.figma.com/file/6abCcAz76OF2rigS2G1WXC/nezuko-kamado-(Community)?node-id=0%3A1
この人はすばらしい仕事をしています.
https://www.figma.com/@sulaiman

上記のSVGで見ることができるように、目、鼻、ドレスとヘアバンドのような各々の要素はグループ化されて、IDを与えられます.
初期設定はこのようになります.


スクロールトリガの設定
まず、スクロールトリガープラグインを登録する必要があります.
次に、GSAPタイムラインを作成し、ScrollLegelプロパティを含むオブジェクトを渡す必要があります.

gsap.registerPlugin(ScrollTrigger);
gsap
  .timeline({
    scrollTrigger: {
      trigger: ".nezuko",
      start: "center center",
      end: "bottom center",
      scrub: true,
      pin: true,
    },
  })

トリガーは、アニメーションをトリガするオブジェクトです.今、あなたはSVGタグ自体で「. nezuko」クラスを使うことが非常に重要です.SVGのどこかにトリガーを設定すると、SVGはviewportから消えてしまう.
startプロパティとendプロパティはそれぞれアニメーションの開始と終了を定義します.
Scret Set trueには、アニメーションがユーザースクロールに依存していることを意味します.
ピンが真のピンに設定され、ターゲットの要素は、アニメーションが完了するまでビューポートに滞在します.

トリック
そのようなアニメーションへの主なトリックは、我々が最終的なオブジェクトからアニメーション化していないということです.すべての要素を順次構築し、最終的なオブジェクトに到達するのはかなり難しいという意味です.しかし、我々が最初に最終的な物を定めて、それに各々の要素をアニメーション化するならば、それは非常に単純です.
もちろん、ユーザーは、各要素がスクロールの最終的なオブジェクトを構築するために組み合わせる前の経験を持っているでしょう.

gsap.registerPlugin(ScrollTrigger);
gsap
  .timeline({
    scrollTrigger: {
      trigger: ".nezuko",
      start: "center center",
      end: "bottom center",
      scrub: true,
      pin: true,
    },
  })
  .from(".eye", { y: innerHeight * 65.5 })
  .from(".nose", { y: innerHeight * 65.5 })
  .from(".dress", { y: innerHeight * 65.5 })
  .from(".hairband", { y: innerHeight * 65.5 });

それは、15行のコードとあなたのスクロールアニメーションオブジェクトを構築している.私たちは、特定の回にビューポートのinnerheightとy要素をその位置からinthe位置にアニメーション化します.
これが最終結果です.


キーポイント
1 . SVGを使用してください.SVGを使用して貴重な時間を節約します.各要素をリサイズし、CSSを使用して最終目的のオブジェクトを取得するにはあまりにも面倒です.また、アカウントに携帯電話の応答性を取る必要があります.SVGでこれらすべてを処理する.
2 .使用中サイズSVG:ここで使用したSVGはかなり大きい.12645 px * 16756 pxが多すぎます.私はそれが使用可能な唯一のものだから使用します.このような大きなサイズを使用する場合は、上記のようにいくつかの狂った番号にinnerheightを乗算する必要があります.通常1.5から2に掛かるinnerheightは、仕事をします.
3 .実験:GSAP、スクロールトリガー、スクラブのプロパティでかなり驚くべきことができます.あなたのアニメーションのためのスイートスポットを見つけるためにこれらの実験.空は限界だ.
そこにあります.スクロールアニメーションを用いたスウィートネヅコの構築BTW .デーモンスレイヤー.全体の漫画をアニメーション化するのを待つことができません.今シーズン2がストリーミング😁.
何か提案があれば、コメントで知らせてください.あなたの次のプロジェクトで使用しますか?同じアニメーションを達成する他の方法はありますか?あなたの反応を待って.