创建 TweenMax.fromTo() 实例会阻止先前创建的 ScrollMagic 场景运行

编程问答 2022-05-22

问题描述

我想创建一个基本上可以滚动动画的英雄盒，这是成功的 - 遵循教程。之后，我创建了一个新场景，并希望在滚动条与之前的动画一起向下移动时为导航栏消失设置动画，所以我按照教程中所示进行了操作，但它不起作用，导航栏动画和英雄框动画都没有 - 它被卡在视频的第一帧上，但它仍然有它的滚动长度（我可以像动画一样滚动，但我得到的只是视频的第一帧）。有趣的是，每当我什至“提到”TweenMax 时代码，我得到了第一帧冻结。

const intro = document.querySelector('.intro');
const video = intro.querySelector('video');
const text = document.querySelector('nav')

const controller = new ScrollMagic.Controller()

// VIDEO ANIM SCENE

let scene = new ScrollMagic.Scene({
    duration: 9200,triggerElement: intro,triggerHook: 0              
})
    .addindicators()
    .setPin(intro)      
    .addTo(controller);

// NAV ANIM SCENE

const textAnim = TweenMax.fromTo(text,3,{ opacity: 0 },{ opacity: 1 });

let scene2 = new ScrollMagic.Scene({
    duration: 3000,triggerHook: 0
})
    .setTween(textAnim)
    .addTo(controller);

// SMOOTH ANIM

let accelamount = 0.1; 
let scrollpos = 0;
let delay = 0;

scene.on('update',e => {
    scrollpos = e.scrollPos / 1000;
});

setInterval(() => {
    delay += (scrollpos - delay) * accelamount

    video.currentTime = delay;
},33.3)

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

animationanimationanimationgsapjavascriptscrollmagic