SavorWeb.com

By Tim on Monday, January 19th, 2015

Design and Copy Credit: SavorWeb – http://savorweb.com

I love working with these guys and the site we all built is pretty incredible. Most anything you see moving on the screen is what I managed to contribute to this beauty of an experience. It was really quite a bit of work writing custom code to make this thing behave the way we wanted.

The main line / dot animation you see in the header and other sections I actually found here: http://codepen.io/MarcoGuglielmelli/pen/lLCxy. I rebuilt and repurposed the animation for the sites header and other sections peppered through the page. The concept was written with an amazing Javascript animation library I’ve adopted called Greensock. While I do have to pay for yearly licensing it enables me to make some truly incredible experiences on the web very easily.

Doing the loading logo animation I used Photoshop and made a 30 frame gif that actually looked clean enough to use. I wanted to use a JavaScript sprite animation but was having issues getting it to work on some mobile platforms and so went the easier route and made a gif. I still think it works fairly nicely.

The navigation transition was a fun one to write as the plugins we tried to use weren’t working so I ended up just writing a bit of custom jQuery to handle the animation. It took me a bit to get it right just because I didn’t want to clone the navbar but ended up doing just that in the end.. Lesson learned if I would have just done that to begin with I would have saved myself some headache.

Though out this entire project we were working and managing our other duties. Crafting custom experiences for clients, updating / revising and all the other normal stuff a Front End Developer’s day entails.