Frontend Challenge: CSS is a Beach
Tags: devchallenge, frontendchallenge, css, javascript
Published: 2024-06-09 19:37:00


![Screenshot of Beach List with beach background and wave at bottom of screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lrb3oq7omepfo4xoge93.png)

_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
<!-- Show us your project! You can directly embed an editor into this post (see the FAQ section from the challenge page) or you can share an image of your project and share a public link to the code. -->

{% codepen https://codepen.io/KelseyHale/pen/KKLvzjO %}

## Journey
<!-- Tell us about your process, what you learned, anything you are particularly proud of, what you hope to do next, etc. -->

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](https://codepen.io/giana/pen/BabdgjB) I'd been intrigued by a few weeks ago by CodePen user [Giana](https://codepen.io/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.


<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->

<!-- We encourage you to consider adding a license for your code. -->

<!-- Don't forget to add a cover image to your post (if you want). -->


<!-- Thanks for participating! -->