Example
Greyfield: a site that grows (1968 to 2026)
Here's my take on the challenge. It's the history of Greyfield Resource Recovery, a waste company I made up.
The illustrations were made with Canva, and the voice-over and sound effects came from ElevenLabs. Gemini was used to code the transitions.
Select play or select/drag the marker along the rail and the site builds itself along the skyline era by era. Drag back and it comes down again. At 2026 the landfill mound goes green and grows trees, which felt like the right ending for a waste company!
I spent quite a bit of time on accessibility on this one too. The rail works from the keyboard, and screen readers get a short announcement instead of talking over the voice-over. There's a mute button, and the animations stop after a few seconds so nothing loops beside the text.
The full file is available in the course.
Greyfield Interactive Timeline | Rise
5 Replies
You incorporated great storytelling techniques, and it is a nice, clean aesthetic.
I like the slightly old-fashioned graphics and the super-simple, super-effective animations.
What a cool example! And love that you also focused on accessibility. We are going to share this in an upcoming weekly newsletter. 👏 DShaw​
Great example. I found it very engaging. Was this based on a Code block?
Yes... the file is available for download within the course
Getting Started with the E-Learning Challenges
Find practical answers to common questions about the E-Learning Challenges, a weekly event that helps you build skills, create your portfolio, and grow as an e-learning professional.