What's at Stake?
When it comes to doing the right thing, society has come a long way in the last decade. Healthy, active lifestyles are now at the forefront of what’s fashionable; so are making decisions that benefit the environment as much as ourselves. However, we still have a very long, uphill battle to go.
It’s been suggested that over 300 football fields worth of rainforest are destroyed every hour to make way for palm oil plantations alone. That’s 2.63 million football fields per year.
Palm oil is in nearly everything – it’s in close to 50% of the packaged products we find in supermarkets, everything from pizza, doughnuts and chocolate, to deodorant, shampoo, toothpaste and lipstick. It’s also used in animal feed and as a biofuel in many parts of the world.
Deforestation has led to the endangerment of several species such as the Orangutan, pygmy elephant and Sumatran rhino. Forest loss, combined with conversion of carbon rich peat soils are also throwing out millions of tonnes of greenhouse gases into the atmosphere and contributing to climate change. If that wasn’t enough, there still remains known exploitation of workers and child labour within the palm oil industry.
So long as we keep buying their products, why would they change? Change isn’t going to happen without us. It starts by having those difficult conversations with our friends, families and neighbours to educate and support each other into making better decisions.
At the forefront of this fight are companies like Ninety Nine Street who have taken the baton in this age-old fight. Not just against palm oil, but into becoming more sustainable through education and actions.
Nimbl was invited to come onboard with 99St to help tell this story. Our mission was to educate consumers in a way that was fun and engaging. Especially to their younger audiences to show them that being sustainable can be “cool” as well.
The Objective
It was the goal of appealing to their younger audiences that resonated the most for us at Nimbl. We’ve all been to school, we know how intense the pressure can be to fit in, or to be one of the “cool kids”. Acts of rebellion, even as small as littering or consumption of currently trending products, are often synonymous to one’s success in achieving the desired social status.
Changing this behaviour can only be done from within and it starts, leading by example. The goal became immediately clear. Create a product that gains social acceptance from young demographics. Provide a platform to teach the next generation on ways they can protect the world they’ll one day inherit.
Planning
I remember being at 99St’s HQ and I couldn’t shake the image of watching this orangutan riding a BMX. I couldn’t help but ask myself; what if we were in their situation? It’s their world that we’re destroying with palm oil plantations, but it’s also ours. I couldn’t help but see the similarities in those lost habitats, with the state of the planet being passed to future generations.
We decided to create a world where Orangutans thrived, almost like a utopian alternate dimension that represented a world where society thrived in harmony with nature. We are the orangutans. Their lessons are our own.
The Artwork
We drew inspiration from our work with https://www.gorgeouspizza.co.nz/ for creating an interactive experience. Working with our in-house artist, Daniel, we quickly storyboarded the concept from our initial whiteboard session with 99St.
Each scene had to be designed in modular components in order to:
- 1. Create a parallax effect to imply motion
- 2. Utilise separate layers to allow individual assets to be animated
- 3. Adhere to a custom aspect ratio that allowed for a universal device experience
The Animation
During our R&D phase, we explored a large range of different animation technologies that were supported by major browsers. It’s common to animate vector graphics on the web, but less so for large graphics. Formats such as GIF can be better on performance, but lose a lot of quality in the process. There are more modern formats such as APNG and WebP that support animation, but their file sizes would be far too great given the number of assets we wanted to support per scene.
To combat this issue, we turned to technology used in the game industry. 2D assets known as “sprites” are stored as a PNG, before being animated using code stored in JSON format. This allows us to keep the animation as lightweight as a static image, whilst having long, complex animations like you would in a game.
The Development
The finished product is the result of web development that really had to think outside of the box (or in this case, screen).
Each scene had its own unique challenges. Everything we built had to be supported by any device screen, as well as any browser. On top of that, we also had to keep assets lightweight to support slower mobile connections.
Example Scene
The intro sequence utilises the effect known as parallax. This effect has been used since the early days of both films and games alike. By scrolling different 2D layers, stacked on top of each other, but at different speeds, it creates a 3D illusion by adding depth between the layers.
The background, overlay and sprite animation were set to unique scroll speeds, with the background layers simply looping on the Y axis, whilst the sprite simply remained in the middle at all times.
For final added effect, we also placed the sprite behind the overlay layer. This allowed the tree canopies to cast their shadows on the sprite by simply overlaying them on top. This completed the end result we were happy with.
The end result is an immersive, full-screen, animated sequence, using just 3 assets total; each just a static image.
