Change collection list item based on scroll position

[Bradpaulp (Brad Poirier)]

Here is my share link
https://preview.webflow.com/preview/bradpaulp-projects-test?preview=a89f47af46ff5d14659694befd1d705d

Just a (not so) simple task here.
100vh div with two inner divs, flexed.
Left side I want to show the project main image as a background - check, all set.
Right side I want to show the project info (info, client, date, etc etc) - check, all set.

Two problems, and one idea I’m stuck on.

Idea: I want to CHANGE the collection item being shown on the right, BASED on the collection item in view on the left.
So for instance, if I’ve scrolled the left hand side and it’s now pulling up the second background image from collection item #2, change the right side to reflect that.

• Is that kind of sorcery even possible with an interaction ??

Problems:
a) When scrolling the article on the right, it kind of moves weird. Just scroll it, you’ll see. (I do have overflow-scroll set)
b) For the life of me, I cannot get the left side to flex at the top when in tablet or mobile view.

Arrr !

---

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

[garymichael1313 (G.J.)]

1. Scrolling setting: Go to mouse settings and move it lowest, the scroll won’t be as jumpy

2. Sidebar Design: I would use a “Click Trigger” for this. It will easier to manage and less confusing that scrolling into view, etc. Plus, on tablet and mobile a user will feel more engaged by clicking your collection item, then getting their desired content on right. Just add another interaction set, with slide in’s, fade out’s, maybe even a transform. This will be a very nice effect.