How to "hide" elements until the gutter is dragged to reveal them?

[reynoldsmkatie]

I'm trying to create a split screen effect wherein you start with half of screen "A" visible on the left and half of screen "B" visible on the right. The other half of "A" should be hidden behind the "split" until the slider is dragged right to reveal those elements, and the other half of "B" should be hidden behind the "split" until the sider is dragged left to reveal those elements.

However, I'm running into a problem. When I place elements inside screen "A", all of them appear in the current half of "A" that I can see on my screen. In the CodePen example below, I have two boxes in screen "A". One is aligned to the left side of "A", so it should be visible on load. The other is aligned to the right side of "A", so I expect it to be hidden because "B" is currently on top of the right half of the screen. Once you drag the slider to the right, then the "B" elements should disappear as the hidden elements in screen "A" below are revealed.

Is this how Split JS is intended to work, or am I missing something? Thanks!

https://codepen.io/reynoldsmkatie/pen/RwqgPrM