我第一次使用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