Making some magic with Scroll Magic.
One of my favorite parts of website animations is that it allows for storytelling in ways you otherwise could not. For this project I had the opportunity to animate a scene of a decrepit mine as it is brought back to life through mining for cryptocurrency.
When an animation is this advanced it is critical that each element in the actual SVG document is properly labeled.
I took the SVG, designed by Joel Markquart, and overplayed each scene directly over the other and essentially showed or hid each element based on the timeline and scroll depth.
I implemented a simple naming convention making the development process a little bit easier when selecting my item to reference.
Building the Structure
There are 7 scenes total. Each scene had multiple elements and sections of text to animate – and of course I had to consider the entrance and the exit.
See it in Action
Scroll within the frame below to experiencing the scrolling animation. Note that the animation works in reverse as well.
See something here I might be able to help you do for your project? The form below is a great way to get in touch! Fill it out & I'll follow up shortly after I receive your message.