Zaha Lives On

Created a mini-site as a tribute to Zaha Hadid, the late architect

Period

April 2016

Medium

  • HTML
  • CSS
  • Photoshop
  • Three.js
  • jQuery

Exposition

View the mini-site

This is a personal exercise in using Three.js with paginated scrolling. One of the main goals was for all animations and interactions to be extemely performant (60fps), efficient, and seamless (with no jank), there were several challenges I overcame while building this.

I had to be mindful in saving GPU and CPU cycles by freezing any intensive animations and calculations until they were explicitly needed. In addition, I made sure to freeze these animations only until after the animations that brought them into view were over (or before they started), essentially hiding the freezing/unfreezing from the user and creating a seamless experience.

I also made sure to plan wisely and instantiate variables and load resources wisely. With the CSS3-only slideshow in the Work section, which was developed from scratch, there is a small CSS3 timer which fades and contracts over the slide duration, subtly letting hinting when the slide will change. The first image in the slideshow is loaded with the page load but subsequent images begin to load as soon as the slideshow is requested to animate to view, preventing any flash in the slideshow and furthering the goals of high performance and seamless user experience.