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!