如何在 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);

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

How do I animate bottom AND opacity attribute in GSAP and ScrollMagic?

javascript

css

scrollmagic

gsap