問題タブ [scrolltrigger]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
svelte - onMount が 2 回呼び出されない
SvelteKit と Gsap + scrollTrigger で簡単な Web サイトを構築しています。構造は次のようなものです: スタートページ / 概要 / サービス / 連絡先
サイト全体で、SVG、テキスト、その他の要素に多くの単純なアニメーションを使用しています。すべて問題ないように見えましたが、ページ間を行ったり来たりしていると、Web ページの速度が非常に遅くなり、最終的にクラッシュし始めたことに気付きました。ブラウザを更新した後、すべてが再びうまくいきました…（ページ間の移動を再開するまで）。ページ遷移時に GSAP ScrollTriggers を強制終了し、再度初期化する必要があることがわかりました。
したがって、scrollTriggers を強制終了しますが、新しい問題が発生します: ナビゲーションを開始し (たとえば、/about から /contact へ)、以前にアクセスしたページに戻ると、onMount が再度呼び出されず、すべてのアニメーションが開始されません。 ... すべてのルート ページで、次のように gsap を使用します。
いずれかのページに移動したときに onMount と onDestroy が起動するかどうかを console.log で確認しました。結果は次のとおりです。
私はプログラミングの専門家ではなく、GSAP と組み合わせた SvelteKit は私のプロジェクトにとって素晴らしい選択のように思えましたが、今は行き詰まっています :-/
助けていただければ幸いです
vue.js - Vuejs ディレクティブ内の gsap.scrollTrigger の更新がトリガーされない
滑らかなスクロールには機関車を、アニメーションには gsap を使用しています。ここで、タイプミスをアニメーション化するディレクティブを作成したいと考えました。
私のアプリケーションには、スムーズ スクローラーを作成し、それを gsap と結合するためのこのコードが含まれています ( https://codepen.io/GreenSock/pen/zYrELYeからコピー)
このコードは正常に動作します
ここで、いくつかの種類のアニメーションを簡単に再利用するためのディレクティブを作成したいと考えています。
ディレクティブはロード時に 1 回実行されますが、onUpdate または onEnter 関数を起動することはありません。
ウィンドウのサイズを変更すると、 onUpdate 関数が起動されますが、スクロールでは発生しません。
小さなデモの 追加を更新https://codesandbox.io/s/gsap-scrolltrigger-ihfbg?file=/directives/char-animation.js
私は何が欠けていますか？
javascript - 水平スクロールトリガーの幅の問題
スクロールするときに、コードにコンテナーの幅に関する問題があります。たとえば、自分の las アイテムがリストに表示されません。なぜこの問題があるのか 理解できません。この水平スクロールには、ScrollTrigger と GSAP を使用します。リストの最後までスクロールできないため、アクティブな要素も間違っています
``https://codepen.io/afonin_vlad/pen/BadoYqM```