Streaming live at 10am (PST)

How to Create a Diagonal Image Gallery w/ Horizontal Animation

Hi Webflow Community,

We’re trying to build an effect/interaction similar to the one that is present in this second hero section of this site: Landing 1

Notice the horizontal scroll effect and the placement of the photos. I feel like we know how to create the interaction using the “While Scroll” option and the move animation; however, what we are having issues with is actually placing them on the canvas and rotating them. Is this done in just a section? Or is it in a container? Also, would we utilize a grid to have the photos run diagonally like that? I believe we’ve tried using the grid, but the images overlapped and didn’t look like the page above.

For reference, here is a screenshot of how we’d like to place the images on the canvas:

Thanks in advance!

have you figured this out yet?

Nope - no luck! I haven’t been able to figure out how to accomplish this animation/scroll.