Here is a partial fix of the blur background. Problem is it is working on a scroll trigger which is effected by a scroll position in the overall site. If you do not need the transition but merely want it to be a blur I have shown how to do that
Woa Jeremy! I’m impressed with your kindness and dedication to this. Thank you very much for taking the time to take a look and share that video.
It’s an interesting approach. I believe that what we have to achieve its:
1: scroll and when we have the image at 100vh then
2: get a blur version of it and
3: the text would overlay over it. Finally
4: the rest of the site keeps flowing.
The thing is that the overflow scroll triggers not at 100vh and depends of where the cursor is killing the overall desired effect:
Yeah it is not a perfect solution. Sounds like in interaction 2.0 they might be tying more CSS effects to the interactions. So it is not just opacity or movement based interactions. BUt on scroll image blur ect. I guess we will wait to see. I went to see what they do on the medium site. I’m not sure what the interaction actually is. But They don’t use a blur. They transition between two images on the scroll. One is clear the other is a prebuilt dark and blurred image. So it is two images. The timing of the transition is what gives it the effect.
might be something to play with. And forget the blur CSS altogether
Yeah, maybe we don’t have the tools yet.
I have found this though: Interactions like Apple High Sierra Page and the overlay text works but there is not a previous section so the scroll just works (since its the first div you have.)
It actually is doing that. The problem is the double scroll. As soon as you enter that area with the mouse when it becomes visible it will start to scroll. As you say it works fine at the top but it’s actually not helpful in the middle of the page. If you want to test use the outer edge to scroll it will scroll 100VH and then you can scroll the inside but I think medium has a lot more js working on that section. Double scroll is something I try to avoid. It is really frustrating for users especially on mobile. Maybe just a move interaction at a really slow pace to give more of the scroll feel. Without some sort of js working it. I don’t think you will be able to get it with Webflow scroll interaction.
