When Scrolling Becomes an Experience: The New Event Animation

We just launched an important update to the One Ocean Foundation website. It's not just an aesthetic change, but a strategic design decision: to transform the moment you visit events into a natural and engaging experience. When you scroll the page, event cards don't appear all at once, but present themselves one after another, synchronized precisely with the movement of your finger or mouse.

The goal was simple but ambitious: to make discovering events more visually pleasant while maintaining full readability and loading speed. A static list of appointments risks appearing cold, especially for an organization that lives through mission and community like One Ocean Foundation.

The solution was an animation that uses scroll as the main control. There's no need to click buttons or wait for timeouts: each card enters the viewport from bottom to top, colors alternate between deep blue and lavender hues, and when you scroll past, the previous card shrinks slightly in the background, creating a three-dimensional depth effect.

The animation is built with precision. As you scroll, each card receives a start and end trigger. As soon as the card enters the viewport, it slides upward with a smooth motion. The previous ones transform slightly, decreasing in scale and creating that stacked feeling that catches the eye without being distracting.

Synchronization with scroll (what designers call 'scrub') is fundamental: it's not an animation that starts and ends on its own, but follows exactly the speed of your scroll. If you scroll fast, everything moves fast. If you slow down, the pace adapts. This precise control makes the experience natural, almost as if you were flipping through a physical catalog.

A well-designed animation is not only beautiful, it's useful. In this case, the movement guides attention toward the most relevant content, reduces the feeling of 'long scrolling' when the page has many events, and creates a natural pause between each event. The user doesn't read quickly, but naturally lingers on each card.

The alternating colors (blue and lavender) strengthen this visual separation, making it easy to distinguish one event from another even in quick scrolling. At the same time, we maintain consistency with the foundation's visual identity, respecting the values of sustainability and innovation that One Ocean Foundation represents.

Before launch, we tested the animation on different browsers, varying connection speeds, and devices of different power. The goal was simple: the experience had to be smooth at 60 frames per second, without stuttering or delays even on older phones.

If you visit the One Ocean Foundation homepage today, you'll notice the difference right away. It's not invasive, it's not destructive, but it is present. Every time you scroll down to the events, you'll see the cards enter one after another, accompanied by a smooth and natural motion. It's the kind of detail that goes unnoticed if it works well, but makes the entire experience more pleasant.

For those looking for information on the foundation's events and initiatives, this means more intuitive and engaging navigation. For One Ocean Foundation, it means another opportunity to tell its stories in a memorable way, aligned with the values of innovation and care for our planet that guide it.

This update represents our ongoing commitment to improving the foundation's digital experience. Every design choice, every animation, every visual element serves to make the communication of One Ocean Foundation's ocean sustainability mission more effective. We will continue to innovate, listening to visitor feedback and always seeking the right balance between beauty and functionality.