Announcement: Reviving HypeSceneMagic with Web Animation API
Hey everyone,
I'm thrilled to share that I've picked up the HypeSceneMagic project, originally from 2019, and have now revamped it leveraging the powerful Web Animation API. The project now provides a smoother and more enhanced animation experience.
Inspiration:
The core concept and aesthetics draw inspiration from Apple Keynote's 'Magic Move' transition. If you've ever been mesmerized by the effortless shifts and transitions in Apple presentations, that's exactly what we're aiming to recreate here.
What's New?
Utilizing Web Animation API for better performance.
Added several properties and functions to fine-tune the animations and transitions.
Using web animations now many more properties can transition
Ensured the framework is more robust with improved error handling.
Preview Version - Call for Feedback
This release is a preview version. One significant change I'm contemplating is moving the magic classes over to data attributes for a cleaner implementation and better separation of concerns. Your feedback and thoughts on this (or any other aspect) would be invaluable!
Usage & Integration:
The integration remains largely similar. Attach the library, use the magic classes (which might transition to data attributes soon), and you're good to go.
I'm thinking of creating a tutorial, but the usage is really straightforward. Simply assign class names starting with magic in your first scene, and repeat this in your second scene. When you're ready, initiate the transition. I personally used HypeReactiveContent, but standard JavaScript calls work just as well to the transition function.
So, an element with the class magicBlue in the first scene will smoothly transition to an element with the same magicBlue class in the next scene. The identifier following magic is entirely up to you and can be arbitrary.
Hi Max, I had time to play around with your scene magic hype template. While it's cool and all, It doesn't necessarily work the way "morph" works in ms powerpoint or if you would use timelines in hype, where every scene or timeline can be customized with regard to animation placements, rotations... Looking at Head HTML the animations are predefined and baked into code which uses a world optimizer script. Unless I'm missing something.
The idea I had for @jonathan would be to replicate what timeline does in a scene environment by adding a "morph" selection in the transition drop down.
As for duration, it would be based on users entry, Hype would create a tween in the next scene and user can modify any tween animation bars to be customized further on the next scene.
or another idea would be selecting multiple scenes right clicking and choosing morph for transition the default duration value could be set in the preferences but can be modified within different scenes as the animation bars or tweens would be customizable.
This would be a nice little tweak to hype since many app devs adopted this standard. Not that Timelines is bad its just outdated being that it's from the flash/animate era.
)