StaggerTo动画

Question

我正在尝试使用 staggerTo 在视频横幅上制作级联动画，但它不起作用。我想要横幅上的级联动画展开点击。我的代码是

function FullscreenClick(e){
    ADTECH.expand();
    ADTECH.registerVideoPlayer(videoBGPlayer , 'VideoExpanded');
    videoBGPlayer.removeEventListener('timeupdate',timeCheck,false);
    TweenLite.to(wrapper , 1 , { height: 546 });
    TweenLite.staggerTo( videoBGPlayer , 1 , {bottom:"+=150",  ease:CubicIn.ease}, 0.2);
    TweenLite.to( audioOn , 0.4 , { opacity: 1  }  );

    fullscreenButton.style.visibility = 'hidden';
    fomButton.style.visibility = 'visible';
    videoBGPlayer.load();
    videoBGPlayer.play();
    videoBGPlayer.muted = false;
    closeButton.style.visibility = 'visible';
    window.parent.postMessage('ExpandCreative', '*');
    expanded = true;
}

感谢

Answer 1

假设 Elastic 是您想要的效果类型，那么下面的代码应该可以工作。其他缓动效果和配置可以在 GSAP documentation

找到

function FullscreenClick(e){
ADTECH.expand();
ADTECH.registerVideoPlayer(videoBGPlayer , 'VideoExpanded');
videoBGPlayer.removeEventListener('timeupdate',timeCheck,false);
TweenLite.to(wrapper , 1 , { height: 546 });
TweenLite.to( videoBGPlayer , 1 , {bottom:"+=150",  ease: Elastic.easeOut.config(1, 0.3)});
TweenLite.to( audioOn , 0.4 , { opacity: 1  }  );

fullscreenButton.style.visibility = 'hidden';
fomButton.style.visibility = 'visible';
videoBGPlayer.load();
videoBGPlayer.play();
videoBGPlayer.muted = false;
closeButton.style.visibility = 'visible';
window.parent.postMessage('ExpandCreative', '*');
expanded = true;
}

StaggerTo动画

StaggerTo animation

javascript

gsap