Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
TPDBrendan

Destroy current timeline, initiate new one on window resize

Recommended Posts

I'm trying to get a full page clip style slider set up to handle resize, but I seem to be going in circles at this point despite trying a bunch of suggestions on this topic from the forum.  

 

I've already accomplished the basic effect - screen split in half vertically, each side has a timeline that is wiping towards the center revealing the slide below, which is simultaneously sliding towards center.  Right side is on a slight delay intentionally.  If you load the codepen and don't resize, you'll see what I mean.

 

Window resizing is throwing me a curveball, though.  I've set up debounced functions to kill the 2 current timelines and then rebuild them again with new resized viewport dimensions.  It's getting the new window dimensions and setting up a new timeline with these specs succesfully, but resizing several times reveals that it must not be killing the old timelines and is just creating multiple copies at each viewport size.

 

I'd like to be able to save the progress of the current timeline before destroying it and then initialize the new, resized timeline to this progress point so that to the user it just looks like one animation that pauses slightly on resize.  Would also be great if, once the animation completes, window resize will not be able to initialize another timeline, so it can rest on the final slide.  But, for now, just figuring out how to solve the current duplicate timelines issue would be awesome!

See the Pen xgwWwM by TPDBrendan (@TPDBrendan) on CodePen

Link to comment
Share on other sites

Can you point to an example of what you want the finished product to look like?

 

I'm thinking there's a much simpler way to achieve this effect, but I'm not 100% sure of the effect you're after.

 

Killing timelines and/or tweens, and re-instantiating them, and then seeking to the point they were at previously is super messy, and just going to give you headaches until you reach for your Luger and blow your brains out.

Link to comment
Share on other sites

I'm not sure if this is mentioned in the thread Dipscom referenced but here is a demo with a very simple animation of 2 boxes traveling to oppoosite corners based on window size on each resize. There is a global progress value used that tracks the progress of the current timeline and gets applied to the new timeline.

 

var size = 50;
var progress = 0;
var tl; 


function translate(){
tl = new TimelineMax({repeat:-1});


  tl.fromTo(".orange", 2, {x:0, y:0}, {x:window.innerWidth - size, y:window.innerHeight - size, ease:Linear.easeNone})
     .fromTo(".green", 2, {x:0, y:window.innerHeight -50}, {x:window.innerWidth - size, y:0, ease:Linear.easeNone});  
  tl.progress(progress)
}


$(window).resize(function(){
  progress = tl.progress();
  tl.kill();
  translate();
 });


translate();

 

 

http://codepen.io/GreenSock/pen/EZKpJO?editors=0010 (forked from Craig)

  • Like 2
Link to comment
Share on other sites

Hey kez1304,

 

Yea, my initial strategy was just to have one timeline that paused on resize, updated the windowSize variables within the timeline and resumed, but I couldn't figure out a way to do that.  The global windowSize array updates easily, but I can't figure out how to clear out those parameters in the timeline and reset them.  I tried using invalidate() and set(), but nothing seemed to click.  

 

Is there a way to easily keep one timeline and update its variables mid-stream?

Link to comment
Share on other sites

Hey Carl,

 

Great suggestion, thanks!  I've edited my codepen to match your suggestion and it seems to be handling the resize much better now.  

 

The only hitch is that now it seems to be ignoring the delay() in tl2 on line 24.  After the first divs slides in, there's meant to be a slight stagger effect so that it goes left...right,left...right,left...right.  Even when I put big number in the delay method the effect doesn't occur.

 

I'm at a loss as to why it would do that since delay was working before and is a pretty straightforward method.  I'm wondering if the initial page load triggers a window.resize event and therefore kill(), which somehow overlooks the delay when it is rebuilding it?

Link to comment
Share on other sites

Hey kez1304,

 

Yea, my initial strategy was just to have one timeline that paused on resize, updated the windowSize variables within the timeline and resumed, but I couldn't figure out a way to do that.  The global windowSize array updates easily, but I can't figure out how to clear out those parameters in the timeline and reset them.  I tried using invalidate() and set(), but nothing seemed to click.  

 

Is there a way to easily keep one timeline and update its variables mid-stream?

 

You can use the invalidate() method to clear any cached values from the tween/timeline, and I've found that it works particularly well if you assign a function to the value.

 

Have a look at: 

See the Pen zNqeGv by anon (@anon) on CodePen

 

To see what I mean. It's not exactly a solution to what you're after, but it might point you in the right direction. Resize the window/frame, and see what happens with the pausing/playing/restarting.

Link to comment
Share on other sites

Alrighty, I think I've got it all set thanks to the great feedback here.  It seemed like the solution to delay() being ignored was to just move the totalProgress() setter call out of buildTL() itself and call it last in window.resize.

 

Thanks for your help everyone!

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.
×