Better Hype Scene Transition Controls


(Michael) #1

I would like make a feature request for the ability to add easing to the built in Scene transitions. Additionally, the option to start the timeline of the incoming scene as soon as that transition begins. This would significantly increase the usefulness of the existing Scene features. Below is an example of how this might be implemented.

Why not use the timeline?
For finer animation controls it’s often advised to just use the timeline. There are a number of issues with this approach. Creating compositions with more than a few symbols requires a complicated approach to managing multiple relative timelines. Additionally in many cases it requires building out dynamic symbol arrangements manually. This does not scale well, and makes any major changes to the experience tedious and challenging to implement. Furthermore, Scenes exist to solve this problem already, and do it extremely well. Extending the scene transition animation capabilities results in a cleaner, more organized approach to making larger maintainable experiences without sacrificing animation quality.

Whats wrong with transitions now?
Aside from there being only a limited set of pre-defined transitions, they have very little customizability, and are timeline-locking. No amount of motion design can compensate for Scenes pausing, linearly moving across the screen, and then continuing the timeline of the new Scene. ‘Pre warming’, or starting elements moving as they are in transition is a common motion design technique to achieve fluid movements between stages.

I hope you’ll take this feature seriously under consideration. Hype is the best tool available for rapidly designing and creating animated interactive content, and I believe this feature would enable users to create more polished, and bigger experiences with all the benefits of Scenes. I’d be happy to create examples and demos to illustrate this further, just let me know.

Thanks,

Michael


(Joshua Newton) #2

I second this! I’m new to this community but actually came here looking for a solve for this particular dilemma. I’m always left settling for a less smooth transition that I’d like between scenes.


(Jeremih) #3

I hadn’t thought of this, but now that I see it, it does sound useful! :raised_hands:


#4

Hi Michael!

I think it is a good idea… but I’m wondering how well it work as a broad brush feature given the constraints of the Internet - in particular the part about the timelines running (smoothly!) during the transition. I already have issues getting individual scenes to load quickly with designs that involve video, many large images, or lots of small-medium animated images.

The approach I have taken is to do the transition from Scene A to Scene B entirely in Scene A then do an instant transition to Scene B (could run it the other way, A jumps to B where the transition is done). The important thing of course is to find the right spot to make the jump where it won’t be noticed - and so I design things accordingly.

Web design is a series of compromises. I found this one serviceable enough for my needs - not to say it would be a solution for every situation.

Original Transition below by @josefrichter here - I’ve added minor adaptions.


Videos Stopped Loading
(𝕄𝕚𝕔𝕙𝕒𝕖𝕝 𝔾𝕒𝕣𝕠𝕗𝕒𝕝𝕠) #5

Good debate.
Nice transitions.


(Michael) #6

Hi Jim,

Thanks for you thoughts. I think your example is a great reason why this feature is necessary. If you have 5 scenes that can navigate to any other of the 5 scenes, that means having 5 animations built into each of the scenes where you’re faking a transition between them. It’s not uncommon for my projects to have 10, 20, or more scenes. Furthermore, if design, pacing, and interactions are significantly revised, that means manually updating all 25 of the fake transitions. I think it would better to preserve modularity by creating more robust transition features than rely on cumbersome workarounds for the entire project architecture.

Performance is obviously a concern, there are many, many, examples of highly performant animated experiences with fluid seamless scene transitions. I know Hype currently doesn’t have the performance I’m used to with Greensock or canvas (employed use in all those examples), but I believe the app shouldn’t prevent us from doing things that could lead to poor performance if misused. That should be up to the user and their skill level. To your point, in my suggested mockup I added it as checkbox since not all scenes need easing, or would need to have continuous play.


(Hans-Gerd Claßen) #7

good request :slight_smile: i guess it’s already on the list …


(Darius Pilapil) #9

+1 :+1:


(Jonathan Deutsch) #10

Good idea - thanks for the request! The scene transitions use Hype’s animation system under the hood, so getting them to use different timing functions would not be difficult implementation-wise.