To be quite honest, I rarely use persistent symbols. Im sure they're useful and all. However, in this particular case I had to because it's done with scenes vs timelines, I had no idea SceneMagic didn't support these PSs. That said, I know of a way to still have those lines in and not fade in and out.
Question: Can I add/define the word "magic" as a class to a hype group?
Yes, that is possible. You can add the magic keyword before a unique identifier, including groups. The magic keyword serves to match one group or element’s position and properties with the corresponding group or element in the next scene. This allows them to morph into each other. For instance, if a group has a different offset in the next scene, it will move. If it has different dimensions, it will scale, and so forth.
Your feedback was incredibly valuable, and I’ve reworked the approach to allow custom durations and delays for each pair going forward. While I’m currently occupied with another task, I plan to include all these new features in the next coding sprint for Hype Scene Magic. For now, I’m happy with the persistent symbols being on par with regular Hype transitions, and I’m glad you found an alternative solution in the meantime.
I had some time today, and everything is coming together nicely. I'm planning to release the version with the crossfade I'm using from Hype, probably tomorrow or by the end of the week. In the long run, I will continue experimenting, as I discussed earlier, but this intermediate solution is quite effective.
I even managed to restore the old transition timing because I now handle it myself again, using a class override to suppress Hype's opacity management during the transition while keeping its state management like persistent symbols. This allows us to define arbitrary crossover durations (1%-99%) between the scenes, with a default of 50%, meaning the outgoing scene fades out halfway through the transition.
Additionally, every object can now have its own delay and duration, and I will likely implement easing for each element as an override—this will provide really fine-grained possibilities. I will probably also implement a match function: if you jump from one scene to another and want to overwrite the matching magic element for that specific instance, you can provide a name or lookup.
We also have a fallback solution now for elements that don't have a matching partner but should still have an animation when visited or leaving. That's more advanced stuff, and I will cover it later with some examples.
Udapte v2.5.5. is out:
A post was split to a new topic: Discussion on Hype Scroll Magic
This is help on a Wheel scroll to switch scenes and is not directly related to Hype Scene Magic.
If you don't call the function, it will never run. So this is basically it.
Better would be even to only set that script up one only once. This approach uses the HypeDocumentLoad event and sets the code up only once:
<script>
if (window.HYPE_eventListeners === undefined) window.HYPE_eventListeners = [];
window.HYPE_eventListeners.push({ "type": "HypeDocumentLoad", "callback": function (hypeDocument) {
if (window.addEventListener) {
window.addEventListener("mousewheel", scrollScene, false);
window.addEventListener("DOMMouseScroll", scrollScene, false);
}
function scrollScene(e) {
window.upORdown = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
if(upORdown === 1){
hypeDocument.showPreviousSceneMagic(0.25);
}else{
hypeDocument.showNextSceneMagic(0.25);
}
}
}
});
</script>
Ok I added to head, this seems like it’s straightforward and works now what are the benefits of using your magic scroller over this?
Thank you
This isn’t my scroller code. I simply took the code from your function and placed it in the Hype document’s load event. Unfortunately, Hype 4 doesn’t natively offer a dedicated load event—one that fires just once when the document loads in the UI. I hope a future version adds this feature because it’s incredibly useful.
However, the event does still exist under the hood and can be leveraged by registering it in the HTML Head. If you look closely, it’s the same code you had in your function before, but I’ve wrapped it within a loader event. So technically, this isn’t my code and still yours.