Making a case for curbside recycling with scrolly-telling
In 2016, the City of Lethbridge had just turned down a motion to develop a curbside recycling program. In response, Environment Lethbridge started WasteLess, a project to create an innovative, educational platform on the impact of waste disposal and making the case for waste reduction in Lethbridge.
http://wasteless.ca/waste-in-yql
Note: Some animations may not work, this has not been updated since 2016
Writing and planning
I was initially brought on to ideate what kind of a web presence we wanted to have, but the narrative hadn’t been written yet. I became very involved in the writing process, including simplifying content as much as possible, and ensuring everything flowed nicely. We decided to make a page of animated illustrations, and brought on my fellow New Media grad Kiri Stolz to make the graphics. I learned how to use the GSAP animation library to bring them to life!
The content and design influenced one another the entire way, which helped reduce the amount of rewriting needed (in case a graphic didn’t work with the text).
I quickly learned how SVG files work, and how to animate them
This is my first project learning about SVGs and how they work, and how to optimize them. It is also my first experience with the GSAP library. I worked with Kiri to create the illustrations, and guided her on how to optimize Illustrator files based on the animations planned for the graphic.
Factory scene
All of the exported SVG files were stored in a single asset file for quick retrieval, as well as quick replacement when updates were made.
Landfill scene
I had an absolute blast on this project, and loved when animations failed horribly. This one is a slam dunk!
Impact
The site had a very positive reception by the community, and shortly after the City of Lethbridge reversed its decision, passing a motion to implement curbside recycling.
Lessons learned
This project was not without its flaws, as it was my first time learning to do web animations, but I really loved learning and creating this web page.
The narrative ended up being much longer than anyone had anticipated, so it ends up being a lot of scrolling. I would also like to be more mindful of pacing, since each section had slightly different speeds.
Seeing your code come to life is so satisfying! In 2018 I gave a workshop to a New Media class at the University of Lethbridge introducing this animation method, and watching everyone come up with ridiculous animation combinations is exactly why I love this type of creation.
