Hype Custom Transitions (and Template)

Extension Project
2

Hype SceneMagic 2.0

20181114-6pb2w
20181114-6pb2w1198×796 25.9 KB

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 …

scenes
scenes1024×412 99.2 KB

… 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

There is a newer version of this here:

4 Likes