I want to create a page turn animation for a tablet magazine so when the user swipes to the next/previous article it appears as though they are turning the page over. I’ve created a similar effect in InDesign using Flash. If anyone knows how to do it with HTML that’d be great. Much appreciated. Thanks.
I would assume that it is easier to do this kind of animation with an external javascript. I recommend http://www.turnjs.com that has a great manual on how to set it up. You need to download jquery and the javascript from turnjs, then import it to your hype resourcefolder and double check that it is added to the html head in your document.
Let me know if you have problems.
I asked the same question before and Daniel told me to export every single scenes seperately and edit turnjs html.
I am not a java expert so i could not move on.
Plz update if you make it possible. Thanx.
Just seeing if we have turned the page on this and it is now possible?
We are in the process of making our storybook galdosgift.com web ready and a page curl animation would be a wonderful showcase addition.
As we have movie files, interactivity and animations on every double page spread, exporting each scene separately seems a little daunting.
Is this still the only way to achieve this effect?
Hype itself has a better mechanism for the basic feel for swiping between pages via the Scene Inspector's On Swipe Left/Right/Up/Down handler if you set the Transition to Page Turn.
Visually though, this looks like a push and does not do curling effects, nor supports a two page style.
I'm not sure if turnjs is still the most modern way to do it, but you'll need to use other code to achieve the visual page look.
Thanks, Jonathan.
It's possible we might try creating the page curl effect animation within each scene using a snapshot of the next scene - we would then quickly make it crossfade to this next scene. It may be that we make the snapshot element a bright glowing version of the next scene to hide the transition.
The whole transition would happen quickly, just to get the effect of a page curl/turn. We would have to accept that the page of the animation would not be controlled by the user (but that might ok). The main issue I can see with this method is the extra processing and load of the snapshot and it's animation.
1 Like