1

まず第一に、私は GSAP と ScrollMagic を初めて使用するので、ここでばかげた質問をしている可能性がある場合はご容赦ください。私はインターネットを見てきましたが、私の問題に対する正しい答えを見つけることができませんでした.

とにかく、私はタイムラインを作成しようとしています。各「to」関数の完了時に、特定のパラメーターを使用して外部関数への呼び出しが行われます。

var controller = new ScrollMagic.Controller();
var timeline = new TimelineLite();
var div = $('div');

timeline.to(div, 0.5, {
   opacity: 0,
   onComplete: toggleOverlay(0)
}, "part-1")

.to(div, 0.5, {
   opacity: 1,
   onComplete: toggleOverlay(1)
}, "part-2")

.to(div, 0.5, {
   opacity: 0,
   onComplete: toggleOverlay(2)
}, "part-3");

var scene = new ScrollMagic.Scene({
   triggerElement: "#trigger-event",
   duration: 500
})
.setTween(timeline)
.addTo(controller);

function toggleOverlay(i){
   console.log(i);
}

ここで何が起こるか: スクロール位置が「#trigger-event」に達すると、タイムラインが呼び出されます。その後、「.to」関数は、トリガー イベントの後、終了 (期間) 前のスクロール位置に基づいて呼び出されます。

ここで直面する問題は、onComplete 関数がページの読み込み時に直接呼び出されることです。これはおそらく「.setTween(timeline)」と関係があります。タイムライン全体に読み込まれると想像できます。

私の問題の解決策は何ですか、または良い代替方法は何ですか?

編集: ここに JSFiddle があります: https://jsfiddle.net/04db5ja5/

よろしくお願いします、エンツィオ

4

1 に答える 1

1

かっこを使用して関数をすぐに呼び出しました()。この回答を読んで、関数を変数に割り当てることと実際にすぐに実行することの違いをよりよく理解してください。

GSAP では、次のように括弧なしでtriggerOverlay関数を割り当てる方法があります。onComplete

...
onComplete: toggleOverlay
...

追加のパラメーターを受け取るには、次のonCompleteParamsように、それらを配列として渡すために呼び出されるものがあります。

...
onCompleteParams: [0]
...

したがって、全体的なコードは次のようになります。

...
timeline.to(div, 0.5, {
   opacity: 0,
   onComplete: toggleOverlay,
   onCompleteParams: [0]
}, "part-1")

.to(div, 0.5, {
   opacity: 1,
   onComplete: toggleOverlay,
   onCompleteParams: [1]
}, "part-2")

.to(div, 0.5, {
   opacity: 0,
   onComplete: toggleOverlay,
   onCompleteParams: [2]
}, "part-3");
...
于 2015-12-17T10:53:34.447 に答える