3D Accordion Effect - UX Lab 006
I posted the following experiment as a way of demonstrating just how far the line has blurred between web based animation and OS based animation. I saw Dribbble shots (one and two) by Indian designer Pranav Pramod and was inspired to replicate the effect in CSS3.
Unfortunately nothing is ever as easy as it seems. If it was, someone else would have already posted a similar effect. The problem is that when animating something with a 3D transform with a forced perspective, there is no way to measure or mirror the actual height represented in the browser using CSS. If you animate the parent element from 0px in height to 30px, it’s a straightforward linear animation. The 3D transform, on the other hand, changes on a non-linear scale because of the perspective.
There are two solutions, neither of which are desirable.
The first involves JavaScript, which frankly I had tried to avoid. In this example, the animation is triggered by the addition of a CSS class via JavaScript - but could just as easily be bound to an :active:target CSS event. The only way to get the actual browser rendered height of the element is to get it via JavaScript with the obj.clientHeight getter. While discussion pointed to wrapping the object in a parent element and not needing JavaScript at all, this does not work in all browsers.
Instead the JavaScript method involves binding a function with requestAnimationFrame which sets the parent objects height to mirror the calculated height of the transformed object. Accurate, but if we wanted to perform calculations many times per second, why did we bother animating with CSS at all?
The other method, considerably less accurate and very fiddly, is to match the easing or timing of the two animations. It may be possible to create a custom timing function using cubic-bezier which matches the rate of easing of a 30px tall object, rotating from -90deg to 0deg, with a perspective of 400 units. But why would you? That’s shit house.
Maybe in this instance a flat out Canvas animation would have been much more sensible. You’re still performing a function every ‘x’ milliseconds, but at least the canvas itself may be hardware accelerated. Until CSS animation matures, we will most likely have to abuse the JavaScript add-ons such as the one described earlier. Or even better yet, sever the ties with HTML and CSS and - get this right - use graphical languages for what they’re intended.
Ninja Edit: Also, you can’t yet animate background gradients so the whole 3D effect on the depth of the flaps is kind of impossible for now.
Sad-face Edit: The second I posted this, someone posted pretty much the exact same thing to Hacker News in a much more polished way. Check out Paperfold CSS.
You’re riding a high, you just put together a design that you couldn’t be more proud of. You’ve fulfilled all of the client’s goals—goals they didn’t even know they had (bonus!) and are also feeling confident of the integrity of the piece at hand. You’ve labored over the kerning, the alignment, the proportion, the balance, the slight variations of colors… you’re on top of the world and no one can stop you. At least in your head—and that’s all that matters.
Flash forward a month later. You’re struggling to come up with new ideas, fresh thinking, sound logic. You see awesome work being posted on Dribbble and FFFFound. Everywhere you look, you’re wishing you had made this, that, and the other thing. You’re wondering if you’re even cut out for the world that is design. Hell—why the world can’t see aesthetics, logic, and experience the way you do. You wonder if it is all pointless. Your parents wanted you to be an engineer and you let them down for that fancy-pants art school. You envy the mundane: the mindlessness of it all. Screw it—you’ll be happier flipping burgers. Maybe you’ll come up with a fancy way to swirl the ketchup and mustard into the restaurant’s logo.
Repeat.
Welcome to the life of a creative.
It’s just a touch melodramatic - but accurate to a degree :(
Design is a Drug (via jessedodds)
Dribbble Lazy Loader
In my last post I said that if enough people cared, I would make a Dribbble lazy loader (or “infinity scroller”). A few people said they were keen so, here it is! Once the scroller hits the bottom of the page, it loads in the next page of shots. This was a bit of fun to write and learn :)
If anyone reading this downloaded the last one, I suggest you remove it and add it again. The two will most likely conflict.
Dribbble AJAX Pager [user.js]
A Safari extension came out this week that enhanced Dribbble by removing the need for thumbnails and increasing the width of the central pane. It inspired me to put together a quick Greasemonkey script for dynamically loading in the next collection of shots and appending it to the page. This was done entirely for shits and giggles.
This was made possible by the brilliant-but-cumbersome jQuery .load() method. Although the final version has a lot of wrapper code to make it all work, the guts of this entire script is a single, amazing line of jQuery:
$.load(“?page=” + pageNumber + ” ol.dribbbles”);
If there’s any interest, I’ll turn this into a Forrst-styled lazy loader.
Ego Wish List
The Ego application is brilliant. I think it works really well on the iPhone - presenting a great design and simple functionality that has earned it a spot in my top 4. I still haven’t had the chance to play with it on an iPad, but I think the extra functionality delivered in the form factor would be wicked too.
Despite its brilliance, I’d still love to see a few more metrics added.
Dribbble Followers
Pretty simple. You could alternatively have the number of shots you have posted, likes you have received (total); but I think the total number of followers would stroke the ego enough.
Forrst Followers
Similar deal here, I think just the one metric of followers would get the job done.
AdSense
The AdSense metrics would definitely need multiple views in the typical Ego fashion. Today. Yesterday. This Week. This Month. This Year.
GitHub
There’s also the potential of multiple views with GitHub. Personal followers. Branch followers. Branch Issues/Bugs. Forks. Wow, actually quite a lot when you think about it. Branch followers would probably be the highest priority for me.
I love Dribbble but …
I love Dribbble as a design resource. I never shut up about it. Our design department used to base our best-practice design decisions on what we found on PatternTap. There was nothing wrong with that, but the designers at Dribbble are really innovative and fresh. Their work is not limited solely to the web, too. Dribbble does of course have a few teething problems:
Queued Animations
This is the most frustrating issue with Dribbble at the moment. The way the UI works is when you mouse over a screenshot, you can view its details contextually. But because the animations continually queue up, and are never cleared, one quick swipe of the mouse will have them flip-flopping around like fish out of water.
A couple of flicks of the mouse and you’ll have something like this:
All they need to is .stop(true,false) before they do their .fadeIn(), which will prevent queueing of animations.
Searching for “Search”
Thankfully they fixed this one recently. Clicking the tag “search” or simply entering “search” in the search field would result in an error. It’s pretty annoying when you’re trying to look up examples of great search fields ;)
Windows + Firefox + Helvetica Neue = Ugly
If you are one of the select few who have Helvetica Neue on a Windows machine, a lot of design-centric places you go throughout the internet will be horrendously rendered. I’m not sure exactly what the issue is, but Firefox seems to absolutely crap its dacks whenever it comes across Helvetica Neue.
The Fanboys
The other criticism I’ve been hearing is that some designers simply can’t put a foot wrong on Dribbble. The thing about Dribbble is that it places aspiring designers next to the people they idolise. Sometimes amazing designs sit at the bottom of the rankings with a few comments, while mediocre work from design figure-heads garners plenty of meaningless praise. And no, it’s not because I’m not the jealous type; I don’t even have an account/invite!
