scrollama | Scrollytelling with IntersectionObserver | Frontend Framework library

I'm trying to build a static but responsive storytelling HTML website. My goal is to achieve something likes this:

Text on the left, *.jpg image with a fixed position on the right. As a user scrolls the text on the left side, the image on the right side remains fixed in position but changes to another *.jpg image with a short transition, after the scrolling on the left side has reached a certain point.

Responsive in this case would means that I'm completely satisfied with the sticky scrolling being inactive on smaller screens and the text and image block simply returning to their normal breakpoint behaviour.

I have looked into various Storytelling and scrolling JavaScript libraries (Scrollstory, Waypoints and InView) to achieve this goal simply, lightweight and easy. All of them (so far) seem completely overengineered for what I'm trying to do.

The barely available tutorials and code snippets make me feel a little bit like this:

I find no real reference that tells me how to get started with small steps to build a scroller in the first place. Regardless of the library.

Reference files of the individual libraries (that have accessible code) are often outdated and focus on working with external data visualization frameworks and require loading up to four other external scripts for whatever reason and still provide no responsive functionality.

I've tried to rebuild this showcase example here: https://russellgoldenberg.github.io/scrollama/sticky-side/ because it is at least half of what I want to achieve, but I couldn't get it to work and I don't understand the excessive use of JavaScript there either: https://jsfiddle.net/gdkupcb6/2/

I'm using the scrollama javascript library to write a "scrollytelling" article that involves transitioning D3 graphs in and out of view as the user scrolls. It is mostly working, but the graphs pile up on top of each other if I scroll too quickly.

Here is a jsfiddle based on this example by the scrollama author. In my example, the colored dots should fade in one at a time. If you were to scroll quickly to the end, the intermittent dots should not show up. The following snippets show how I've set up the transitions:

I define some functions that create my "graphs", and then call them.

*Image when scrolling
Look at the moving sentences on the right.

Like this, I want to highlight the

element each time scrolling.
That is, usually it's opacity: 0.3;, and when it's scrolled, it switches to opacity: 1; sequentially from the top.

I thought that I could do this using swiper.js.

I feel like this now. Please look at the one on the right side this too.
If this slider wrap reaches the height of each

and stops the scroll with preventDefault (), I thought that the implementation would be as expected.

jQuery ( Unfinished, this doesn't work )

So I navigated to my project directory and run npm install scrollama intersection-observer. It installed the files on my HOME/node-modules instead of the project folder. During installation there were warnings, though: