Hype Custom Transitions (and Template)

Hype Custom Transition Template

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 (see Methods under Extension thread)
  • Example how to use in a JS library wrapper

Download example:
customSceneTransitionTemplate.hype.zip

Versionhistory:
1.0 Initial release under MIT-license
1.1 Fixed a minor issue and tweaked the animation a bit
1.2 Added click prevention while transitioning to template

4 Likes

Hype SceneMagic 2.0

So after a long delay I finally came around to get Hype Scene(Transition)Magic into the shape I wanted it initially to be. I rewrote it base on the Hype Custom Transition Template (see above) and it is now pretty decent for quick prototyping and interface morphing. The included example works without any timeline! You certainly could combine this with timelines but I wanted to show the potential power from this transition technic on it’s own. You actually only have to assign a class starting with magic like magicSquare and then copy the element into another scene and change it’s dimensions, position or rotation. This transition supports nearly everything the regular hypeDocument.setElementProperty supports.


Downloads:

HypeSceneMagic.js
HypeSceneMagic.min.js

Versionhistory:

1.0 Initial Beta (see old thread)
2.0 Rewrite released under MIT-license
2.1 Added demo how to include in head and use with Hype CommandPipeline
2.2 Minor fixes and converted into self contained extension

Example:

These scenes …

… produce the following without animating timelines: see demo

Download example:

Version with init function
HypeSceneMagic2.hype.zip

Version with the ‘classic’ Hype extension in Head HTML, uses HypeCommandPipeline for fun
HypeSceneMagic2-HeadHTML.hype.zip

4 Likes

Thank you Max, this is Incredible!

Question,
What if I want to slide through instead of clicking and picking like a revolving slider if you will.
Like in this ad
https://s0.2mdn.net/ads/richmedia/studio/pv2/60082017/20170525153144865/index.html

1 Like

Very easy just group these images and move them in each scene to the appropriate position then set a keyframe in each scene that triggers the next scene by magic (currently the function call that is wrapped in a Hype Function). Call that group maybe magicSlider. Same for the underline magicUnderline. Just move it from scene to scene and give it the same magic name.

I will incorporate commandPipeline in the next release.

1 Like

↑ look at SceneMagic transition
Updated to version 2.1
Added demo how to include in head and use with Hype CommandPipeline

I am thinking about creating a version of sceneMagic that abandons (set/get)ElementProperty. The are very limited duo to the nature of them having to rely on a reverse lookup table that only exposes a tiny fraction of the elements settings available in CSS or in the IDE for that matter.

Maybe I’ll create a version using CSS Transitions (omitting IE 9<) in the process though. That transition could be potentially more snappy and support much more values (like 3D rotation and other transforms).

About performance check this (specially the slow motion comparison and render tree portion):

And about CSS Transitions this is a good starting point:
https://www.w3schools.com/css/css3_transitions.asp

1 Like

I did look into it today but reading out transform values is not trivial as they get combined into a multiplied matrix (info). So for now I’ll be sticking to the state I can read held in Hype. Still experimenting with a simple assignment of new values and CSS transform but it’s not as trivial as I though.

You may see a speedup this way, but I would caution reading too much into these articles from a while ago -- they often don't do proper benchmarking and web performance is highly dependent on what you are animating. Further there is no code to that video available - one special note is that top/left would back then always animate on integral bounds whereas translate would do sub-pixel interpolation, so depending on the animation it very simply could be that the video illustrates this limit.

I wrote an article around the same time:

Definitely do your own testing and benchmarking :slight_smile:.

Another aside is that learning the math behind transformation matrices has been amazingly helpful with recent Hype development... I wish I had known it all before v1.0 and it could have saved a lot of code!

1 Like

Very interesting read… it’s true! It’s a thing I read often that it should be faster … never tested the assumption, though. I am actually happy with the setElementProperty state of scene magic. It wasn’t predominantly about performance that triggered my comment … it’s more of a lack of attributes I can’t animated using the setElementProperty API that I started thinking about using CSS transitions. Hope that this will change or at least the mapping is somehow opened up to be influenced to add further properties on demand as nice 3D turns etc. require a third party or CSS transform.

2 Likes

Another quick example

HypeSceneMagic2-HeadHTML-Another-Example.hype.zip

2 Likes

↑ look at project
2.2 Minor fixes and converted into self contained extension

Here is another transition based on the template "Sneak Peak":

1 Like

This is currently in canary in Chrome. Pretty cool and makes me want to revisit this project:

3 Likes

I'm happily surprised about this feature; my guess would be that other browsers will adopt it as well :slight_smile:.

1 Like