Vertical Wiping and CSS Clip Animation

I'm trying to "convert" an Adobe Animate project to GSAP. As you'll see in my Codepen, the top and bottom "filgrees" (they are supposed to look similar to: https://goo.gl/images/GNQgRi) wipe one image and simultaneously reveal another image. The actual banner is more complicated because the filgrees and the images in the center are irregular shapes. My challenge is syncing the movement of the "filgrees" to the image wipe / reveal. The wipe / reveal is being done by tweening the css

Thanks so much for the assist Jack. I'll give this a shot with my real assets and let you know if it works. It must have took you a lot of trial and error to figure out the correct values for the variables? I didn't know you could use an expression like: "duration - overlapDuration - gapDuration" in the position parameter. But it now makes logical sense since I've been using relative values like "+=1" for ages. Might be worthwhile to update the official TimelineMax docs to call atten