Parallax Grid Element

[jennetcetera]

Hello! I have a grid element on my page using X Pro, and that grid is set to a mosaic layout. I’m wondering if parallax can be added to this grid element in order to have different images on the grid scrolling at different speeds. Here is a visual of what I’m trying to accomplish, represented from 0:18-0:23

Parallax Movement on Scroll - Webflow interactions and animations tutorial

I’ve found quite a few CodePens documenting how to achieve a similar effect using CSS sans JS, but I’m not quite sure how to connect the dots in order to customize the code snippets that I’ve found in order to get the effect to work on my site.

Any help is always greatly appreciated, thank you!

[dabigcheeze]

I don’t believe there is any easy way to do this with Pro, and certainly not with a CSS based grid. You’d need to have each photo on its own with separate movement parameters and triggers. I’d think you’d need something like gsap.

[kory]

@jennetcetera, thanks for writing in and for sharing a great example of what you’re looking to accomplish! @dabigcheeze is correct in that this type of movement on a page is not currently supported in the builders. With our latest release with the Effects Module (https://theme.co/docs/effects-module) you can set scroll triggers when an Element scrolls into view (i.e. have an Element fade in or move into a position when the screen reaches it), but parallax effects of this nature are not currently something we have a module for in the builders. It is definitely something we’d like to explore down the road, especially with the new Effects Module in place, but for now you would need some type of third party plugin or script to handle this.

Cheers!

[jennetcetera]

Thanks for the info @kory – very helpful information, and such a cool feature! Always happy with XTheme support and updates

[marc_a]

Hi @jennetcetera,

You’re welcome and it’s our pleasure to help you. If you have any other concerns regarding our theme features, feel free to reach us.

Thank you.