Javascript 如何在GSAP和ScrollMagic中设置底部和不透明度属性的动画？

使用下面的代码，我能够交错动画的位置和淡入文本。但我想完成的是移动、淡入，然后在滚动结束时将所有副本淡入0。所以搬家很好。我只希望相同的标签在滚动结束时淡入淡出

// 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代表什么：。交错到“视差p”，1，{

---

编辑：更合适

像这样的东西

---

你能创建一个代码笔演示让我们调试吗？谢谢你可以尝试添加另一个tween来淡出它们并在滚动时触发它们。侧面回答：1是每个动画的持续时间。0.06是下一个动画开始的时间。谢谢！代码笔添加到原始帖子中。代码笔看起来很完美。你的意图是什么？你想要什么还不清楚。Ca请您尝试进一步解释。您的解决方案非常有效，因此我接受了答案。谢谢。我添加了一些元素并调整了一些设置，但现在，当滚动后退时，类型不透明度不会消失，显示文本堆叠。显然我不理解，我不确定两者之间的断开你和我的改变起作用的是什么。你需要确保Tween2b在Tween2a之后开始。因此，如果Tween2a的持续时间是0.75，那么Tween2b的开始时间必须是0.75。添加Tween2b，0.75

// 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);