Hi everyone,
Back here again with an interaction related question!
I’m trying to achieve a controlled scroll interaction, similar to something you see on the webflow.com homepage. You can see how while scrolling, when you reach a certain section, the animation begins, and you are able to scroll past that section only once the animation is complete. Until then, you stay on that section and watch the entire animation take place as you scroll. If you scroll back up, the animation reverses. That’s exactly what I’m trying to achieve.
Another example is: https://elements.envato.com/
The second section there is pretty much what I’m trying to learn how to recreate.
I’ve brainstormed over this for a few hours now and did a little bit of research. Was eventually able to come across this topic: Scroll Controlled Animation
The person in the above forum post inquired about the exact same thing that I’m trying to learn/achieve, and while it does seem that the question was answered, I’m too dumb to make anything out of it. Would anyone be kind enough to help me out with this?
Correct me if I’m wrong, so what I have to do is perhaps
(1) create a horizontal scroll,
(2) place an element inside with ‘absolute’ position from top,
(3) then add a “while scrolling in view” interaction to the element?
So that the element stays and animates right there as the user scrolls, and the animation ends as the horizontal scroll nears its end. Or am I getting it all wrong? Sorry if this sounded dumb
What you did looks amazing! Do you mind sharing what you did there to achieve it?
I’m looking to create a sticky interaction where and image in the middle of the screen changes as you scroll with a fade out effect. @vincent your genius would be much appreciated here too!
