Streaming live at 10am (PST)

Help by recreating following page-effect


#1

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


#2

Is it even possible without JS ? (https://github.com/bigspotteddog/ScrollToFixed)


#3

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 - https://preview.webflow.com/preview/scroll-to-fixed-ix2-transition?preview=7f8524718b5cdb073f0ac80c25c543db

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:


#4

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


#5

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.