Add animation to page transition about epub.js HOT 11 CLOSED

@KevinBeckers I just figured it out! This will give you a slide animation on v0.2.

EPUBJS.Hooks.register('beforeChapterDisplay').pageAnimation = function (callback, renderer) {
    window.setTimeout(function () {
        var style = renderer.doc.createElement("style");
        style.innerHTML = "*{-webkit-transition: transform {t} ease;-moz-transition: tranform {t} ease;-o-transition: transform {t} ease;-ms-transition: transform {t} ease;transition: transform {t} ease;}";
        style.innerHTML = style.innerHTML.split("{t}").join("0.5s");
        renderer.doc.body.appendChild(style);
    }, 100)
    if (callback) {
        callback();
    }
};

from epub.js.

It would be nice if we could build this as a hook or plugin, that way people could decide whether they wanted this or not.

from epub.js.

Yes, I don't know how at this moment, but is the road to take. Anyway we first need to avoid the css column trick to get the two pages layout. I'm trying to get this at https://github.com/lpccoder/epub.js/blob/trying-two-pages/examples/two-pages.html but I have to include some updates to get it working properly. Anyway, any information about how and where the epub.js manages pagination will be sincerely apreciated.

from epub.js.

Having page flipping animations doesn't seem possible without two separate renditions that are synced and support for that still isn't good.

v0.3 switches to an continuous rendering strategy, which at least allows for animation of the pages sliding left and right.

from epub.js.

Is there any news on this subject?

from epub.js.

Also, at the moment, to support desktop and laptop devices, epub.js needs to be patched by adding the following code somewhere before you start using epub.js, but after you load the library. The only difference this makes is that epub.js will use css transforms on desktop devices as well as mobile devices to move the pages.

EPUBJS.Render.Iframe.prototype.setLeft = function(leftPos){
    this.docEl.style[this.transform] = 'translate('+ (-leftPos) + 'px, 0)';
}

from epub.js.

Hi,
Does v0.3 support page flip animation?

from epub.js.

Hi there. Nice transition effect, at least it allows the user a cue that the page has flipped. But how to also add the capability for bottom up (and top down) transitions? Oddly enough, some users prefer flicking their finger up/down to turn the pages.

from epub.js.

@lawrence-eka This is not possible in v0.2, as the pagination is achieved with columns the width of the screen. Naturally, columns are horizontal, so what you are asking is not possible. This may be possible in v0.3 though.

from epub.js.

I'm using v0.3 and it renders next page by shifting the visible region of parent div. Need separate divs for each page to achieve effect like https://codepen.io/tailofmoon/pen/JXmvea?page=1& . But will it be a big change in epubjs?

from epub.js.

@pulkitnandan did you get your answer? Because I am using v0.3 as well.

from epub.js.