You’ve probably noticed that things are a little different around here. For the past month, I’ve been rebuilding our website from scratch, and you’re looking at the result.
When planning the site, we knew we wanted things to feel very fluid and considered (or, as the business team put it, “luxe”). To me, this meant a lot of subtle animation. We have a complicated story to tell, and moving images can be eloquent in expressing complex ideas. One thing I wanted to avoid, however, was hijacking the browser’s scrolling to create discrete vertical sections (see Camron for an example). This technique makes animation far more predictable and easier to develop, but it takes control away from the user by introducing unexpected behavior. I’m much more impressed with sites that smoothly animate regardless of scroll position, preserving the browser’s native controls.
For inspiration, I turned to Hover States, a blog that posts interesting interactions from around the web. I knew the threads I wanted to pull together: Heydays for its precision (and gorgeous work), Oyyo for its use of white space and strong images (not to mention the surprise that our brand is indebted to the visual style of dhurries), Drexler for its unusual layout, Hello Monday for its use of animation, and Acko, for those unbelievable 3D effects. Acko deserves special mention: when I first saw this page, it was one of those moments that made me reconsider what a website could be. I realized that 3D content would eventually be commonplace. Could Floored.com have the same effect?
Developing the 3D grid of triangles was a fun, challenging exercise. It began with this proof-of-concept codepen, in which all drawing and animation is handled by CSS.
Expanding on this idea, I thought it would be fun to see our signature pattern animate itself. I started implementing the triangular grid using CSS. This quickly proved rather unwieldy & inexact, so I moved on to real vector drawing with Raphael.js. It definitely gave me more precision, but when it came to animation, I still couldn’t get a smooth framerate. It seemed like I was running out of options: how could I get several hundred triangles to draw and animate at more than 30 frames per second?
If the answer seems incredibly obvious to you, then you’ll understand why I felt a little dumb for not having seen it earlier. Drawing hundreds of triangles, tens of times per second? That’s exactly what a 3D graphics engine does. Moreover, we are the 3D company; why not have something 3D right on our front page? Soon enough, I had rebuilt my grid in Three.js. (And when Luma launches, I’ll rebuild it again using our own technology.)
Now that I was all set up, I had to settle on an animation. I tried many different styles; here’s one alternate in which the grid folds up.
All of the animations on our website are controlled by the excellent GreenSock Animation Platform. GSAP is one of the best JavaScript frameworks I’ve ever come across, and the fine folks over at GreenSock deserve a shoutout for making this project so, so much easier.
That’s it for now. I hope you like the new site as much as we do. Got questions or comments? Did you find something broken? Get in touch at jake@floored.com.