Animation

Animation Foundry

By Chi-Loong Chan | | Animation, V/R, Visualization

animation_foundry

Add bling to your websites. No cod or infrastructure on your end needed!

Animation Foundry was an idea both Kok Keong and I had been toying around for some time.

We already did all of these beautiful interactive pieces that are embedded into sites via iFrames.

A lot of times the content is hosted locally at the client’s website, and the choice of iFrames is such that integration is easier (cross-code CSS pollution is a nightmare to fix).

At other times, the content is distributed to blogs, etc. and other content portals to use as part of their visualization work. Examples include the GE2015 visualization and more recently the 2016 Budget one.

I was thinking – why not turn all of these into a proper service?

You do not have to worry about code or infrastructure of any sort. Just give us your brief and we can work out and deliver an interactive piece that not only you can embed on your website, but any other blog can embed on their site.

What you get:

  • A beautiful interactive and/or animated piece.
  • Our animations and visualizations are typically responsive, and they work on desktops and mobiles/tablets.
  • Hosting and infrastructure is not something you have to worry about – we will take of this on our end. All we do is charge a simple maintenance fee (for a year) for hosting the code art on our servers.
  • Data visualizations can be updated live via live feeds.
  • You do not have to host it on our servers and host this locally on your servers. This typically makes more sense for data products or complicated pieces.
  • Costing wise, we expect that even for a wow-like responsive animation piece, it should be relatively affordable (below S$5K).

Drop us a ping if you’re intrigued!

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.

Merry Christmas from V/R

By Chi-Loong Chan | | Animation

VslashR_xmas

It’s that time of the year again where we thank all our clients, suppliers, partners, friends and well-wishers.

To remember that no man is an island, and that we owe our success to those that have come before.

To be grateful for opened doors, mentorship, and great clients.

You folks rock.

Thank you for supporting V/R and having been part of this amazing journey for us.

Best wishes and have a great holiday season!

And oh, here’s a little interactive animated Christmas card that we wrote.

It’s an upgrade of the card we sent last year, but we often do these small pieces as experiments to test and push the boundaries of what can be done.

Written mainly in Greensock, JQuery, SoundJS, this is a responsive, procedurally generated Christmas tree.

We wanted to test several plugins and libraries: How to trace SVG objects so that they look like they were being drawn or erased. How to simulate falling snow with direction and windspeed. How to morph objects from one path to another (no, it is not an animated GIF).

This final piece is a composite of various animation tests that we wrote in order to better understand our craft.

Once again, thanks, and have a Merry Christmas and Happy New Year!