Tool Time

And, to top it off, the project was with an existing client, which meant our teams had an established rapport and a foundation of trust. This afforded us some leeway for experimentation in both the design and build phase.

Working closely with Sophie Shepherd, the design lead on the project, we had the opportunity to explore techniques we’d been eyeing up on the periphery, but hadn’t had a chance to formally implement. It was a welcomed change of pace. Below we describe three high-level techniques we worked to incorporate in the one-pager.

Animations triggered on scroll

As it’s a long, one-page site, timing is everything. We didn’t want to force users to arrow through full-screen panels, as is typical on this sort of thing. Instead, we incorporated subtle CSS animations on things like text and images to add a sense of pacing and motion through the experience.

These animations need to be triggered on scroll, so the user can see them once they reach them on the page, else they would begin on page-load and the user would miss them below the fold. For that lil’ piece of functionality, we leveraged WOW.js. I first learned about WOW.js about a year ago when the awesome people at Zurb came to visit our offices and give us an in-person tour of the new Foundation. Wow.js is a lightweight scroll position watcher that adds a class to elements to trigger CSS-driven animations. Such simple, much easy to understand!

SVGs

Things on the web change fast, and so after working on one project for seven months, I was ready to jump headfirst into becoming an SVG expert. Sophie and I hadn’t extensively explored SVG-ing all the things, but in the wake of retina-everything, we wanted to become well-versed in utilizing them. Beyond implementing the basics (icons, logos, etc.), we took this opportunity to see what fun things we could do with SVG. Specifically we dug into techniques for mixing SVG with CSS animations, as highlighted in the “Globally Connected” section of the site. You’ll see that this section is designed around a map in which each country animates in and then remains lit.

Sophie’s technique for creating that map as an SVG in Illustrator and then animating it was quite interesting. She color-coded each of the dots that made up the shape of a country before export, and post-export did a find and replace for fill paths to classes. So, for example, to class Canada for animating, she colored the dots red in Illustrator and post-export did a find and replace for fill=”#ff0000” to class=”canada”. This helped us isolate each country to animate individually (even though the map is one embedded SVG). I then used wow.js to trigger these CSS animations on scroll.

Counting up

We wanted to add a visual effect to the large infographic-like numbers on this marketing site outside of CSS-gradients, and we found countUP.js to be just the solution. Again, it’s simple to implement, the code is well-written and easy to extend, and we found it perfectly suited for our needs. Adding this to our project created an interesting visual effect that also worked to slow users down as they scrolled through the site. A+++ would countUP.js again.

Have you worked on any small projects recently that inspired you to try something new? Let us know in the comments below.

Back to Top