Kingdom Hearts III

To celebrate the long awaited release of kingdom hearts III I decided to make a website mockup for the game itself! It was a fun mini challenge I did on my spare time. I made the mock up website on adobe XD.

I decided to go with a infinite scrolling page design with tabs on the side.

The design was then animated on Principle for Mac. It was imperative to organize all the page content and name all the layers since there were so many of them; Staying organized made creating drivers for the animation a lot easier.

I also ran into a challenge in the animation: the design program: adobe XD allows background blur function while the animation software Principle didn’t. However it didn't take long for me to figure out a creative solution: adding a blurred image of the entire site and mask it in the top banner and let it scroll at the same speed the webpage does.

Then I created a second animation to demonstrate the click effect on the tabs as well as all the interactions in “characters” page of the site because I had so much fun making the first animation video!

Hope you enjoyed the work!
I also created a scrollable Mac app for you to download and view on any apple computer! Feel free to download it from below.