Preview/tease "page turn" with javascript?

Is there a way to preview, or more specifically tease, a “page turn” scene transition?

Say I have two or more scenes and on mobile and I want to indicate that you can swipe to the next scene by having Hype briefly tease the “page turn” animation about 10-20% of the way, and back again (optimally with a bounce animation)

Is there any way, with code or otherwise, to achieve this in Hype?

the easiest and without coding:
take a screenshot of the next scene and animate this screenshot …

good old handmade :slight_smile:

1 Like

Yes funny you should say that. I just tried it out and it works pretty well. (pretty easy with the “capture current scene” tool)

But the thing is I am trying to make a template for another designer, so something that require less hand-work would be prefferede :slight_smile:

You can do it with code. But that requires a bit of JS knowledge. Take the custom transitions template to start… take a look at this

There’s no built-in ways… you may be able to fake javascript mousedown, mousemove, and mouseup events. (I haven’t tried this though!)

Here you go. It’s based on the mentioned transition template
sneakPeakAtNextSceneTemplate.hype.zip

The code portion I edited is minimal and contained in this section(top, left positions and durations):

Hint: I used the keyword this. Even though it shortens calls you got to know your scopes to use it well. You can also just replace it with hypeDocument