The Particle Lab

Building the new Neutron Creations site

By Marc, 25 Feb 2015

In case you missed it, we launched the new Neutron Creations site last week. Here’s a little behind the scenes look at how we built some of it.

If you haven’t had a look yet, go and have a quick poke around now. It’s quite a change from our initial single page design by Tim Van Damme and the later refresh by Elliot Jay Stocks.

This latest design comes from the thoughts of James Ritchie who we’ve had the pleasure of working with on several projects over the past few years and whom we trusted to come up with something modern & clean but with the scope to show off our development abilities.

The most visual element of the design was the logo animation on the home page. This went through many concepts and iterations, usually delivered to us as video renders from Adobe After Effects, which we then prototyped to see how they would perform. Here are a few of those prototypes.

This is the first animation we considered using on the final site. The logo is built using SVG and animated in javascript using requestAnimationFrame() in an attempt to animate as smoothly as possible. The blur effect and rotation animation are implemented with an SVG filter and CSS animation respectively.

While on the final site we use fallbacks and feature detection to ensure devices get an experience suitable for them, these prototypes do not and as such will probably only work in modern browsers. Please do dig around the code and ask any questions you have.

Next we have a very different animation concept with the inner pieces of the logo locking together and the outer pieces appearing one-by-one. This time instead of using javascript, we tried a CSS animation only approach. Using some complex SASS and an unhealthy dose of trigonometry we created individually named animations for the transforms required for each of the inner segments. We used SASS loops to create the sequentially timed animations for the outer segments.

If you try viewing this prototype in Safari you’ll notice that the outer segments don’t animate smoothly due to a SVG animation bug in Safari.

Iterating on this a little we dropped the locking animation and used the same animation effect from the outer segment on the inner segments. We then dropped in (literally!) the navigation and link to the portfolio and were all pretty happy with it.

And being happy with that (albeit with a few minor tweaks) we moved on to the other, somewhat simpler, aspects of the design. But we’ll leave those for another time.

As always if you have any question do ask them below, and if you haven’t already do check out the site .

Photo of Marc Roberts, who wrote this blog post

Marc Roberts is Principal & Co-Founder at Neutron Creations, where he rules over all web development and technical direction. His favourite drink is a sweet manhattan and his favourite sandwich is a croque-monsieur. For a plethora of miscellany follow Marc Roberts on twitter.

comments powered by Disqus