This little animation sequence was inspired by the "saving" interface animations in the video game Metal Gear Solid 5: Phantom Pain. I've sat through this MSG5 user-interface device many, many times throughout my hours of game-play. The complex set of movements always intrigued me. Consequently, I set a challenge for myself — replicate this sequence on the web using HTML, CSS and JavaScript.

The animation shown below relies upon a complex set of GSAP scripts where some run concurrently while others run in sequence.

Previous Post