Jungle Minds

Anyone who knows me knows how much I love animation and anyone who's coded any kind of page transitions will tell you how difficult it is to get anything other than a simple fade in - fade out right. For our website, I wanted to come up with something special. As plenty of the new branding revolved around geometrical shapes, I set out to create a grid that could host any number of shapes, letters, images, anything that JS Canvas could handle which would become the crossover effect between pages. In my head, two requirements had to be met: 1. It should be extensible to more than just black and white squares. 2. It should automatically blend into the next page's background. 3. It should run at 60fps. And so, as any nerd would do, I started writing a particle generator engine. Put simply, the page is divided into a fixed number of horizontal cells, whereas vertically it is auto-filled to the bottom of the screen. Each particle has characteristics such as shape, fade in/out, duration, fill, stroke and last, but not least, a lifespan. At the end of each particle's life, they are deleted from the array to free up precious memory. Same as with any games engine, the Canvas is painted, cleared and painted again in a tick loop. The swipe effect runs through some Bezier curve easings to give it a more natural feeling. Finally, the entire canvas is scaled to the user's DPI settings as to maintain the correct proportions regardless of the screen size.

All content is lazy-loaded shortly before getting into view. For the most part, this is done through what I like to call the "blinders" effect, where text and media slide in from what looks like invisible blocks. It's a neat little trick that can be achieved by setting the parent container to overflow: hidden; and pushing the block in via translateY. Again, the key here is consistency in both usage of said animation, but also the timings and easings.