StaggerTo animation

Question

I'm trying to do a cascade animation on a video banner using staggerTo but it is not working. I want cascade animation on banner expand click. my code is

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;
}

thanks

Answer 1

Assuming Elastic is the type of effect you would like, then the code below should work. Other easing effects and config can be found at 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;
}