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