ScrollMagicで複数の要素をピンで重ねる方法は？

Question

私は内部に3つの要素を持つ9つのスライドを持っており、GreensockとScrollmagicでアニメーション化されています。現在、ページは非常に長く、setPin()を使用すると、すべての要素が狂っています。ここで

は一例です：

https://codepen.io/htmltuts/pen/prVVwK

私が欲しいものだけでアニメーションが動作し続けるべきである、私はページをスクロールするたびに、私はページ位置が同じになりたいということです。 3つの要素がアニメーション化された後、は消え、他の3つは同じ位置に来て同じアニメーションを開始します。

すべてのコンテナを固定し、ページ内にスクロール動作を残すことは可能ですか？

Answer 1

私はあなたのことを正しく理解していれば、あなたのペン項目を修正することを意味します。

そんなにアニメーションをトリガするためのスクロール/トリガ要素を作成し、アニメーション要素&スクロールトリガー要素

aport破ることができた。

（私の例ではと呼ばれるブロック＃は、あなたがCSSでこれを非表示にできます）

その後 https://codepen.io/ray1618/pen/XaqPQv

// init controller 
var controller = new ScrollMagic.Controller(); 

var tween1 = new TimelineMax(); 
tween1.to('.fixedblock1', 1, {rotation: 180, ease:Power0.easeNone}); 

var tween2 = new TimelineMax(); 
tween2.to('.fixedblock2', 1, {rotation: 180, ease:Power0.easeNone}); 

var tween3 = new TimelineMax(); 
tween3.to('.fixedblock3', 1, {rotation: 180, ease:Power0.easeNone}); 

var triggerHookNum = 0.5; 
var durationNum = "40%"; 

// build scene 
var scene = new ScrollMagic.Scene({triggerElement: ".block1", offset: 50, triggerHook: triggerHookNum, duration: durationNum}) .setTween(tween1).addIndicators().addTo(controller); 
var scene2 = new ScrollMagic.Scene({triggerElement: ".block2", triggerHook: triggerHookNum, duration: durationNum}).setTween(tween2).addIndicators().addTo(controller); 
var scene3 = new ScrollMagic.Scene({triggerElement: ".block3", triggerHook: triggerHookNum, duration: durationNum}).setTween(tween3).addIndicators().addTo(controller); 

以下

マイsimplefied例にアニメーション化する固定要素を作成します