Hey Webflow Community!
I’ve set up a layout with a sticky image container on the left, holding five images, and a text container on the right, containing five text sections. Here’s how it’s structured:
• The first image in the image container is set to position: relative to size the parent container.
• The other images are set to position: absolute with opacity: 0% so they stack on top of each other.
Goal:
I’m trying to create a simple scroll animation where the images change based on which text section is in view. For example:
• When the second text section scrolls into view (using a 50% offset), the first and third images fade out (opacity: 0%), and the second image fades in (opacity: 100%).
• I’ve included the third image in the animation sequence to ensure it works smoothly when scrolling both down and up, keeping the correct image visible at all times when the matching text section is in view.
Issues I’m Facing:
- The animation only works once when scrolling down and doesn’t reset to work when scrolling back up.
• It only works scrolling uo if I start the preview at the bottom of the page and scroll up. But then, it doesn’t work when scrolling down again.
- There is a glitch where, for example, the fourth image briefly appears when fading in the third image, even though the fourth image’s opacity is set to 0%.
What I’ve Tried:
• Adjusting animation timing and sequencing.
• Ensuring images are set to opacity: 0% and transitions are properly configured.
I’d greatly appreciate any advice or solutions to make the scroll animations work smoothly in both directions, without the glitches.
You can view the animation setup here: Sådan rejser du
Here is my public share link: Webflow - Rejsekort