Hi everyone,
I’m trying to create a scroll interaction where multiple images stack horizontally on top of each other as the user scrolls. The idea is that each image slides in from the right and overlaps the previous one, similar to a portfolio/gallery transition.
I’m having trouble with the Pin feature and scroll animations:
-
If I pin my images and add scroll animations, when I preview the website the images do not appear at all.
-
If I remove the pin, the images appear and the horizontal movement works, but they also move vertically with the page scroll and leave the viewport before the full stack animation is completed.
-
If I pin the images/group, they seem to stay visible outside of the intended section instead of stopping when the section ends.
What I’m trying to achieve is:
-
A section where the images stay in place while the user scrolls.
-
The scroll controls the horizontal movement of the images.
-
The images stack one by one and the effect ends when leaving that section.
Is there a recommended way to build this in Readymag? Should I use Pin on a container/group, or is there another workflow for this type of scroll effect?
Any advice would be really appreciated. Thanks!