3 / S C
A little while back, we started exploring ideas around interactive storytelling for web experiences using various tools and mediums. One of our concepts was to tell a story across 2-3 scenes, where users could scroll and pan through each scene.
Rather than relying on buttons or standard interface elements, we wanted the user to scroll through the scene so that the interaction would be a more immersive story. We decided on the idea of a hot air balloon journeying from Earth to an alien planet.
Generating the Scenes
Initially, we experimented with several image generation tools but ultimately chose Adobe Illustrator for two reasons:
- Vector assets are easier to adjust and manipulate.
- Animating vector assets in After Effects is also much simpler and more flexible.
Overall it was surprisingly fun and easy to generate three consistent scenes.
scene 1 starts on earth
scene 2 in outerspace
scene 3 on surface of the alien planet
Prototyping the Interactions
We created two videos to demo our ideas. The first video covered the larger story with scroll animation, while the second video focussed on the parallax animation of zooming and panning in each scene.
scroll animation showing the story
pan and zoom interaction
Exciting Possibilities
This experiment gave us exciting new ways and tools to quickly prototype our ideas. We’re excited to tinker further with tools like Luma and Runway to create more interesting web experiences in the future.
