Walmart Education
An interactive presentation for Walmart showing how their education program helps their employees. Walmart had lots of map based data broken down by states and D3.js was used to display this. The data itself was entered into a WordPress backend and served up as json for the D3 library.
GSAP scroll trigger is used to control animation and is combined with Fullpage.js to keep it slide by slide and full screen. There are also some custom hand coded animations for charts.
The tricky part of this build was making everything fit within one screen at the majority of viewports. This involved a heavy dose of programtism and locking the max sizes at certain viewports and absolutely positioning elements. This is not recommended for dynamic copy obviously, but as this is more of a infographic there was some solid ground to work from for content length. For mobile fitting all the content on one screen at a time was impossible, so the full page was only turned on for viewports above a certain size.
The chapter navigation on the side required some wrangling of GSAP scroll trigger so I could trigger the right chapter and reset animations after each slide. The GSAP library has come along way in the short time since this was built and now has a lot of the functionality I had to patch together out of the box. Fullpage js has some nice hooks that can be called before and after slides which made making the chapter / navigation respond nice and easy.