Front End Development, Interactive
Manhattan Associates, a supply chain software company, wanted an interactive way for their sales team to showcase their software at conferences. Once the design schematic of the warehouse was created, I was tasked with animating all the elements and providing an interactive interface to highlight certain aspects in their software.
Development Approach
I had never attempted anything this animated so I researched many solutions and after attempts to animate with just css I finally decided on greensock for my animation framework. The speed and ease of use outpaced all other solutions. Instead of using a canvas element, the entire warehouse is a single svg file. This presented a lot of challenges the further I got into the development phase but also had an advantage of a smooth responsive transition between screens.
Interactive User Interfaces
Pulses
Pulses are present throughout the warehouse which when clicked, will popup a screen with more information. I used a simple lightbox plugin called lity to accomplish this. The warehouse will zoom in and focus on the section that was clicked.
Labels
The client wanted additional ways to highlight certain sections located throughout the warehouse. Toggle buttons were added with an animated transition.
Menu
A bootstrap style menu was added and mirrors all the popups located on the warehouse.
Retail Store
In phase two of the project, a completely new section for a Retail store setting was added. I had to create a transition between the two views and animate more elements.
Retail Store View