1.0Overviewso, basically...

Boppy wanted a modern, fun site to advertise their baby-related products. I worked with my team at Zenman, the agency I was working with at the time, to propose a strategy to accomplish that. I also created a subtle “bubbling” animation to make the site amusing to browse, and I couldn’t find a slider plugin unique enough, so I created one from scratch.

Services

Details

  • Heavily involved in site strategy and team collaboration.
  • Created fun, subtle, “bubble” animation for interactions.
  • Developed my own slider to match site’s unique animation style.
Website developed for Boppy at desktop screen width

2.0Special Highlightslet me draw your attention to...

2.1Bouncy Animations

I wanted to add a fun, lively quality to the site through animation, which seemed like it fit well with the content of the website. I know the website’s audience is mainly parents, but I wanted something eye-catching that a baby might find entertaining as mom and dad browse the pages.

I first built a bubbling navigation animation on mobile screens, and decided it was interesting enough and, of equal importance, subtle enough to use as a sort of theme. Using consistent colors, spacing, fonts, and so on is great, but why not add consistent animations to the mix? So I added a subtle bounce to many of the other interactive features on the website wherever I could.

2.2A Note on Collaboration

I told Zenman I was planning to resign my position at the agency and go off on my own soon, but was committed to finishing the final project I was scheduled for: Boppy.

This was under a tight deadline, so it was all-hands-on-deck when my team got started. As head of the development team, I had put together many processes and tools to make collaboration seamless, and this project put those to the test!

I also worked with a contract developer who built the eCommerce side of the site since Boppy had decided to use an alternative to WordPress for those pages, as it integrated with their internal systems well.

The result was a seamless team effort between designers, front- and back-end developers, copy writers, project managers, and—most importantly—the client. And the site looks awesome!

As head of the development team, I had put together many processes and tools to make collaboration seamless, and this project put those to the test!

3.0Technicalfor the geeks

Play with the code!

See the Pen Timeline Slider by tcmulder (@tcmulder) on CodePen.

3.1Hand-Rolled Bouncy Slider

Lots of sliders, well, “slide” (from side to side) for their transition animation, though a few offer “fade” as well. But I wanted bounce (or slide-in-and-bounce to be more specific) to go along with the website’s animation theme and didn’t want to hack into an existing slider plugin, fighting its built-in slide animations to pull off the look I wanted. So I just developed my own slider from the ground up.

I integrated it fully into WordPress as well, so Boppy staff can later update it with new years and milestones in the future. Works responsive, too—check it out!