Case Study

Mining Animation

Making some magic with Scroll Magic.

Creative Process

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.

Scope

GSAP Animations
Scroll Magic
Front-End Development

Staying Organized

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

Here is an example snippet of one of the scenese I wrote using the GSAP JavaScript.

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.

Check out the live animation on my GitHub page here!

Web Design

In addition to the animation, I also developed the front-end of BunkerMining.com. This site included a video in the hero section as well as some other micro-animations throughout. Designed by Joel Markquart.

Say Hello!

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.

Type of Project

7 + 9 =