

Fold the DOM like paper - aram
http://oridomi.com/

======
dmotz
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
This is really awesome, congrats!

------
jashkenas
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
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
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
window.console is undefined in some versions of IE if the developer tools
aren't active.

~~~
dmotz
That's right.

------
vanderZwan
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
_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.p...](http://www.cs.ox.ac.uk/jeremy.gibbons/publications/origami.pdf)

~~~
Adrock
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
It's always nice to be informed you're wrong in a constructive way. Thank you
too!

------
erikstarck
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_
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.

------
supermatt
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
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.

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

------
kaivi
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
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.

------
laveur
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
That is weird. I'm on 10.9 too and exactly the same happened to me.

------
com2kid
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!)

~~~
ux-app
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
> 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.

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

------
woah
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
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)

------
yuvals
Very nice!

------
taigeair
Nice

------
raghunathj
Nice

------
blahbl4hblahtoo
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!!!!"

~~~
dmotz
Author here. OriDomi actually does granular feature tests and has no awareness
of what particular browser you're using. While the recent versions of IE do
support CSS 3D transforms to a degree, they omit support for the "preserve-3d"
transform style which allows the transformations of parent elements to affect
their children. Without it, the visual tricks OriDomi does don't work, so the
library will disable itself if it finds the client lacks support. Whenever IE
begins to support "preserve-3d", OriDomi should start working without
modification.

~~~
blahbl4hblahtoo
Wow. Thanks for responding. You rock.

