Scrollmagic FadeIn&FadeOut滚动

我第一次使用ScrollMagic,我正在尝试在滚动上完成div的FadeIn和FadeOut .

这个概念是div在触发器#fadeIn-24中淡入并淡出#fadeOut-24 .

我有以下代码:

var fadeController = new ScrollMagic.Controller();

  var fadein_tween = TweenMax.fromTo('#24 .content-floating-text-container', 1, { yPercent:100 , opacity:0.2}, { yPercent:0 , opacity:1});
  var fadeout_tween = TweenMax.fromTo('#24 .content-floating-text-container', 1, { yPercent:0 , opacity:1}, { yPercent:-100 , opacity:0});

  var fadeInscene = new ScrollMagic.Scene({
    triggerElement: "#fadeIn-24",
    //trigerHook:"onEnter",
    duration: "20%",
    reverse: true
  })
  .setTween(fadein_tween)
  .addIndicators() // add indicators that shows the trigger start & end point
  .addTo(fadeController);

  var fadeOutscene = new ScrollMagic.Scene({
    triggerElement: "#fadeOut-24",
    //trigerHook:"onEnter",
    duration: "20%",
    reverse: true
  })
  .setTween(fadeout_tween)
  .addIndicators() // add indicators that shows the trigger start & end point
  .addTo(fadeController);

我面临的问题是两个补间彼此独立工作然后表现正常 . 然而,当我组合它们的bot(如上所述)时,div首先完全可见,直到#fadeIn-24被触发 . 然后当#fadeOut-24被触发时,它消失并开始淡入和淡出的动画 .

任何帮助将不胜感激 .

Ps:我用这个作为起点:https://codepen.io/grayghostvisuals/pen/jnsre

回答(0)