VslashR_opengraph

When you look back at the things that happen in a year, lots of things change.

Especially when you’re running a small SMB.

More connections. More clients. More projects.

V/R does quality interactive work for a living, and we thought that since we spend lots of time doing pretty stuff for clients, we should do the same for our own website.

And thus, when we have some time in between gigs we constantly write and rewrite old code, and our website is no exception.

It’s good to let potential clients know the range of interactive work we do – a blend of UX, web and app dev.

This marks the third year that we’ve changed our website, and this time the site is built from the bottom up from scratch.

It uses a lot of the techniques we’ve picked up in the last two years: SVG and canvas animations, visualizations (using D3), scroll-based animations (ScrollMagic as a base with GreenSock). There is a lot of javascript code we wrote and packaged together to get this look and feel.

Because it is our own site, we get to experiment with things that we want to try, like for example the procedurally generated parallax layers in the background (visible only on desktops mainly). This is pretty cool, but testing this with responsive layouts was so heavy that we decided to take this out for mobile/tablets.

Other examples include our own project picker/visualizer instead of using a popular library like Isotope.js (like our previous website). I wanted a 3D animated version with a rotating menu that had to be extensible and responsive, so we had to write our own.

Smooth SVG animations hooked to a scroll based mechanic (as opposed to animated gifs or videos). A canvas-based projected spinning globe (based on real geojson dataset!) rather than a flat globe image.

And because a lot of these SVG animations have a light size footprint, they load quite fast, and are reasonably sharp at any size, which is good fit for the new design. Here’s a good post by Sara Soueidan on SVG animations vs animated GIFs.