pinning content below horizontal scroll so it is visible

[LSchneiderman]

I don't know if my codepen exactly shows this, but it shows on a big screen. 

 

I have a massively wide image that I'm showing with horizontal scroll.

 

BUT I want the content that comes after it to freeze in place under it, *where the user can see it*, until the horizontal scroll is done, and then have the content scroll normally. Right now, the content freezes but it isn't visible. It's below the screen area. So all that shows is the massive image. I want the massive image to take up 50vh and have the content that comes after it be visible but "pinned" underneath. Does that make sense? How can I do that?

 

See the Pen YzRJVBE by lschneiderman (@lschneiderman) on CodePen

[Rodrigo]

Hi,

 

Just wrap both elements and pin the wrapper:

See the Pen LYXgqGV by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[LSchneiderman]

*Thank you*, @Rodrigo!!