The mission in 25 seconds.
I designed and built a short animated introduction for Fight the New Drug's homepage, giving visitors a quick understanding of who we were, what we did, and where to go next. What started as a homepage hero eventually found a more permanent home on our About page.
The Need
We were seeing a lot of traffic from people who had never heard of Fight the New Drug, and our name didn't exactly explain who we were or what we did. Some visitors assumed we were a religious organization. Others didn't realize we were a nonprofit. Before getting into our mission, we needed to clear up a few basics about who was behind it.
The Approach
I led with non-religious, non-legislative, and nonprofit, alongside our 501(c)(3) designation, before moving into the broader mission.
I used imagery and motion to bring the existing language to life, including photos from our street team and presentations, and stills from our documentary, connecting the message to the work behind it.
I built the roughly 25-second sequence using JavaScript to control states, with CSS transitions doing most of the animation and a few SVG morphs mixed in. It played automatically when the homepage loaded, with Learn More and Donate buttons offering the next steps and a small replay button for anyone who wanted another look.
The Outcome
As the homepage priorities shifted I moved the animation to the About page, where it has remained ever since.
The team also felt the animation addressed a recurring need to explain who we were, and liked it enough to use a recording as our YouTube channel's default autoplay video. What started as a homepage introduction turned out to be useful in more than one place.