Scene transition easing

So 2 years later a hare brain is asking for this too :grinning: 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?

1 Like

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.

1 Like

@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: (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. (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 (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!

1 Like

Thanks guys,

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



Hi Pete!

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...

1 Like

Yes, Yes I saw this. Its Clever :wink:

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.

Download example:

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).

1 Like

Cool, Thanks Max!

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);

No, this template is not for built-in transitions. It’s a basis for… build your own transition. Hype doesn’t expose it’s transition engine.

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 :wink:

You got two container push them around with setElementProperty. For the others well then go right ahead and create them. :stuck_out_tongue_winking_eye:

wish I could, I’m not a javascript expert like you :slight_smile: 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);

You can find all the values in the Hype Help in the IDE and online Tumult Hype Documentation

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.

1 Like

API Constants#

The only constants exposed are those for scene transitions:


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.

Yes I am, I agree its not something I can ultimately use to expand with the built in transitions.

Yep, your suggestion/feature request further up seams pretty good to solve this for built in easing. For new transitions an API would be great but in the meantime this technic might be helpful …

Download example:

I’ll certainly give Scene Magic a revisit based on this.

1 Like

great idea!

1 Like

I have update the template and pushed it into the Extensions category with it's own thread. To collect transitions there … submissions welcome read more here …