Building a zoomable user interface with MeteorJS & GSAP

Posted

In the journey through web user interfaces and experiences, I had always wondered if there was a way to present a UI with all of the content and information visible, just tucked away within different portions of the viewport until needed.

Sounds messy? I thought so too. So I did some research out of curiosity and stumbled upon a few techniques. One such technique was a Zoomable User Interface or ZUI as it’s commonly known (think Google Maps) and one such website that implemented it was beercamp.

I decided to create one of my own, using Greensock’s awesome GSAP library.  So, together with designer, Daniel, who designed the look and layout, I set out to rework jasonnathan.com to a cool new site featuring ZUI. I decided to give CSS frameworks a miss this time, the design was simple and I wanted to use FlexBox. I did however, import a few LESS files to get quickly started for the project.

My first attempt was complete disaster! I wanted the site responsive so I tried to create a fluid layout where elements adjusted itself to spread out over the viewport. It worked, but it simply did not have the same feel as the original design. I then settled with a fixed ratio. Using a simple LESS mixin and CSS3‘s vh, vw units for measure, I hacked up something.

The second attempt, while it was super simple to implement, was just not cross-browser friendly enough. Another disaster. In the end, I opted for a mostly absolutely positioned layout – another first for me in web design. (Perhaps, I should have had a quick look at Flexbugs or even tried some LESS Mixins!). Add some skeumorphic juicy bits and I ended up with:

With the exception of the top header, it’s a standard 3-column layout with the middle column left empty to show the scaled-down pages. I wanted markup to be as simple as possible too. I created a single container with constrained proportions using the LESS mixin above and each subsequent page was absolutely positioned inside it.

Now, I just had to add some GSAP goodness… 🙂

To mimic beercamp’s easing, I chose the easing method above. It was close enough. I would still like to go back to it and get it right when I have the time.

Do have a look at the completed source on github.