How to Create a Scrolling Animation to Reveal Shoe Image in Webflow?

Design help Animations & Interactions
1

Hello Webflow Community,

I’m working on a project where I’d like to create a scrolling animation that reveals a shoe image underneath a thin horizontal line as the user scrolls down the page. Here’s what I’m trying to achieve:

The reference is this website, where a jar changes from one color to another:

  1. Structure:
    I have a section with a div block (main-container) containing two image elements:
    • Image 1: The first shoe image.
    • Image 2: The second shoe image.

  • Between these images, there’s a div block (masking-div) positioned absolutely to cover Image 1 initially.

  • What settings should I use for the scroll animation?

  • Are there any additional steps or considerations I might be missing?

  • Any tips on ensuring the animation is responsive and works well across different devices?

Any help or insights on how to achieve this effect in Webflow would be greatly appreciated. Thank you in advance for your assistance!

Let me know if anyone knows a template i can use that is similar to the jar one!

Best regards, [Your Name]

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

2

I’ve done such sections in a little complex way using image elements for desktop and mobile.

But this website has done it in a simple way just by apply background-image with background-attachment: fixed and creating different section for mobile view with images.

This is just achieve by CSS, structure is something like following:

.item.item-1 > .bg-block 
.item.item-2 > .bg-block

You can have content block inside each item if needed, like in the reference site.

.item block should have position: relative and best if has height: 100vh

.bg-block should have background-image applied with background-attachment: fixed

I hope this helps.