Using the unfold() method

[owengot]

I'm using Oridomi to achieve a paper folding animation. Specifically, I would like to have a div unfold on page load (picture a book opening).

However I am having difficulty getting the unfold() method to work, despite being a method which can be called on.

You can see from this example, that I can only get the div to fold back, rather than unfold from a folded state (in effect, I would like the animation to be reversed).

My javascript function -

(function(){ function init(){

var $domi = $('.unfold').oriDomi({ vPanels: 2, hPanels: 1, speed: 500, shading: false });

setTimeout(function(){
$domi.oriDomi('reveal', -90);
}, 600);}

document.addEventListener('DOMContentLoaded', init, false);

})();

And CSS -

.unfold {
    font-family: "Abril Fatface", "Hoefler Text", Constantia, Palatino, Georgia, serif;
    font-size: 4.5rem;
    width: 25rem;
    height: 10rem;
    text-align: center;
    line-height: 1;
    color: #ff676d;
    background-color: #6ac1ff;
    padding: 2.5rem 0;
}

The documentation on http://oridomi.com is not very clear on how this can be implemented. Any help would be very much appreciated. Thanks

[dmotz]

Right now, in order to trigger unfold() the oriDomi element has to have been folded up via foldUp(). These two methods are different from the others in that they initiate a staggered sequence of animations where each panel in the composition folds back individually.

I know this isn't ideal and I'm working on plenty of improvements for the forthcoming version. Specifically, the next version allows you to manipulate folding speed on the fly, so for your case, you could call foldUp() at a speed of 0 (instant), then set the speed to a different value and call unFold. Additionally, the version I'm working on allows automatic queuing via chaining (no need for nested callback trees). It will also deal with the fact that 90 degree folds aren't completely hidden.

In the meantime, you could have your oriDomi composition hidden with CSS initially. Then you could call foldUp() or collapse() etc. (while it's hidden) and set a callback or setTimeout timer to later unhide the element and call unFold() or accordion(0) to reveal the element to its normal state.

Let me know if that makes sense.