Niiiiice. Got a demo of that sitting around somewhere?

I originally wrote some “complex” calculations in JS where the logo calculated which edges it was touching at any given time, what angle to bounce at, and all that jazz, before finding a fantastic article by Javier Morales who pointed out that a diagonal bouncing logo is actually just a horizontal and vertical bouncing logo happening at the same time (with the timing of each relative to their length of their axes should they be different).

His example code animated the logo’s top and left properties respectively, which is generally fine, but my app was going to potentially have 100s of logos all bouncing at the same time so optimisation was imperative. I swapped the top/left out for two transform: translateX/Ys only to quickly find out that animation was overriding the other. Bugger!

A bit more digging and I found out animation-composition exists and it felt like it was literally built for my exact scenario. It was as simple as drop that property in and now both my transforms were no longer in a battle over exclusive rights to my animation, but could now exist in perfect harmony!

As in turned out, the platform I was building the webapp for (the streaming software OBS) had an embedded browser that was a few versions of Chromium behind, and animation-composition wasn’t actually supported yet so it didn’t bloody work 😅 So in the end I had to do a minor refactor and add a wrapper element which animates on only one axis, whilst the original inner element animates only on the other.

But I just thought I’d share another real world application of this cheeky little property!