GSAPとScrollMagicの下部と不透明の属性をどのようにアニメーション化しますか？

Question

次のコードで私は位置をアニメーション化してテキストをフェードインすることができます。しかし、私が達成したいのは、移動、フェードイン、、次にすべてのコピーをスクロールの最後までフェードアウトします。だから動きはうまくいきます。私はちょうど同じ<p>タグを消してからスクロールの最後に戻したいと思います。

// init controller to hold all commands/animations 
const controller = new ScrollMagic.Controller({ addIndicators: true }); 

const tween1 = TweenMax 
    .staggerTo('#parallax p', 1, { 
    bottom: $('#parallax').height(), 
    opacity: 1, 
    }, 0.06); 

// All commands/animations live in a scene 
new ScrollMagic.Scene({ 
    // Element to watch 
    triggerElement: '#parallax', 
    // Point at which animation starts, default is center of screen 
    triggerHook: 0, // 1 onEnter, .5 onCenter (Defualt), 0 onLeave 
}) 
.setPin('#parallax') 
.setTween(tween1) 
.duration('100%') // Percentage of full screen or hard-wired number of pixels 
.addIndicators({ name: 'FADES' }) // Indicators marked on screen 
.addTo(controller); // Add this scene to controller 

サイド質問：.staggerTo('#parallax p', 1, {：アニメーションがScrollMagicをスクロールするためにキーが付いている場合は、次の行にあるため1を何ですか？

編集：より多くのこのような、より適切なCodePen added

Answer 1

何か？ https://codepen.io/motionimaging/pen/155bf1892710fb95dcc81ddb7201adb0/

// init controller to hold all commands/animations 
const controller = new ScrollMagic.Controller({ addIndicators: true }); 

var timeline = new TimelineMax(); 
var tween1 = TweenMax.staggerFromTo("#two p", 1, {bottom: 0},{bottom: $('#two').height()}, 0.1); 

var tween2a = TweenMax.staggerTo("#two p", 0.5,{ opacity: 1 }, 0.1); 

var tween2b = TweenMax.staggerTo("#two p", 0.35,{ opacity: 0 }, 0.1); 

timeline.add(tween1, 0) 
    .add(tween2a, 0) 
    .add(tween2b, 0.5); 

new ScrollMagic.Scene({ 
    triggerElement: "#two", 
    triggerHook: 0, 
}) 
.setTween(timeline) 
.setPin("#two") 
.duration("200%") 
.addIndicators({ name: "FADES" }) 
.addTo(controller);