I need help about...Page turning animation sample

(eric) #1

Hi! I need help…about page turn animation
I know about ‘turns.com’ and read that.
but i don’t understand cods…
so, have any samples.

if you have any samples on hype file than show me please.

(Mark Hunte) #2


You really need to supply much more info than you have. i.e the real site that has the code you refer to, What you want the pages to do and what content you will be using. I.e Images real text…

In the mean time,

Here is an example I just knocked together.

The way the original example I looked at had a main Div.
In the main Div. It had a stack of other Divs. Each of these had a background url to an image.

Each of the stacked Divs with the images became a Page.

So in this Hype Example.
I have Stacked some groups on top of each other.
Each Group holds it’s own content elements.
Those Groups are the pages.

I then Grouped all of the pages/groups in a parent Group.

The parent group that holds the page groups has an id that must be matched in the JS code.

I chose to use Grouped elements as Pages. But you can just use individual elements.

The JS library I used was from the github page

Also the Webpage for more info

PageTurnV2.zip (389.0 KB)

Interactive magazine fails
(eric) #3

I checked your list. and see a sample files.!
thanks. Mr. MarkHunte.

really really thanks.

i’m too much spend time this problem…but now today
all my problem is solved thanks, and thanks agin

I have one more wonder thinks…
your sample was good but chrome browser dose not working.
what is something wrong or i do a mistake? if you have idea.
than advise me.

thanks. and Best regards

(Mark Hunte) #4

It turns out that the turn.min.js has a bug where Chrome was concerned, so I changed it to the turn.js file.

It all works now. I have updated the above post with the new version.


Thanks for the example. in PageTurnV2, id’like to add a test to know which page is shown and to do some animation.
By ex i tried this and add TEST START… in then “turn” javascript file, but it didn’t work :

when: {
turned: function(e, page) {
//console.log('Current view: ', $(this).turn(‘view’));

                                //TEST START
                                if ($(this).turn('view')=="Array [ 2, 3 ]")
                                    hypeDocument.startTimelineNamed('page2', hypeDocument.kDirectionForward);                                        }


any idea ?
Thanks a lot


the answer is in the anonymous function attached to “turned”

turned: function(e, page) {
    if (page == "2") { //page 2 and 3 are visible
        hypeDocument.startTimelineNamed('page2', hypeDocument.kDirectionForward);

I think your solution might work but your syntax is a little wrong. You are missing an opening bracket ( { )

if ($(this).turn('view')=="Array [ 2, 3 ]") { // <-- missing opening bracket
    hypeDocument.startTimelineNamed('page2', hypeDocument.kDirectionForward);

if not mine certainly does :slight_smile:


Thanks a lot !!!
Your solution is the best !



i’d like to add a magnifying glass button on the top of the page, and if a click on it, we can zoom on the page.
i have search on the forum, tried the working_zoom, but i think it doesn’t work on a hype page with text and animation.

Any idea ?

Thanks a lot.

(Lukas) #9

Is there a way of using scenes as flipbook (turn.js) “pages” instead of grouping assets? I’ve got an interactive presentation with lots of “clickable” elements and managing it on 1 scene is becoming a HUGE pain :slight_smile:

(Jonathan Deutsch) #10

The short answer is no, but I’ve seen a technique where users will have each logical scene within a symbol. The first scene does all the custom transitions, and then they will make dummy scenes that each have one copy of the symbol for easier editing.


Hello Lukas, I’m a newbie to Hype. I’d be really interested to learn how you got on with the interactive elements on “pages”?

(Bryann) #12

Is there a sample file to see how this is done within Hype? Thanks

(Jan Verheijen) #13

As a 70 years old pensionated art teacher I usually go ahead with what you all invented and fixed with our fantastic program. I’m very grateful for everything you all make and share! Thanks a lot.
This time I was looking for page curl and I found your solution. In InDesign you can only export a page curl document as .swf and I know that is useless when one is using an iPad.
I wonder if it’s possible to use page curling on a page upright and not two pages next to each other. Now and then I get magazines on my iPad and I really like this feature going from page to page.
After half a day of experimentating this was my first attempt:
Is this also possible with one page upright? I know my English is awfully but I hope you’ll understand.
Kind regards from the Netherlands