Dynamic scroll with fade in/out

I am attempting to create a dynamic scroll, where a single paragraph and corresponding image are displayed one at a time. As you scroll, the first paragraph/image is replaced by the second with a fade transition. I can't seem to get only one paragraph and image to show at a time. Would appreciate any help and if there is a cleaner way to do this with a React component or similar happy to explore that too! https://codepen.io/mycenas/pen/oNOZgoR
Was this page helpful?