Jump to content
GreenSock

Portal_Zii

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

Recommended Posts

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!

Link to comment
Share on other sites

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

  • Like 5
Link to comment
Share on other sites

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);
}
  • Like 5
Link to comment
Share on other sites

Hey Diaco i noticed

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

goes to a 404 page, but great solution :)

  • Like 1
Link to comment
Share on other sites

Jonathan , thanks buddy :)  , but link seems works for me  :huh:

 

pls check this one : 

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

Link to comment
Share on other sites

Thanks Diaco that works perfectly! :D

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×