↑ look at project
2.4.0 Implemented data-transition-id, data-transition-delay, and data-transition-duration attributes, Implemented data-transition-order with 'front' and 'back' keywords for z-index control, Added 'target' keyword for delay, duration and order to use values from target element, Added the capability to mix and match magic class notation and data-transition-id, Added direct and indirect transition mode (default is indirect)
What is new in Hype Scene Magic 2.4.0
Watch the video here
Download example file:
HypeSceneMagic-with-Data-Magic-2.4.0.hype.zip (1,6 MB)
Click here to read my thoughts on element-based transitions groups
I really enjoy the interactivity user interface in Penpot and Figma, which allow for board-based interactions. This functionality is similar to what Hype Scene Magic offers for scenes. In Hype, similar actions can be performed on an element level using relative timelines. However, due to the confusing behavior of values changing across timelines in Hype (if you are not really careful), the approach hasn't worked for me. I would be interested in incorporating a similar approach to what PenPot offers on an element level in Hype. Perhaps refining the behavior of relative/sub timelines and value editing could make this a feasible solution (Tumult would have to do that), or introducing a new UI driven by "states" could be an exciting alternative (Tumult would have to do that) or as a workaround with redundant groups (not elegant, but I could give it a spin).
Hype SceneMagic now offers fine-grained control over transition timing for individual elements. Using data-transition-delay and data-transition-duration attributes, you can customize how each element behaves within the overall transition time.
New Data-Transition Attributes
To enhance the flexibility and control of transitions, several new data-transition attributes have been introduced:
| Attribute |
Description |
Example Values |
data-transition-id |
Assigns a unique identifier to elements for matching between scenes. |
example1, box, item123 |
data-transition-delay |
Specifies the delay before the transition starts, in percentage of the total duration. |
0, 10%, 50% |
data-transition-duration |
Defines the duration of the transition, in percentage of the total duration. |
100%, 75%, 50% |
data-transition-order |
Controls the z-index order during the transition. Accepts front, back, or a specific number. |
front, back, 10 |
Special Note
target: The keyword target can be used with the data-transition-delay, data-transition-duration, and data-transition-order attributes to inherit values from the target element. This allows for dynamic adjustments based on the properties of the element being transitioned to.
Transition Modes
SceneMagic now supports two transition modes: direct and indirect. The default mode is indirect.
Indirect Mode (Default)
In indirect mode, the delay and duration are calculated based on the total duration of the transition, ensuring that both the delay and the transition time fit within the overall time.
Direct Mode
In direct mode, the delay is applied first, and then the transition duration follows, allowing for more precise control over the timing of each part of the transition.
Difference of indirect (default) and direct mode
This results in the following behavior:
Indirect Percentages
Here's how it works:
In this case, we extract 30% of the total transition time as a delay, and then extract 50% of the remaining time as the duration.
Direct Percentages
To use this mode, you need to enable it using:
HypeSceneMagic.setDefault('transitionMode', 'direct');
In this case, our 30% delay and 80% duration are both extracted from the total transition time, resulting in a 10% overlap that would be truncated.
Z-index Management with data-transition-order:
This version also introduces z-index management (in the elements stacking order level) and enables the following:
- Introduces 'front' and 'back' keywords for easy stacking order control.
- Supports numeric values for precise z-index positioning.
