Collaborated with Double Play on the new Champions for Good site. Helped with some web animations and details.
Here are some of the highlights from the site. (My favorite part is those stick figure animations. They’re just awesome 🤌)
Working with sound was completely new for me. We added this feature later on, and I hadn’t done anything with sound on the web before.
Bringing sound to a button. Ambient sounds that fade in and out while scrolling. Sounds for card swipes. Sounds for stickers on click. Sounds that get louder when your mouse is near an element.
I didn’t have the best solution for everything, but now I know which mistakes I won’t make next time working with sound 😃
We also used some
@osmosupply resources:
- Flick Cards Slider
- Stacked Cards Slider
- Dynamic Custom Text Cursor
I also adjusted them with sound, different behaviors on mobile, and other tweaks.
And a
@madewithgsap resource:
- 020 Mouse Move
I adjusted that as well. Tweaked the animation easings, changed how many cards are shown on mouse move, and fixed a small issue where cards moved way too fast if you quickly hovered out of the window and back in. I clamped the movement to keep it under control.
All in all a great team behind this site 🎾
More details on some elements coming soon!
Design:
@SamuelSiebler
Development: Jakob Wiemer & Me
Motion: Pol O’Callaghan & Sha Sanchez
Copywriting: Paul Adolphs
Check out the live site! 🔗 in the comments.