如何在GSAP和ScrollMagic中設置底部和不透明屬性的動畫效果？

Question

使用下面的代碼，我可以錯開動畫位置並淡入文本。但是我想要完成的是移動，淡入，，然後在滾動結束時淡出所有複製回0。所以移動工作正常。我只想讓相同的<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 

方的問題：如果動畫鍵通過ScrollMagic滾動，什麼是以下行1爲：.staggerTo('#parallax p', 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);