Scrolling moves elements

Hi,

I would like to overlay images on top of each other and control their position and opacity by scrolling
I managed to do it in principle, please see the video on youtube https://youtu.be/BwFQyuLMSto


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

That should be doable with IX2 and a “While page is scrolling” trigger.

You should split that element in 2 parts, with the left part on top of the other

http://vincent.polenordstudio.fr/snap/wp8mb.jpg

So you don’t end up with this glitch:

http://vincent.polenordstudio.fr/snap/ox8e9.jpg

Start by building your result scene, with those z-index values:

http://vincent.polenordstudio.fr/snap/7g35x.jpg

Then find the appropriate Transform values for moving elements.

Then build the IX2

Hi,

Thank you for your help, I’ve managed to do the scrolling trigger but I think I’m missing something with the wrapper setup because resizing the browser window misaligns the parts of the graphics (everything works good in the interaction preview but it falls apart in the real browser)
the other problem is that I tried adjusting the Z space values of the parts in interaction and styles as well but it doesn’t work for me
the last thing is that I’m not sure it will work on mobile, should I just overlay this and use an auto triggered video of the “assembling” for tablet and mobile instead?

this is the project:

https://preview.webflow.com/preview/mandarins-fabulous-project?preview=b0b0e5b3c4aff68addd3078dbe0eb044