Responses by Resn.

Background: Web3 platform Navigate aims to upend the current system of data ownership where big platforms collect, control and profit from your data. To do this, Navigate is gamifying and decentralizing data collection, rewarding users for each and every data contribution they make. We designed a website to introduce and onboard users into its data collection platform with an audience of anyone who does anything online. We expect early adopters to come from the tech-savvy Web3 world while also attracting curious people who are interested in controlling their own data but don’t know as much about technology. The challenge was to appeal to both ends of the knowledge spectrum.

Favorite details: The scrolling storyline is the centerpiece of Navigate. We worked in collaboration with animation studio Le Cube to craft the sequence. The purpose was to be playful and engaging so people would keep scrolling to the end. In addition to the main story animation, we felt it was important to keep the characters alive during the natural breakpoints in the story where users are expected to read. To do this, we added in subtle looping motion at these key moments. It keeps the whole experience fluid without distracting the user from the content. Balancing the storytelling, motion design and interface was essential to fully explore Navigate’s vision, and we’re proud of how we were able to guide users through a potentially complex idea in a fun, intuitive way.

Challenges: Perhaps the most challenging aspect of the site was the scroll-driven storytelling system. We used ScrollyVideo.js to handle video playback. It enables responsive scrollable videos without requiring obscure encoding formats. It gave us precise control over scrubbing behavior, and it let us implement natural-feeling ambient looping animations that masked any stops in playback. This required tight coordination between the animation and development teams to make the experience feel smooth.

Navigation structure: As a narrative-driven one-pager, the core navigation structure is scroll driven. We added additional nav tools like the chapter markers in the header that allowed people to jump to important sections of the story. We also used design cues to help guide people through the site. To do this, we worked with icon designer Iconwerk to come up with an icon language that draws inspiration from subway systems to help give users additional context. We also used animated arrows to provide natural breaks in the flow between sections and give you a sense of location throughout the site.

Technology: We used different techniques to add visual interest while improving performance. We used GSAP’s SplitText and ScrollTrigger libraries to create smooth, dynamic text animations that respond to the user’s scroll behavior. We used Rive to add fluid motion graphics, like the responsive hover effects and button interactions. We also added parallax and mouse effects to background elements that move at varying speeds, UI elements that subtly track cursor movement, and visual components across the site that respond with multilayered motion to create a more immersive, responsive experience.