7 ms·

Fold the DOM like paper

315 points by aram 13y ago

com2kid 13y ago
The horrible aliasing on everything (at least in FF!) makes this a real no go. Everything just looks terrible, and the performance isn't all that good either. (No IE11 supports at all, I'm hoping it at least runs well in Chrome / Webkit browsers?) (I hate to be negative, but the aliasing really is quite extreme! Sorry!)
- RyanZAG 13y ago
  I saw the problem in FF too. I checked it out in Chrome though and it looks much better - the aliasing effect is much less noticeable and performance is better. I'd guess it isn't properly optimized for FF somehow.
- ux-app 13y ago
  jaggies in Firefox can be solved with: outline: 1px solid transparent; added to elements with class .oridomi-mask It's a hack but it does give nice anti-aliased edges. Performance is perfectly smooth for me even with the AA hack above on Windows.
  - com2kid 13y ago
    > Performance is perfectly smooth for me even with the AA hack above on Windows. Playing with it more, my performance complaints appear to actually be caused by individual elements losing my mouse when I am clicked down on them and then drag outside of their bounds. This makes it seem like I have to keep re-grabbing things, the end effect is a lot of stuttering as I release and reclick on an element to grab a hold of it ahead. Purely perceptual, but still nasty.
supermatt 13y ago
Edit: Pull request sent (just .coffee as requested). Looks AMAZING in webkit browsers! Sadly in firefox I get "jaggies" on the diagonal edges due to the lack of antialiasing. I noticed that adding a transparent outline (outline: 1px solid transparent;) to the class ".oridomi-mask" I smoothed these jaggies. Although they look better they still aren't quite as crisp as webkit.
- paales 13y ago
  I assume that is because when you add an outline, the whole thing becomes the texture and the texture filtering is better than no anti aliasing it is still worse than properly rendered polygons.
blahbl4hblahtoo 13y ago
It would be awesome if one of these awesome CSS posts would actually test for the features instead of just saying..."IE? SAD TROMBONE FOR YOU!!!!"
- aram 13y ago
  Such experiments push the limits - I believe their point is not to make something that works everywhere, at least from the start.
- stefan_kendall 13y ago
  IE is a cancer. If you can in any way justify cutting off support for IE, you do it. It's a real time and money sink.
  - underwater 13y ago
    That's a ridiculous statement. Have you even used recent versions of IE?
    - pbhjpbhj 13y ago
      I've been away from professional web-dev for a while (kids!). My only real experience of IE10 is that I just handled an "IE10 on Win8 only" bug on a friends site so tested with IE10 and IE11 in a virtualised environment. I only have XP installs left of MS Windows. Of course now that IE is supposed to work they won't let you use the conditional comment targeting method so I must - it seems - break it for IE11 by instructing all IE above 9 to fallback to IE9 compatibility mode. Nothing else seems to fail with it and applying the hack (IE9 compat mode in a meta-tag) is problematic too. Has IE changed that much? That said the site is an application generated mess, it's painful. So maybe IE have really come around.
      - grrowl 13y ago
        Modern IE is nice to use and has reasonable support. It will cost you as much (in dev time) to support as any other browser (or specifically, rendering engine), and its market share is comparable to Firefox. The problem is old IE. fuck old IE and every bit of its ridiculous, antiquated and outdated self.
vanderZwan 13y ago
Funny coincidence, I just started a casual discussion about origami and programming with some friends yesterday: So, my friend Torsten (who is really into papercraft and origami) explained to me the purity hierarchy within the papercraft community. At the bottom is having to cut the paper and use glue in your creations. One level above that is if the form requires only cutting or tearing. Getting more and more pure is the form known as kirigami, which involves cuts but is made from a single sheet of paper as the base. At the top is origami - no glue, no cuts, only folds (although I'm not sure if there is such a thing as higher order origami), and ideally only one sheet of paper. The comparison with functional programming ("no glue and cuts" and "no state") is so obvious I'm surprised I've never seen it in the wild - maybe because programming has more in common with algebra, whereas origami is geometric? Although mostly unrelated to this library, we can conclude that some of the effects in OriDomi should be in a section called KiruDomi. ;) Actually, from a usability perspective, I see a problem with using those effects, like "twist" and "fracture": once scrambled, it is not obvious from the shape in which way to drag to unfold again, unlike with an effect like "stairs"
- danieldk 13y ago
  The comparison with functional programming ("no glue and cuts" and "no state") is so obvious I'm surprised I've never seen it in the wild Actually, it does occur in the wild ;): http://www.cs.ox.ac.uk/jeremy.gibbons/publications/origami.pdf http://www.cs.ox.ac.uk/jeremy.gibbons/publications/origami.p...
  - Adrock 13y ago
    There's also a rich field of algebraic analysis of origami: http://www.google.com/search?q=algebraic%20origami http://www.google.com/search?q=algebraic%20origami
    - vanderZwan 13y ago
      It's always nice to be informed you're wrong in a constructive way. Thank you too!
  - 13y ago
kaivi 13y ago
Ugh, did I break it?: http://cl.ly/image/033W3F0b3s1U http://cl.ly/image/033W3F0b3s1U It's twist(6). Also, here is accordion(30) on document.body: http://cl.ly/image/0u0V3Y19342e/o http://cl.ly/image/0u0V3Y19342e/o And that's hover in the middle logo section: http://cl.ly/image/3Y172j1T0P3N/o http://cl.ly/image/3Y172j1T0P3N/o That is a nice set of good-looking effects, I hope the project will live on.
- dmotz 13y ago
  Author here. Twist and fracture are among the more unconventional, dramatic methods that I left in for those looking for cut-up effects over folding. As you found out, you can even target the body element and the OriDomi will stretch to the window dimensions. That middle portion in the last screenshot looks like a stuck hover state probably due to the fact that you have nested OriDomi instances on the page. Thanks for trying it out.
erikstarck 13y ago
If you're in to origami, check out the Can you fold it-challenge from Tetra Pak: http://canyoufoldit.com/ http://canyoufoldit.com/ You get €5,000 for passing the qualification phase. Are you up to the challenge? Edit: clarification, 10 teams will be selected from the qualification phase for the design phase and awarded €5,000. That's at least how I understand it :) (I am not involved in the competition in any way.)
- pmr_ 13y ago
  You get 5,000 if you complete the design phase, not the qualification phase. For that you need to complete the qualification phase AND be selected to go there.
- raghunathj 13y ago
- idiot900 13y ago
  Seems like a tiny amount of money for something that would be worth quite a lot to them...
dimillian 13y ago
I was in the train, I tested it on Safari iOS 7, works great! I love it.
laveur 13y ago
Doesn't work in the latest version of Safari on my Mac. (10.9 Mavericks, latest updates) Update: Correction, didn't work the first time I went to the link but the second time was fine.
- sjtgraham 13y ago
  That is weird. I'm on 10.9 too and exactly the same happened to me.
- aram 13y ago
  Strange - everything is working the same way as in Chrome for me.
raghunathj 13y ago
Nice
deleted 13y ago
[deleted]
jashkenas 13y ago
Lovely work on the annotated source code ... it explains a lot of the tricks and techniques, and makes the otherwise perhaps abstruse math accessible: http://oridomi.com/docs/oridomi.html http://oridomi.com/docs/oridomi.html
- dmotz 13y ago
  I owe plenty of gratitude to you for both CoffeeScript and Docco. Both made building this a pleasure. For those interested in going beyond what the docs cover, the annotated source page is a great place to understand the inner workings.
  - elwell 13y ago
    Just curious, why did you check for the existence of "console" on this line: console?.warn 'OriDomi: First argument must be a DOM element'
    - danenania 13y ago
      window.console is undefined in some versions of IE if the developer tools aren't active.
      - dmotz 13y ago
        That's right.
woah 13y ago
Looks awesome, but it seems like all the examples on the page incorporate a weird "wiggling" effect in addition to the folding. Is it possible to turn this off?
- dmotz 13y ago
  Yes. That wiggling is the "ripple" mode I added recently which adds a cascading delay. It's disabled by default when creating new OriDomi instances, but I enabled it for the demos on this page. You can also programmatically turn it on and off: http://oridomi.com/#ripple http://oridomi.com/#ripple
dmotz 13y ago
Author of OriDomi here. Really excited to see this at the top of HN. I recently pushed out version 1.0 with some new features that make OriDomi easier to use. It now has an internal queueing system so you can chain up effect sequences instead of dealing with callback handlers. [1] What looks like a chain of synchronous calls will now be deferred and sequenced automatically, e.g.: folded.curl(50).collapse().setSpeed(2000).stairs(-29).foldUp().unfold(); Secondly, OriDomi elements are now fully responsive, meaning they adapt to changing dimensions caused by media queries, window resizing, etc. You can see this behavior with the demos by resizing your browser, or on the current iteration of my personal site. [2] Finally, there are two new methods that make it easy to do custom folding behavior and content manipulation, .map() [3] and .modifyContent() [4]. The former lets you pass your own function to define folding based on input angle and panel index. It's still relatively lightweight with zero dependencies and 7.6KB gzipped and minified. More than anything, a testament to what you can do with the modern browser API. Looking forward to seeing what else people do with it. Check out the annotated source [5] for a look at how it works. [1] http://oridomi.com/#queueing http://oridomi.com/#queueing [2] http://oxism.com http://oxism.com [3] http://oridomi.com/#custom http://oridomi.com/#custom [4] http://oridomi.com/#content-manipulation http://oridomi.com/#content-manipulation [5] http://oridomi.com/docs/oridomi.html http://oridomi.com/docs/oridomi.html
- benihana 13y ago
  This is really awesome, congrats!
taigeair 13y ago
Nice
EvanL 13y ago
Haha, very cool, great job! Plenty of creative application opportunities!
yuvals 13y ago
Very nice!

315 points by aram 13y ago

The horrible aliasing on everything (at least in FF!) makes this a real no go. Everything just looks terrible, and the performance isn't all that good either. (No IE11 supports at all, I'm hoping it at least runs well in Chrome / Webkit browsers?) (I hate to be negative, but the aliasing really is quite extreme! Sorry!)

RyanZAG 13y ago
I saw the problem in FF too. I checked it out in Chrome though and it looks much better - the aliasing effect is much less noticeable and performance is better. I'd guess it isn't properly optimized for FF somehow.
ux-app 13y ago
jaggies in Firefox can be solved with: outline: 1px solid transparent; added to elements with class .oridomi-mask It's a hack but it does give nice anti-aliased edges. Performance is perfectly smooth for me even with the AA hack above on Windows.
- com2kid 13y ago
  > Performance is perfectly smooth for me even with the AA hack above on Windows. Playing with it more, my performance complaints appear to actually be caused by individual elements losing my mouse when I am clicked down on them and then drag outside of their bounds. This makes it seem like I have to keep re-grabbing things, the end effect is a lot of stuttering as I release and reclick on an element to grab a hold of it ahead. Purely perceptual, but still nasty.

supermatt 13y ago

Edit: Pull request sent (just .coffee as requested). Looks AMAZING in webkit browsers! Sadly in firefox I get "jaggies" on the diagonal edges due to the lack of antialiasing. I noticed that adding a transparent outline (outline: 1px solid transparent;) to the class ".oridomi-mask" I smoothed these jaggies. Although they look better they still aren't quite as crisp as webkit.

paales 13y ago
I assume that is because when you add an outline, the whole thing becomes the texture and the texture filtering is better than no anti aliasing it is still worse than properly rendered polygons.

blahbl4hblahtoo 13y ago

It would be awesome if one of these awesome CSS posts would actually test for the features instead of just saying..."IE? SAD TROMBONE FOR YOU!!!!"

aram 13y ago
Such experiments push the limits - I believe their point is not to make something that works everywhere, at least from the start.
stefan_kendall 13y ago
IE is a cancer. If you can in any way justify cutting off support for IE, you do it. It's a real time and money sink.
- underwater 13y ago
  That's a ridiculous statement. Have you even used recent versions of IE?
  - pbhjpbhj 13y ago
    I've been away from professional web-dev for a while (kids!). My only real experience of IE10 is that I just handled an "IE10 on Win8 only" bug on a friends site so tested with IE10 and IE11 in a virtualised environment. I only have XP installs left of MS Windows. Of course now that IE is supposed to work they won't let you use the conditional comment targeting method so I must - it seems - break it for IE11 by instructing all IE above 9 to fallback to IE9 compatibility mode. Nothing else seems to fail with it and applying the hack (IE9 compat mode in a meta-tag) is problematic too. Has IE changed that much? That said the site is an application generated mess, it's painful. So maybe IE have really come around.
    - grrowl 13y ago
      Modern IE is nice to use and has reasonable support. It will cost you as much (in dev time) to support as any other browser (or specifically, rendering engine), and its market share is comparable to Firefox. The problem is old IE. fuck old IE and every bit of its ridiculous, antiquated and outdated self.

vanderZwan 13y ago

Funny coincidence, I just started a casual discussion about origami and programming with some friends yesterday: So, my friend Torsten (who is really into papercraft and origami) explained to me the purity hierarchy within the papercraft community. At the bottom is having to cut the paper and use glue in your creations. One level above that is if the form requires only cutting or tearing. Getting more and more pure is the form known as kirigami, which involves cuts but is made from a single sheet of paper as the base. At the top is origami - no glue, no cuts, only folds (although I'm not sure if there is such a thing as higher order origami), and ideally only one sheet of paper. The comparison with functional programming ("no glue and cuts" and "no state") is so obvious I'm surprised I've never seen it in the wild - maybe because programming has more in common with algebra, whereas origami is geometric? Although mostly unrelated to this library, we can conclude that some of the effects in OriDomi should be in a section called KiruDomi. ;) Actually, from a usability perspective, I see a problem with using those effects, like "twist" and "fracture": once scrambled, it is not obvious from the shape in which way to drag to unfold again, unlike with an effect like "stairs"

danieldk 13y ago
The comparison with functional programming ("no glue and cuts" and "no state") is so obvious I'm surprised I've never seen it in the wild Actually, it does occur in the wild ;): http://www.cs.ox.ac.uk/jeremy.gibbons/publications/origami.pdf http://www.cs.ox.ac.uk/jeremy.gibbons/publications/origami.p...
- Adrock 13y ago
  There's also a rich field of algebraic analysis of origami: http://www.google.com/search?q=algebraic%20origami http://www.google.com/search?q=algebraic%20origami
  - vanderZwan 13y ago
    It's always nice to be informed you're wrong in a constructive way. Thank you too!
- 13y ago

kaivi 13y ago

Ugh, did I break it?: http://cl.ly/image/033W3F0b3s1U http://cl.ly/image/033W3F0b3s1U It's twist(6). Also, here is accordion(30) on document.body: http://cl.ly/image/0u0V3Y19342e/o http://cl.ly/image/0u0V3Y19342e/o And that's hover in the middle logo section: http://cl.ly/image/3Y172j1T0P3N/o http://cl.ly/image/3Y172j1T0P3N/o That is a nice set of good-looking effects, I hope the project will live on.

dmotz 13y ago
Author here. Twist and fracture are among the more unconventional, dramatic methods that I left in for those looking for cut-up effects over folding. As you found out, you can even target the body element and the OriDomi will stretch to the window dimensions. That middle portion in the last screenshot looks like a stuck hover state probably due to the fact that you have nested OriDomi instances on the page. Thanks for trying it out.

erikstarck 13y ago

If you're in to origami, check out the Can you fold it-challenge from Tetra Pak: http://canyoufoldit.com/ http://canyoufoldit.com/ You get €5,000 for passing the qualification phase. Are you up to the challenge? Edit: clarification, 10 teams will be selected from the qualification phase for the design phase and awarded €5,000. That's at least how I understand it :) (I am not involved in the competition in any way.)

pmr_ 13y ago
You get 5,000 if you complete the design phase, not the qualification phase. For that you need to complete the qualification phase AND be selected to go there.
raghunathj 13y ago
idiot900 13y ago
Seems like a tiny amount of money for something that would be worth quite a lot to them...

dimillian 13y ago

I was in the train, I tested it on Safari iOS 7, works great! I love it.

laveur 13y ago

Doesn't work in the latest version of Safari on my Mac. (10.9 Mavericks, latest updates) Update: Correction, didn't work the first time I went to the link but the second time was fine.

sjtgraham 13y ago
That is weird. I'm on 10.9 too and exactly the same happened to me.
aram 13y ago
Strange - everything is working the same way as in Chrome for me.

raghunathj 13y ago

Nice

deleted 13y ago

[deleted]

jashkenas 13y ago

Lovely work on the annotated source code ... it explains a lot of the tricks and techniques, and makes the otherwise perhaps abstruse math accessible: http://oridomi.com/docs/oridomi.html http://oridomi.com/docs/oridomi.html

dmotz 13y ago
I owe plenty of gratitude to you for both CoffeeScript and Docco. Both made building this a pleasure. For those interested in going beyond what the docs cover, the annotated source page is a great place to understand the inner workings.
- elwell 13y ago
  Just curious, why did you check for the existence of "console" on this line: console?.warn 'OriDomi: First argument must be a DOM element'
  - danenania 13y ago
    window.console is undefined in some versions of IE if the developer tools aren't active.
    - dmotz 13y ago
      That's right.

woah 13y ago

Looks awesome, but it seems like all the examples on the page incorporate a weird "wiggling" effect in addition to the folding. Is it possible to turn this off?

dmotz 13y ago
Yes. That wiggling is the "ripple" mode I added recently which adds a cascading delay. It's disabled by default when creating new OriDomi instances, but I enabled it for the demos on this page. You can also programmatically turn it on and off: http://oridomi.com/#ripple http://oridomi.com/#ripple

dmotz 13y ago

Author of OriDomi here. Really excited to see this at the top of HN. I recently pushed out version 1.0 with some new features that make OriDomi easier to use. It now has an internal queueing system so you can chain up effect sequences instead of dealing with callback handlers. [1] What looks like a chain of synchronous calls will now be deferred and sequenced automatically, e.g.: folded.curl(50).collapse().setSpeed(2000).stairs(-29).foldUp().unfold(); Secondly, OriDomi elements are now fully responsive, meaning they adapt to changing dimensions caused by media queries, window resizing, etc. You can see this behavior with the demos by resizing your browser, or on the current iteration of my personal site. [2] Finally, there are two new methods that make it easy to do custom folding behavior and content manipulation, .map() [3] and .modifyContent() [4]. The former lets you pass your own function to define folding based on input angle and panel index. It's still relatively lightweight with zero dependencies and 7.6KB gzipped and minified. More than anything, a testament to what you can do with the modern browser API. Looking forward to seeing what else people do with it. Check out the annotated source [5] for a look at how it works. [1] http://oridomi.com/#queueing http://oridomi.com/#queueing [2] http://oxism.com http://oxism.com [3] http://oridomi.com/#custom http://oridomi.com/#custom [4] http://oridomi.com/#content-manipulation http://oridomi.com/#content-manipulation [5] http://oridomi.com/docs/oridomi.html http://oridomi.com/docs/oridomi.html

benihana 13y ago
This is really awesome, congrats!

taigeair 13y ago

Nice

EvanL 13y ago

Haha, very cool, great job! Plenty of creative application opportunities!

yuvals 13y ago

Very nice!