How to create an image gallery with parallax effect linked to CMS?

Long story short I would like to create something like this: https://www.youtube.com/watch?v=0ITA_pwfzDE but where the images are CMS items.

Ideally, my client can add new images via the editor (through the CMS), and those images are placed in a “random” fashion (not actually random but offset from the grid, just like in the youtube video). Furthermore, the parallax animation is also automatically added. To top it all off, every image has a lightbox link (linked with the CMS).

I have tried many different things myself but in the end, there was always a trade-off.
I’ll try to summarize my attempts, feel free to look at the share link. you’ll find various pages called ‘gallery test’ and ‘huwelijken’ etc. Some of them also use custom code.

My attempts:

  1. No CMS: grid with images and each image is severely offset to make it look like it is randomly placed. Positioning and animation work well. Disadvantage: client can’t add new images.

  2. With CMS. I used the collection item option to edit only the first, last, even-numbered, and odd-numbered items within the collection list. Furthermore, I added custom code (nth item) to create the desired look that “breaks the grid”. Advantage: The client can now add pictures himself through the cms and the pictures appear in a seemingly “random” fashion. Lightbox functionality also works! Disadvantage: no parallax effect. I can’t target individual collection items for interactions. The same animation is applied to all the items. Working with ‘select element’ instead of ‘class’ doesn’t work either.

  3. Duplicate collection wrappers: Now I use the background as a grid and all the individual elements within the grid are collection wrappers, containing a whole collection. It’s always the same collection but I limit the shown items to 1 and start at a different number for each cell in the grid. This way I can still work from a single CMS, the lightboxes also still work, I can target individual collections for animations. Disadvantage: my client can add new items to the CMS (this is good) but I still have to duplicate those collection wrappers in the grid. So his new pictures won’t show up without my intervention. This is not ideal.

Please forgive my share link, I know it’s messy but that’s because I’ve been experimenting a lot to solve this. Once I have the solution, I’ll clean it up :wink:

If I failed to explain it properly, let me know so I can clarify.

Thanks in advance, any help is greatly appreciated.


Here is my public share link: LINK
(how to access public share link)

I know it’s been a while since the question got asked but I created a cms driven parallax for a job and I uploaded it as cloneable (literally yesterday lol)

https://webflow.com/website/CMS-parallax-scroll-into-view

maybe someone will find it useful in the future
(I know I was looking for a solution)
:black_heart:

2 Likes