Animation Foundry

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


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!


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.

V/R 3D deck

By Chi-Loong Chan | | Presentation, V/R


We have just released a new V/R showcase deck.

This one has 3D transitions so that it looks like you’re looking at content pieces whizzing about in 3D space.

The closest analogue to our online decks is that it serves exactly the same function as a Prezi deck, except that ours are custom-coded.

Not only does this give us almost full flexibility to design the layout and the way the deck flows between transitions, it allows us to come up with unique code art to give exactly the user experience that we want it to.

It was pretty fun planning how the pieces fit together in 3D space, which is basically a mapping of translates/rotates/scales in x,y,z coordinates. We hope you enjoy it!

Much thanks to the jmpress.js library, which was built on the impress.js library, on which the deck was built.

This idea was based on a custom 3D piece we did for a client about a year or so back. I had always wanted to take some time to do a great one for V/R, where all the 3D elements coalesce nicely into a bigger piece when you zoom out, like the V/R logo here.

I finally completed the deck a few months back. However, Kok Keong needed some time to productize it and make sure it runs decently on mobile, tablet and desktop browsers that we support, which is often a big non-trivial step.

CSS 3D transforms behave different on IE (curses on IE!), and we can’t keep the experience the same on IE as on other browsers so a truncated flow had to be designed for IE browsers. Recommended to run this deck on a desktop or powerful tablet as the 3D transforms are pretty heavy on the device and will crash slower machines.

New V/R website makeover

By Chi-Loong Chan | | V/R


Time flies.

It really does, and the last post has been close to six months since I last updated anything.

In that interim period, tons of things have been happening. I guess it is somewhat a good thing that we’re busy enough that we didn’t update the blog.

My bad. I shall endeavor to keep at least a post or two once in a while, just to keep this blog going.

In the meantime we’ve done marketing campaign websites, various data visualizations/animations, our first 3D HTML animation presentation deck, our upcoming choose-you-own-adventure game script for paying clients. Lots of small updates to our own showcases, like this Budget 2014 one.

Some of these are in our showcase on our website. Others are under NDA lockdown and we can show what we’ve done in person, but not really talk about it on our website openly. 🙁

Anyway, one other major update is the look and feel of our website, currently v2.0.

Rebuilt from scratch (using bootstrap as the responsive template), with a bit of simple title animation done in Greensock, and then backend ported to WordPress.

I just wanted a more modern aesthetic. Plus when we you down deeper into the innards of the theme, you can do lot of magic as you know where each piece of the code goes.

Leaving you folks with the old globe-like image that used to grace the front page of our website and has now been retired.

And the journey of V/R begins…

By Chi-Loong Chan | | V/R

It’s been almost exactly two months since we incorporated V/R in January 2013.

Things have been busy as we try to get things off the ground.

Setting up the company structure, building some proof-of-concept code based on our initial ideas, getting the website up, building marketing and creds decks, etc.

I was originally hesitant about starting a new blog about this new venture of ours, V/R.

Would I have time to write new content when things are busy? Then I realized it doesn’t really matter.

Because unlike other blogs like Techgoondu — which I was part of for four years — my goal here isn’t so much to get eyeballs and hits by posting constantly, but to document the journey that we’re going through.

It’s like keeping a journal through time, except that it is a shared experience. Whatever the outcome, here’s hoping it’ll be a super fun ride.

And we have so many ideas that we want to try and build and share with everybody. For example:

  • Cool data visualizations using HTML 5. (like the ones at NYT)
  • A choose-your-own-adventure interactive game that tells an engaging story. (like this really cool one, SPENT)
  • A mobile based augmented reality stamp rally.

We’re working on some of these as we speak.

And there are tons more to explore, as interfaces will really change the way we view the world in the future. The divide between the virtual and the real will never be thinner.

Google glasses. Gesture-based input as effortless as waving your fingers. 3D full holographic experiences.

It will be an interesting to see how these technologies will shape how we tell stories in the future.