How to make a page turn transition to next scene only available once certain conditions are met?

Hey everyone, apologies if this has already been covered. I searched but could only find deactivation of the page turn transition on separate scenes. I want to create a basic game where certain conditions are met on one scene allowing the user to proceed to the next scene via swiping with page turn.

Imagine having to put in the correct code before being allowed to progress to the next level. Initially the user can’t go anywhere, the page turn is deactivated, but once the correct code is used the page turn becomes active and the user can then swipe left to progress.

It could also work more simply where the user has to get to the end of the timeline before the page turn becomes available (or alternatively when a certain element enters viewport).

Nothing concrete there sorry, but I’m just assessing my options and seeing what is doable while I decide on how to design the level progression. Any ideas or input much appreciated!

Thank you!

Without a concrete idea, it’s not really possible for maybe anyone to help you. However, all the stuff that you mentioned, is possible some or the other way using custom JavaScript. If you’re looking for some in-built way in Hype, then, sorry to disappoint you, it’s not there, at least not directly. However, if you can play around heavily with timelines, and viewport actions, then, maybe, you can get there.

For example, if you want the user to transition to next scene when he/she reaches the end of the timeline, you might have to add click actions (or something similar) to guide user to that point in timeline for the action to get triggered.

With JavaScript, a lot! I might as well call it as endless possiblities.

If you’re new to JavaScript (or even Hype for this matter), I’d suggest you, give us a concrete idea of how you want it to be, then maybe, one of the members here can give you an example document of how it would work.

A Symbol can have swipeactions …Show it when needed …


Just noticed that "page turn" transitions are missing for both Symbols and the API.

@jonathan - is there a reason why the “page turn” is missing in these locations?

Symbol Swipe
Symbol Swipe Options

API
Api

Yep, that’s the transition I was after @JimScott and you can’t use it on a symbol unfortunately @h_classen. I found this conversation about deactivating Page Turn on the last scene of a group of scenes but I’m not savvy enough to adapt that code for my needs I’m afraid: Dynamically Prevent Page Turn to Next Page

I’ll put together my perfect scenario and create a basic Hype doc in case anyone can help me further and needs more clarification…

Thanks so far!

You can not use the page turn on symbols, but symbols can detect a swipe. that’s what i wrote above. so you’ve got the possibility to show a symbol when a scenechange on swipe should be possible. Using PushLeftToRight or -left should do fine …

1 Like

Ok, so I’ve built a simple doc to illustrate my issue. Hopefully this can clarify what I want to happen…

  1. Page loads with On Swipe Left action set to Jump To Scene > ‘Page Turn’ - BUT it should be deactivated somehow
  2. User clicks button to run timeline
  3. Timeline completes and ‘Page Turn’ is then activated so the user can continue onto the next scene by swiping left (I specifically want the transition to be ‘Page Turn’, not Push or anything else.)

In building my sample doc, I also came across another issue which could maybe start another thread but just to highlight - when swiping back to scene 1 from scene 2 with Page Turn, scene 1 timeline has reset so you see the first frame and I couldn’t figure out a way to keep it on the last frame (I tried Prepare For display and also recording current time javascript which you will see in the doc but it doesn’t the give desired results unfortunately)

Right, thanks for your patience/help and apologies for my ramblings!

Page_Turn_Activate.hype.zip (31.2 KB)

See my above provided link to jonathans post …

Aha thanks @h_classen! I was composing my reply while you posted yours so hadn’t checked it before I posted. I’ll give that a whirl and see if it can work :+1:t2:

Ok, it’s good! Only thing is that I have to apply a drag function to any elements in front of the blank element (such as my button) as well so that users can’t Page Turn with those either but can still access them. Not too painful though, thanks for the heads up!

I just need to solve that other swipeback timeline issue now… :thinking: