Trello just created a page to celebrate their user number reaches 5 million. In their celebration page, they introduce an interesting effect, a number of blue squares rotating and falling from the sky.
By inspecting their source code, I extracted the effect implementation from the page.
As you can see, the effect is implemented with Canvas animation. Trello guys created a light weight particle system.
ConfettiMachineis the particle system controller, which takes the responsibility to create new particles and call
drawmethod on them one by one.
Particleis the representation of the blue square, it takes the rotation, fading out and rendering.
The source code is extracted for study purpose, all code and credits belongs to Trello guys.