Recreate Website Animation Transition

I am looking to recreate this website's square based opening logo in a gif format for another website. The square stroke animation and then the wavy-like square perimeter that transitions to the home page.

This is the first time I am working on a logo transition like this with vectors. Can someone on provide me with a good step by step instructions on how to recreate this transitional animation?