Streaming live at 10am (PST)

Parallax Scroll Move From Bottom of an Image to Top


#1

I’m trying to build a site that parallax scrolls from the bottom of a background image to the top of it. A bit lost on how to do this in webflow. Because interactions doesn’t have the ability to move background positions, my inclination was to transform on the y Axis.

SoI have made a div the height of my background image, roughly 4000px. I have stuck the bottom of the div with the background image to the bottom of the viewport. Then I tried applying the scroll interaction so when the user reaches the bottom of the div parent on scroll, the child would transform on the y axis by a positive value pushing it down so as to fake the appearance of moving up the image. Does not work as anticipated and I’m seeing major jumps and flickering. Any ideas on how to do this or if there’s an example of how to implement parallax scrolling from the bottom to top of an image as a user scrolls down?


Here is my public share link: LINK
(how to access public share link)