OriDomi1.0

The web is flat, but now you can fold it up.

open source JavaScript library by Dan Motzenbecker
Sorry, looks like your browser is too old to support OriDomi, so all you’ll see below are some flat images and text. To get the most out of the web, consider upgrading to a browser that supports modern standards. Try

Use your mouse or touch to manipulate these, or press the fold button to see a random effect:

Features

Usage

Initialization

Create an OriDomi instance by passing your target element to the constructor:




var folded = new OriDomi(document.getElementsByClassName('paper')[0]);



…or pass a selector string and OriDomi will use the first element that matches:




var folded = new OriDomi('.paper');



If you prefer using jQuery, try this:




var $folded = $('.paper').oriDomi({/* options object */});

// when using jQuery, iterate OriDomi methods over multiple elements like this:

$folded.oriDomi('accordion', 20);

// to access the OriDomi instance at the top of the jQuery selection directly:

var folded = $folded.oriDomi(true);



Options

When creating a new OriDomi composition, you can pass a map of options as the second argument:




var folded = new OriDomi('.paper', {

  speed:           1200,  // folding duration in ms

  ripple:          2,     // backwards ripple effect when animating

  shadingIntesity: .5,    // lessen the shading effect

  perspective:     800,   // smaller values exaggerate 3D distortion

  maxAngle:        40,    // keep the user's folds within a range of -40 to 40 degrees

  shading:         'soft' // change the shading type

});



A full list of options and their descriptions is available here in the source .

Effects

Most effect methods only require a folding angle as their first argument.




folded.accordion(30);



You can specify the anchor to fold from (left, right, top, or bottom) as the second argument:




folded.curl(-50, 'top');



foldUp() is a unique effect method that doesn’t take an angle argument because it causes the OriDomi composition to roll up completely in a staggered fashion.




// completely hides the element:

folded.foldUp();



Its counterpart unfold() will be automatically called before another effect method can be applied.

You can browse through all the effect methods

Callbacks

Maybe you’d like to do something when an animation’s complete? Pass a callback function:




folded.curl(-50, 'top', function(event, instance) {

  // arguments are the transition event and the OriDomi instance

  alert('It seems my folding days are through.');

});



Keep in mind that arguments are flexible. The anchor you used last is assumed when leaving out an anchor argument. OriDomi can usually figure out what you meant:




folded.ramp(14, function() {

  alert('A callback as a second argument...');

});



Queueing

Callbacks are useful, but can become cumbersome when creating a sequence of animations:




// a pyramid you can choose to avoid:

folded.curl(50, function() {

  folded.collapse(function() {

    folded.setSpeed(2000);

    folded.stairs(-29, function() {

      folded.foldUp(function() {

        folded.unfold();

      });

    });

  });

});



OriDomi features a built-in queueing system that can be used in harmony with its fluent, chainable interface to easily create sequences:




// same result as the previous example:

folded.curl(50).collapse().setSpeed(2000).stairs(-29).foldUp().unfold();



In other words, you can call asynchronous methods synchronously and the operations will intelligently queue themselves. There’s even no need to chain or make the calls within the same event loop.

You can programmatically empty the queue by calling emptyQueue(). Touch and mouse events also immediately clear queued actions.

You can also call wait() with a value of milliseconds to queue up a delay between actions:




folded.reveal(20).wait(3000).fracture(-30);



Touch

The ability to manipulate a composition with the mouse or by touch is enabled by default. To create a non-interactive OriDomi composition, pass this in the initialization options:




var handsOff = new OriDomi('.sandpaper', { touchEnabled: false });



You can also change it on the fly:




handsOff.enableTouch();



handsOff.disableTouch();



If you’re interested in tracking the user’s actions without dealing with event handlers yourself, you can specify callback functions in the initialization options:




var slider = new Oridomi('.slider', {

  touchStartCallback: function(startCoordinate, event) {},

  touchMoveCallback:  function(movementAngle, event) {},

  touchEndCallback:   function(endCoordinate, event) {}

});



Content manipulation

OriDomi does plenty of DOM manipulation behind the scenes to create what you see. If you want to change the content or the styling of the element after it’s been modified, OriDomi provides a setter method to help you out:




folded.modifyContent(function(el) {

  el.querySelector('h1').innerHTML = 'ch-ch-ch-ch-changes... turn and face the strange'

  el.style.backgroundColor = '#000';

});



By passing a function to modifyContent(), you can easily apply your manipulations on every panel in the composition, with the first argument referring to an individual panel element. modifyContent() also passes to the supplied function the anchor (top, left, right, or bottom) and the panel’s index within that anchor (as the second and third arguments respectively) should you want to make precise and unique manipulations.

If you’re feeling lazy, you can pass a map of selectors and manipulation instructions instead:




folded.modifyContent({

  h1: {

    content: 'Hello there',

    style: {

      color: 'green',

      textDecoration: 'underline'

    }

  },

  'div > p': 'just some text.',

  img: {

    style: {

      width: '99%'

    }

  }

});



Ripple

By default, every crease in an OriDomi composition will fold simultaneously. For a staggered effect, you can enable “ripple” mode by either passing ripple: true in the initial options or by calling setRipple():




// staggered, rippling animations:

folded.setRipple().accordion(28).stairs(-40);



// disable ripple:

folded.setRipple(0);



// ripple forwards (default):

folded.setRipple(1);



// ripple backwards:

folded.setRipple(2);



The demos at the top of this page have it enabled.

Responsive

OriDomi compositions adapt to dynamic dimensions just as well as normal elements. This means that if your OriDomi composition's size is changed by percentage-based sizing, media queries, CSS transitions, scripting, et cetera, the panels will resize themselves relative to their parent container.

If you resize this site to a small width, you’ll see the demos above change width accordingly.

Custom behavior

And now you’ve decided the built-in effects just aren’t good enough for you?

Luckily, you can precisely control the folding behavior of every panel by passing a custom function to the map() method:




folded.map(function(angle, index, length){ return angle * index * Math.random() })(20);



In the contrived example above, an anonymous function is passed to map() that simply multiplies the supplied angle by a given panel’s index and a random float. The function is called for every panel in the series and may return a different value for each panel based on the same input value.

Since the function you supply is called with the panel index and the set length, you can create some complex behavior based on evens/odds, angle ranges, or special behavior based on first/last position. For example, if you wanted to create a fold-in effect that keeps the first and last panels flat against the page surface, your function could return different values based on the index and length arguments supplied to it.

Minutiæ

OriDomi requires a modern browser with support for CSS3 transforms, particularly preserve-3d support. IE 10 and below lack this, but I’m sure you could’ve guessed that.

You can test for browser support by checking OriDomi.isSupported at runtime. Initializing an OriDomi instance on an unsupported browser will return nothing so it’s best to use a conditional around your code dealing with OriDomi.

You may notice that OriDomi looks significantly worse in Firefox compared to WebKit browsers. There is an open ticket for this aliasing issue on Bugzilla .

If you have an improvement for OriDomi, by all means

Coda

And remember, the DOM is your oyster.