Scroll Interactions - flow of water

Hi All,

I’m new to Webflow and very excited about the potential websites I can make. My first idea is quite a complicated one, and I want to know if it is possible before I spend hours in the university.

I want the website to follow the flow of water as the page is scrolled. So it would start with a large drop of water falling down, then hitting the bottom and splashing up. Then perhaps a horizontal scroll would see it flow to the right a bit before coming up against a wall and creating a small wave.

The website would be primarily in black and white so I would also like a streak of colour to follow the animation as it is scrolled through.

Does anyone know if this is possible? and if so, could you direct me to the lessons in the University that would teach me how to do this.

Thanks so much for any help!

All the best,

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

You’ll find some good examples to work from in Made in Webflow, and some good designers to follower on YouTube like Timothy Ricks.

The general approach I’ve seen is to create your art in After Effects, export it as a lottie, and tie its playback position to an on-scroll interaction.

I doubt you’ll find examples of what you’re describing in the university but do the Lotties and Interactions courses for certain, everything there is absolutely foundational to using Webflow

Thanks for your response. I have done all the Lottie tutorials and have gone that route. Am now working on implementing it :slightly_smiling_face:

1 Like