Pause animation during begining of window-reisize and resume animation at end of window-resize.

[Portal_Zii]

Hello! I have a complex animation that uses media queries. I searched google and found people using percentages and other methods to make their greensock animations responsive. However. My animation works perfectly on any screensize (Initial load) 

If you resize the window the media query positions on my elements are offset and incorrect. However if you simply refresh the page everything animates and displays perfectly!

So.. I am not the best with javascript and am very new. I found greensock easy to start off with but am now needing help finding a solution to this "dead-end" lol.

So i need one of two solutions. Pause my animation when the user starts re-sizing their browser and then resume the animation from where it left off when the user stops re-sizing the browser.

If that is impossible I would be open to just re-starting the animation from a certain point or the beginning.

Any solutions would be much appreciated!

I also made a stack overflow query HERE 

 

Thanks!

[OSUblake]

From Stack Overflow:
 
A debounced function is what you are looking for. You could setup a leading function to pause the timeline, and then 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);
    };
}

 

See the Pen 966601fc9bbf79e277599864855b1d36?editors=001 by osublake (@osublake) on CodePen

[Diaco]

Hi Portal_Zii 

 

in addition to Blake's nice solution , you do something like this too : 

See the Pen WrdbVY by MAW (@MAW) on CodePen

var tl = new TimelineMax()

window.addEventListener('resize',PlayPuse);

function PlayPuse(){
  if (tl.isActive()) tl.pause() ; 
  if (!tl.resizePlay) tl.resizePlay = TweenLite.delayedCall(0.2,function(){ tl.play() });
  tl.resizePlay.restart(true);
}

[Jonathan]

Hey Diaco i noticed

See the Pen WrdbVY by MAW (@MAW) on CodePen

goes to a 404 page, but great solution

[Diaco]

Jonathan , thanks buddy   , but link seems works for me 

 

pls check this one : 

See the Pen WrdbVY by MAW (@MAW) on CodePen

[Jonathan]

Thanks Diaco that works perfectly!

[OSUblake]

CodePens is on the fritz today and broke something I was working on. The good news is that there's a nice new feature. They added a REPL console to the editor. Just click the console button in the bottom-left to open it.