Help by recreating following page-effect

Hi all,

I like the idea of www.tapwater.co where the gif image stays in place (fixed position?) but then scroll up when the text in the left column ends.

I tried to recreated this, but it won’t work…
tried as absolute position in a div box which is relative to the page… as a background… but I couldn’t figure it out… Someone has a better idea? Or i am doing something wrong?

https://preview.webflow.com/preview/wunders?preview=19d72d1e94b925918a808ed3f85bfafa

1 Like

Is it even possible without JS ? (GitHub - bigspotteddog/ScrollToFixed: This plugin is used to fix elements on the page (top, bottom, anywhere); however, it still allows the element to continue to move left or right with the horizontal scroll.)

Oh great question, @egnagralf!

I was able to recreate this interaction with IX2.

You can view how I created it at the following links:
Live site - http://scroll-to-fixed-ix2-transition.webflow.io/
Share link - Webflow - Scroll to Fixed IX2 Transition

It looks something like this:

Hopefully this helps, and feel free to reach out if you have any questions. :blush:

Best regards,
Micah :nerd_face:

1 Like

Hi @micahryanhtml, thank you for attempt to solve my question.
I like the way u use the interaction idea, … but unfortunately the gif, starts again every time you scroll by a certain point. I would also like to see… that it starts to go up with the page from a certain point…

Thank you

1 Like

Oh, cool @egnagralf! :smile:

This is currently not possible with pure Webflow. You might need some jQuery code in here (and I’m not the best with jQuery).

I imagine you would need to change the image scr when a section comes into view as that will refresh the image.

1 Like