TPDBrendan

@OSUblake Fantastic, so simple, I had blinders on looking for a JS solution. Thanks so much!

Trying to use the suggested method for mouse follow animation using quicksetter and also be able to create hover animations on buttons. It seems to be buggy when adding the mouseenter and mouseleave event handlers, though, firing multiple times - note the console logs and the scale animation that fires incorrectly. Is there a better way to do this or should I use a different, simpler method for the mouse follow animation that won't interfere with events? I'm assuming it has something to do with the quicksetter firing in rapid succession.

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!

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?

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?

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!