I am trying to animate a layout change in which I have two divs side-by-side using flexbox. I want to animate the div on the right to appear to be moving off-screen right, while the one on the left expands to take up the full container width space.
Currently I keep getting a 'jump' in the width of these divs at frame 1. GSDevTools is enabled in this pen to see what happens when the timeline is advanced to the first frame.
Later, for mobile I will be doing a similar thing. However on mobile, I will have two divs stacked on top of each other. I want the top one to go away, which will shift the bottom one up. I guess in this second scenario, I will simply animate the height of the upper div to 0, and make sure I have overflow set to hidden.