Page Flip Animation

[Luke Galea]

Hi everyone,

Damn. Treesaver is awesome!

Has anyone considered doing a pageflip animation for treesaver? Something like: http://s.attrakt.se/cssflip/ or http://www.romancortes.com/blog/pure-css3-page-flip-effect/ ? (Although it ought to track the swipe gesture).

We are interested in contributing to treetop to add this feature, or funding it's development. Has anyone investigated this or begun work on it?

Luke Galea 

VP Research and Development, Avid Life Media

647-226-2345

lu...@almlabs.com 

[Scott]

Yes, in fact you can already override some treesaver animations with
your own.
https://github.com/Treesaver/treesaver/issues/193

On May 13, 10:53 am, Luke Galea <ldga...@gmail.com> wrote:
> Hi everyone,
>
> Damn. Treesaver is awesome!
>
> Has anyone considered doing a pageflip animation for treesaver? Something
> like:http://s.attrakt.se/cssflip/

> orhttp://www.romancortes.com/blog/pure-css3-page-flip-effect/? (Although

> it ought to track the swipe gesture).
>
> We are interested in contributing to treetop to add this feature, or funding
> it's development. Has anyone investigated this or begun work on it?
>

>    *Luke Galea *

>
> VP Research and Development, Avid Life Media
>
> 647-226-2345
>

> l...@almlabs.com

[Luke Galea]

Thanks Scott. I'll give that a try!!

[Luke Galea]

Thanks. That went a long way towards having a good page flip for treesaver.

One (minor?) issue is that I'd like the nextPage to be underneath the previous page before the transformation begins (not sliding in). (ie. it should look like a book).

I'm using the css below and it's causing lots of weird flickering as seen in the video here: http://screencast.com/t/ZQPF2j3UL  . Any guesses?

I suspect something in the JS is fighting me.

     .csstransforms3d .grid {

        -webkit-transform-origin: 0% 50% 50%;

        -webkit-transition: all 1s ease-out;

        -moz-transition: all 1s ease-out;

        -o-transition: all 1s ease-out;

        transition: all 1s ease-out; }

    

     .csstransforms3d .grid {

           -webkit-transform: none !important; }

       .csstransforms3d #previousPage {

        -webkit-transform: perspective(2000) rotateY(-90deg) !important;

        -moz-transform: perspective(2000) rotateY(-90deg) !important;

        -o-transform: perspective(2000) rotateY(-90deg) !important;

        transform: perspective(2000) rotateY(-90deg) !important; }

[Scott]

This is an experimental hack and not really implemented well. Feel
free to play with it but it is going to be buggy.

[Pic Ozone]

Could you post the source code of this sample ?
http://screencast.com/t/ZQPF2j3UL

Best regards,

Pic Ozone

[shirly]

I've seen page flip animation on this site http://tradersworld.com/flip/. I search in google with page flipping, and found this page flip software may help you.
You can also try free tools to get page flip animation like Codebox: http://www.codebox.es/pdf-to-flash-page-flip

[Karen Fritz]

Hi, Luke. The page flip software can help you out. I used this program for creating pageflip animation for my e magazine.
See my flip magazine sample with video on page 4: https://dl.dropboxusercontent.com/u/82238631/magazine/index.html


在 2011年5月13日星期五UTC+8下午10时53分52秒，Luke Galea写道：