Does physics matter.js…?

Written by Paul Scanlon

…I think it does, but then again I love maths, code and all the things that, once known amongst your peers, mean you then get left off the dinner party invitation list. Nonetheless, when not attending dinner parties, I’m at work or home reading, learning and progressing my skill set.

Something that caught my eye recently was Matter.js – a 2D rigid body JavaScript physics engine…


…and what does that mean?

Well it means we can move graphics with code, not timelines, and these graphics can behave within a world or with other graphics in a way not too dissimilar to how they might behave in the real world. It’s a pretty light weight library weighing in around 75kb (minified) – perfect for rich media banners!


I’m sure you’ve seen all manner of great looking Chrome experiments and we ourselves have created a few great cross platform animations/interactions but we’ve yet to really nail this in display advertising.

One of the biggest problems we have with any kind of visual effect in banners is the file weight restrictions. We can of course resort to a video-based motion graphics piece but we’ll probably run into auto play issues with publishers as they still struggle with understanding the difference between video in the traditional sense, i.e. a TV advertisement, and a motion graphics animation of ‘type’ video.

Of course we can’t prevent iOS forcing the ‘video’ into full screen mode, and some devices that can play video ‘inline’  won’t auto play. Using image sequences can also be an option but can end up looking overly optimized and well, a bit rubbish.  So we’re back to animating DOM elements in Javascript/CSS. Animating DOM elements is fine in most cases and we often use our own tweening library SuperTween.js for this which easily handles things like position, rotation, scale and alpha. This method, for most of the time at least, is enough to satisfy art directors and marketing clients… but not me!

What happened to doing all those great experiments in AS2 and AS3 back in the day when everyone was looking at banner blog for what we could do better than the last online ad? I’m still very much striving to do this in a world without Flash; code is still code after all and we can still create exciting and interesting effects.

And so, after discovering Matter.js, we conjured up a little experiment for National Apple Day (yes apparently it’s a thing!). It’s a pretty perfect opportunity to demonstrate a real application for physics; apples falling etc. have, for many many years, been connected to scientific breakthroughs (Search: Sir Isaac Newton 2nd law).

So, please take a look and enjoy the science behind this visual treatment.