Pause Greensock animation at beginning of window re-size event, resume animation at end of resize event

Question

Hello I am using Greensock animation library. I have a complex animation that is fully responsive. I am very new with javascript/jquery but greensocks seems to be simple enough for me to make complex animations.

With my current project: The browser always loads the animation/banner correctly, responsive design and all on initial load! However during the actual window risize event, if the animation is firing; then the assets "responsive-positioning" inside the banner, become "off-set"

If i can simply pause my animation at the beginning of a window-resize event and resume play at the end of the window resize event. It would solve my issue.

I know you can pause an animation with green socks via this link. and I know you can control what happens on resize event but my skills arent amazing to know how the syntax would be set up.

Just thinking something simple like.. beginning-of-Windowresize=pause; end-of-Windowresize=resume;

Does anyone have a solution for this?

Id appreciate any help! Thanks so much!

Heres a simple example of greensock animation mixed with a window re-size. It currently doesnt like this at all and im not sure how to improve it to pause/resume with my current javascript knowledge.

        $(window).on('resize', tl.pause() function(){

        var tl1 = new TimelineMax();
        //delay
        tl1.from('#winBigBanner', 0.4, {})
        //drop in animation
        from('#wb_TV', 1.3, {top: -600, rotation:-20, ease: Bounce.easeOut}) 
        .from('#wb_IMAC', 0.8, {top: -650, rotation:60, ease: Bounce.easeOut}, '-=.68')
        .from('#wb_IPAD', 0.8, {top: -700, rotation:-30, ease: Bounce.easeIn}, '-=.68') 
        .from('#wb_IPHONEPLUS', 0.8, {top: -600, rotation:-40, ease: Bounce.easeOut}, '-=.68') 
        .from('#wb_IPHONE', 1, {top: -600, rotation:50, ease: Bounce.easeOut}, '-=.68') ;
});

Answer 1

A debounced function is what you are looking for. You could setup a leading function to pause the timeline, and a trailing function to resume the timeline. The debounce function I'm using is copied from underscore.

var tl = new TimelineMax();

var wait = 100;

$(window).resize(debounce(resizeLead, wait, true));
$(window).resize(debounce(resizeTrail, wait));

function resizeLead() {
  tl.pause();  
}

function resizeTrail() {  
  tl.resume();
}

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
}

View on CodePen