This may be a feature request, but perhaps the problem has already been solved. It would be great to have the ability to add easing to scene transitions. The stock transitions are very linear, and do not at all look good. In my case, each of my screens are fluid and fill the viewport, so positioning them relatively on a timeline for swipe navigation gets ugly and over complicated rather quickly. The obvious benefit to using scenes is modularity, and you get the visible transition of seeing both scenes during transition for free – however the linear nature of those transitions makes it feel very unpolished. If anyone can suggest a work-around, or if its possible to override the scene transitions using another animation library that would be great.
Update
In addition to scene easing, is it possible to continue a scenes timeline while the transition happens? Currently the transition ends, and then the timeline will begin – being able to offset this would mean you could have elements staggering in really smoothly instead of a mechanical locking feel on the transition.
The first example is using scenes, with the exact same animations as the second. The scene feature makes this makes it very easy to loop and reconfigure content in any number of ways, and scale to lots of scenes. However, you can see how the animation feels super flat due to no easing on the scene transition, and the timeline not playing until that transition is complete.
The second example is the same animations again, only as symbols on a timeline. This is obviously way smoother since they move with easing and can play their timelines as they’re transitioning. The downside is this approach is not nearly as organized and is difficult to scale beyond a handful of symbols. Making these fill the viewport, loop, and move in and out with any level of complexity would be considerably more cumbersome, and require managing your entire project on a single scene with a lot of complexity in your timelines.
Thanks for these examples! I definitely think it would be neat to have animations running while the scenes are transitioning (but this is a large effort, so don’t hold your breath!).
So 2 years later a hare brain is asking for this too I asked for this recently as a feature request and Daniel point me to this thread. Is there a javascript alternative? Can I call a custom ease on say a transition is there an api call for the transition?
You can easily fake this:
Create a timeline and animate the transition just the way you want it to look (using a faux version of the next scene). Then trigger that timeline on scene unload. A timeline key at the end of said timeline will trigger an instant jump to the real subsequent scene.
In other words: What’s perceived as being the transition is still the first scene. The real transition happens as a “hard cut” thereafter.
@petester@backpalm This technique is discussed and demo'd in this thread (and others in the past)...
Here are a few examples from that thread and others showing different possibilities ~ same principle:
cube_transition_JHSv3.hype.zip (164.9 KB) Custom Scene transition - "cube rotation" effect
Original thread here... this demo is my follow through (a few posts down from the top) on the OP's request.
SceneTrans_JHSv1.hype.zip (22.2 KB) This demo shows animating elements while a Scene Transition occurs.
Original thread for this demo is the one sited at the very top, specifically this post.
Slat Transition_JHSv2.hype.zip (550.6 KB) The most complex demo in this group showing animation during a "slat" ("venetian blind") custom transition.
Original thread~post here.
Brilliant, @JimScott. Thanks for sharing more detail on this. I wasn’t aware of previous threads but am familiar with this technique from video production; It’s used to solve problems with seemingly impossible footage to loop. @petester should be all set!
All of these are clever ideas, though that means I would have to have a planned out idea from the get go to get around this instead of going though the choices like in a preset environment choosing what could possibly work? Sometimes the ideas that we have in our minds are not always the best if presets are available that would actually change the outcome of the project.
The transition themselves don’t have any kind of easing its obvious. Wouldn’t it be great if had an option? I’m talking about this
It definitely would be great to have "scene transition easing" built into Hype - indeed > agreed!
My post (and @backpalm) above was showing a "work around" until (if) we get such a feature... while also allowing the creation your own custom Scene transitions and animations during the transition.
The following screen shot is based on the "SceneTrans_JHSv1.hype" example in my last post. Using Timing functions during the Scene transition with the "work around" concept...
As for needing to think ahead - all You are really doing is taking the initial set-up for the next scene (e.g. "Scene 2") and placing it (copy-paste) in the first scene (i.e. group "Scene 2 pseudo").
And note - a simple screen shot of Scene 2 - placed in Scene 1 (group "Scene 2 pseudo") - would do the job... that's very straightforward. The animating during a transition is optional capability.
Yes, all is a kludgy work around - but it does expand your creative options at this point in time...
Here is a simple template to create your own transitions. The are based on the DOM and you can animate using setElementProperty. You might also need to swap z-Index for transitions. In this example of fading in with an ease it doesn’t require z-Index manipulation. This example also doesn’t pause the destination scene while transitioning but that is no problem if needed.
If you want to get more fancy with pixelbase transition effects you could also just snapshot the currentScene in the browser and use the pixel data for some nice effects (htm2canvas might be a good starting point for that).
Let’s say if I want to apply Push Top to Bottom in 2 sec with custom ease like easeinout quint going into scene B?
show next scene instanthypeDocument.showSceneNamed(targetSceneName, hypeDocument.kSceneTransitionpushtopbottom);
I see, what would be an equivalent or something that resembles this effect with the build your own transition?
It be nice if had a custom transition made for all of the possible scenarios that hype offers with the easing functions via script that are found in the easing tool tip
wish I could, I’m not a javascript expert like you What you did was amazing with the other example I just wish I was on your level. Where it says opacity what else can I have in there other than opacity?
/* do your custom transition in this case we are fading in the new scene */
hypeDocument.setElementProperty(targetSceneElm, 'opacity', 0);
hypeDocument.setElementProperty(targetSceneElm, 'opacity', 1, duration, ease);
Well, expert might be a bit of an overstatement. I am self taught so you can learn it too, given you are interested enough in making things happen. And I can't do all the work. Giving hints and templates is something I can do and the rest is based on my current interests.
I guess your posting this as you think one could do something with these. So no, those are only human readable name mappings to internal runtime symbols. Meaning that they let the not exposed runtime transition engine know what type of transition you want.
I asked for this recently as a feature request and Daniel point me to this thread. Is there a javascript alternative? Can I call a custom ease on say a transition is there an api call for the transition?
What you did was amazing with the other example I just wish I was on your level. Where it says opacity what else can I have in there other than opacity?