At the start of the semester, when I was looking through past pupils’ Apollo 11 projects ( Provided by Dr Kyle), Emily Usser’s web flow interaction really caught my eye;

Apollo 11 emily.mp4

( video of Emily Usser’s web flow project )

So as you scroll down the page, first, a quotation comes up, then as you scroll down further, the quotation disappears to the top and another paragraph appears from the bottom.

I have never seen something like this before, and I loved the micro-interaction as the user scrolls down the page. It's subtle yet fun. I spend a few minutes scrolling back and forth in that section just to see the text disappearing and reappearing again.

After showing Emily Usser’s web flow project to some of my classmates who are more experience in web design, I found out that this particular interaction was called “ scroll interaction “. Scroll interaction is an umbrella term which describes any motion/interaction that appears across the screen depending on whether the user scrolls up/down.

I was very inspired by Emily Usser’s design and I created a very similar prototype in Figma;

Unfortunately, Figma does not currently support scroll animation; therefore, the prototype I created was just a static page. Now that I'm starting to transfer my prototype in Figma over to Framer, I was happy to discover Framer’s recent update added the function of scroll interaction.

The first thing I did was watch a scroll animation and transformation tutorial on YouTube;

https://www.youtube.com/watch?v=aziHin3cZ-E&t=316s&ab_channel=Framer

https://www.youtube.com/watch?v=LqmTX8-5bLo&ab_channel=Framer