How might I create a 2 column scrolling effect where text on the left-side moves on scroll and on the right-side, there is a “camera-frame” that does not move on scroll; however images pulled from a cms collection smoothly transition in and out of the frame when scrolling (perhaps with some sort of animation between sections).
Think about the opposite effect of setting a background image to “cover” and “fixed”, which creates a scrolling effect where the text on the left and the image frame move together, and the hosted background images remain “fixed” to the section’s view area.
See Parallax image backgrounds, gradients, and video backgrounds
See the replica that I made to test out and explore in an effort to get to my desired scrolling effect
Please note:
My images will need to be the size of the “camera frame” because specific artwork has to be visible (i.e., a phone with a UI or a laptop with a UI, etc.).
My current webflow setup:
- Section with a nested collection list
- 2 column grid and min of 80vh applied to collection item
- Left-column has text
- Right-column has image
Any thoughts? Thank ya much!