October's SOTM saw the agencies really rising to the challenge to stack up the votes! But in the end we were won over by a beautifully immersive experience, that's right Zero Landfill by Resn and Carmichael Lynch has been chosen as SOTM for October!
Growth rings are a record of the life of a tree. Each year, a tree lays down another ring, revealing clues about its history and environment. Scientists study these rings because they tell us about the environmental conditions in which the tree grew. This discipline, known as dendrochronology, offers us a window into the past.
That is why, with Zero Landfill, we turned to tree rings, as a metaphor, to examine Subaru’s own environmental history. Our collaboration with Carmichael Lynch traces and highlights key moments in Subaru’s environmental legacy.
The timeline, bark, and tree rings were built using a canvas element. As the user interacts with the tree, the points on each of the rings reposition themselves, creating an organic motion.
Scrolling through the page causes the tree to unfold and form a timeline. We calculate not one, but two sets of coordinates for each point; one located on a line, and one on a circle. To acquire the final position of a point, a weighted average between these coordinates is calculated, gradually shifting between the sets.
The bark, forming the outermost ring, animates using an irregular sine wave, mimicking the growth of a tree. This animation was initially prototyped using SVG, then ported to canvas for performance reasons.
A content layer is placed over the canvas layer. We track coordinates along each line within the canvas layer, as the user navigates through the website. DOM elements are continually appended and detached from the content layer during this interaction. By ensuring the elements we use are transformed wherever possible, repaints are kept to a minimum.
The result is a dendrochronological journey through Subaru’s environmental history.
Winners!
Each month we give away exclusive design prizes just for voting for your Site of the Month and sharing them on social media. The lucky winners of 3 One year Webydo Pro Plan licenses are:
- @Afterdepth
- @gerbenvangils
- @marcoange
Congratulations to you three!