Hi all,
Have this basic section transition that changes the opacity of the BG div color form black to white so it gives a bit of depth to the scroll, for some reason the interaction is just not affecting the selected div and stays black when it should fade out when scrolling out of view, any help or ideas?
Thanks a lot webflow gurus!
Here is my public share link: https://preview.webflow.com/preview/svelte-site?utm_medium=preview_link&utm_source=dashboard&utm_content=svelte-site&preview=43d9015e919a49223e04a1b26335f67b&mode=preview
@samuelsvelte My approach to accomplish the effect that I THINK you’re after is to use a page trigger, versus an element trigger, in the interactions window. This at least allows the color change to be mapped to the users scroll speed. In your example, I removed the trigger animation from the content section. I made the black background visible with an opacity of 100%. Of course there are other ways to skin this, it’s just what worked for me. Anyway, then I made a new interaction for the black bg div. I used 'While Page is Scrolling" in the Page Trigger section.
If your overall page won’t shrink or grow, could setting some percentages accomplish the desired effect? I used the background color change instead of the opacity change… ignore that tho, it’s just my method. Here are some screenshots of the transition I made:
Transition begins at 28%
Then transitioning to white at 32%
Awesome really clever way around it! Thanks a lot 
1 Like
