This is a submission for [Frontend Challenge v24.04.17]((https://dev.to/challenges/frontend-2024-05-29), Glam Up My Markup: Beaches
What I Built
This list of best beaches is displayed ON a beach. As the page is scrolled the ocean washes away the previous item on the list and the next one appears as the ocean recedes.
NOTE: this uses scroll-based animations that are currently only available in Chrome. If viewed on a browser that does not support the animations the page will display with a simple scrolling list, the same way it will display for users who have enabled the reduced motion accessibility option on their browser.
NOTE_2: not optimized for mobile view.
Demo
Journey
As soon as I saw that the challenge was to display a list, I knew I wanted to try something I'd been very curious about lately: scroll based animations. I immediately knew I wanted the ocean to wash away each list item as the page is scrolled, but it took a considerable amount of experimentation and research into scroll based animations to make it happen.
First, I examined an example codepen I'd been intrigued by a few weeks ago by CodePen user Giana. I was impressed how the scrolling itself was basically invisible, and the transitions stole the show. I learned a lot from this example about stacking elements to allow them to shift seamlessly without a scroll. I used this idea to make the words appear and disappear under the ocean. Certainly easier ways of making this happen, but I wanted to explore CSS only solutions and expand my understanding of scroll animations.
Though I originally intended to make the text of the beach list look like it was "written in the sand", instead I ended up adding a color animation to that text to make it easier to detect the transition from one item on the list to the next. The color of the text shifts from green to blue over the course of scrolling the list.
Next I added the wave. Once the stacked elements were set up to allow the text fade, the wave was surprisingly easy to implement by animating a psuedo element on each <li> element. I used a clip path to make the top of the element look wave-like. Even though this part ended up being much less complicated than the main scroll animation, I am most proud of it. It is the thing I first envisioned when I began this challenge, and the fact that it works is amazing. Even though I would probably never use something like this in a production project, I really enjoyed playing with it and it opened up so many possibilities of what scroll animations could do.
Once those two main elements were working I decided to add a beachy background image and an image to the pseudo element to actually look like a wave instead of using gradients. I love the way the images from Unsplash add an element of reality, while still being whimsical.
Finally, I knew I had to add some safeguards for browser support and accessibility concerns. I added all of the animations to @support and @media queries to make sure that the page does not break if a user is using a browser that doesn't support scroll animations or if the user has selected the browser option to reduce motion.
Improvements
Because this way of scrolling the list uses full view height elements, I ended up having to adapt the top elements to be fixed position so that they would be visible. To improve the design I would like to explore making these visible initially and then scroll out of view, leaving the beach list to scroll and animate. This is still a challenge due to needing to have full view height list elements and also allowing scroll-snapping on the html element which ends up pushing other elements off the top of the page.
A more responsive design would be nice as right now the background image either looks really great or really odd at various sizes of viewport.
An indicator at the bottom of the list would be nice to have as well as the option to scroll to top.
There are some accessibility considerations implemented for reduced motion, but there are always more to consider, especially making sure keyboard navigation works and possibly disables the animation.
Top comments (1)
Nice work!