snarfdk
(Frans Wej Petersen)
November 25, 2019, 1:01pm
1
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?
h_classen
(Hans-Gerd Claßen)
November 25, 2019, 1:30pm
2
the easiest and without coding:
take a screenshot of the next scene and animate this screenshot …
good old handmade
1 Like
snarfdk
(Frans Wej Petersen)
November 25, 2019, 1:46pm
3
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
MaxZieb
(Loves Hype)
November 25, 2019, 2:20pm
4
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
Hype Custom Transition Template
[image]
This template is hopefully the start of many nice custom transitions. For now I am just putting it out as an easy to open and work with Hype-File for download. This file is ment as a starting point (template) for your transition …
Features:
Offers both Containers (From/To, A/B) as end points
Has a callback when transition is done
Disables function calls and inits while transitioning
Todo:
Example how to use in Header HTML instead of init-Function (…
jonathan
(Jonathan Deutsch)
November 25, 2019, 9:59pm
5
There’s no built-in ways… you may be able to fake javascript mousedown, mousemove, and mouseup events. (I haven’t tried this though!)
MaxZieb
(Loves Hype)
November 26, 2019, 10:59am
6
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