Paperfold CSS | Hacker News Reader

Paperfold CSS

developer.mozilla.org

325 pointstilt44 comments

Woah, this is freaky. I just posted a similar experiment to my personal collection minutes apart. There are some fundamental limitations to CSS3 animation at the moment, like not being able to animate gradient backgrounds. You can read about it here: http://taitems.tumblr.com/post/20267547479/3d-accordion-effe... - apologies for the self-promotion.

Here is my unpublished example from about 18 months ago:

http://dl.dropbox.com/u/124944/unfold/index.html

It's unpublished because it doesn't work very well, (webkit only I think) but it does 'work' on arbitrary content and will create a seam even in the middle of a line of text.

Great minds think alike? If you're looking for feedback, how might you make the actual background (the dark blue) not show when the animation runs? And maybe something interesting faux content like a feed of some sort? Those two things would make this comparable to the Moz demo in every way.

Seriously, nice job.

While the Mozilla one worked, your example did not work on FF 11.

Likewise fx13 ah the beauty of the "open" web. I bet it works on Chrome - and nothing else.

I'm on Chrome and it didn't work for me.

My prediction: the only person it works for will end up being on IE 6.

I fixed up Firefox support. Strangely, all the 3D transform examples have always mentioned something like "perspective: 1000". It's always been some imaginary unit. Firefox requires "1000px" for it to work.

I'm interested in what happened when I only partially folded the items.

What's intriguing about using 3D this way is that, like a zoomable user interface, it can reduce the visual space that lower priority visual items take up but still hint at their semantic meaning.

However, I also noticed the supposedly less important information actually looks more interesting than the top-level content (which is flat on the screen), and so it became a distraction and backfired.

If you like that idea, you might like the Perspective Wall (CHI '91) by Mackinlay, Robertson and Card. Abstract:

""" Tasks that involve large information spaces overwhelm workspaces that do not support efficient use of space and time. For example, case studies indicate that information often contains linear components, which can result in 2D layouts with wide, inefficient aspect rations. This paper describes a technique called Perspective Wall for visualizing linear information by smoothly integrating detailed and contextual views. It uses hardware support for 3D interactive animation to fold wide 2D layouts into intuitive 3D visualizations that have a center panel for detail and two perspective panels for context. The resulting visualization supports efficient use of space and time. """

PDF: http://www2.parc.com/istl/projects/uir/publications/items/UI...

Just like the feature in OSX Mail. It's nice to see how web UI is keeping par with native development.

For reference, this is very similar to the animation OS X Mail.app uses to expand hidden quoted text.

This was also the inspiration. Well spotted.

I remember seeing mindhunter presenting this the first time. The effect was cool. But seeing him jump up and down on stage because he managed to get it working. Way cooler!

Sad to say you may be in violation of an Apple patent, then.

Prior art from Palm, 2009: http://www.youtube.com/watch?v=jTqa-0uea1w

Great stuff. I goes crazy on an iPhone iOS 4.2.1, the post spins in 3d space as you scroll.

http://i41.tinypic.com/wv48rr.png

I'm not sure what I did but while messing with the settings at one point the top slider was bouncing back and forth like a pendulum. Chrome 17

Isn't this a 3d object and not straight HTML? Therefore I would think it can't be used on basically any website.

Just CSS3 3D transforms on plain 'ole DOM objects connected by CSS3 animations.

Very interesting piece of work. How far is its cross-browser support?

Works in every browser that supports 3d transforms, namely the latest versions of Chrome, Firefox, Safari (+ Mobile)

Got this weirdness after a while without touching any settings: http://i.imgur.com/ebmc0.png

Chrome 18 osx

It's a depth-clipping bug in chrome

Hmm. It looks awesome, and I'm all for the physical metaphors approach of Apple, but how does this enhance usability versus say a standard accordion?

Amazing effect! Here's hoping it's still cool to me after I see it after every blog's "more posts" link.

If history is any indication, I would expect it to play out like this:

   1. A few awesome sites adopt it first.
   2. Eventually everyone catches on.
   3. People take it *way* overboard.
   4. Users become thoroughly annoyed.
   5. Eventually return to sanity.

Web 3.0? Seriously, CSS like this makes me think web interface development is entering a new era.

This looks a lot like the Clear app's animation for creating a new task.

The same animation is used in Apple's Mail 5 which shipped in Mac OS X Lion.

(Mail hides quoted text at the end of a message by default, and revealing the text will show this "folded paper" animation.)

Something interesting happens if you set all the variables to 0.

Spoiler alert: I hacked the slider min values to zero with the inspector. The tab's CPU usage goes off the charts & locks up; infinite loop.

Text aliasing is horrible on Chrome 18/Win8.

Chrome's text aliasing for CSS transforms is horrendous. It's because they don't use hardware acceleration (something Safari does by default, quite beautifully), meaning they render things in software poorly for greater performance.

This is just awesome! Great work!

why doesn't this work in the latest Opera?

It's great, but I wish I didn't have to do this in CSS. When you look at the source code, it doesn't look like styling at all, it looks like programming. As soon as your start calling bezier functions in a static styling language, you know something's not right. This type of coding would be much easier to do in JavaScript.

"This type of coding would be much easier to do in JavaScript."

You could do this in JavaScript by manipulating the DOM directly - that's what libraries such as jQuery offer, but having easing functions for transitions belongs as part of the styling[1], unless you're saying that CSS should only be for static layouts?

[1] http://www.w3.org/TR/css3-transitions/#transition-timing-fun...

True, but I like being able to do this declaratively. You don't incrementally change it with code, you define a mathematical function against time for the transformation.

can we call that pure and functional?

I thought being able to do something in pure CSS without using JavaScript was something good.

Not if CSS gradually turns into JavaScript.

I don't know much about CSS. What happens here?

https://developer.mozilla.org/media/uploads/demos/m/r/mrflix...

Half of the CSS code is used for the demo interaction (time changing, showing the helper elements and for debugging [grouping all animated elements to change the transition-duration all at one]).

In production it would be way less complex.

Is this real? This looks kinda cool, but I don't trust anything on this day of all days!

Reply on news.ycombinator.com