Hype Scene Magic

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.

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.

Usage & Integration:
The integration remains similar: Attach the library, use the magic classes, and you're good to go.

HypeSceneMagic-2.3.1.hype.zip (216,0 KB)


↑ 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.

*Edit, nvm me. I already see what I was looking for

Already have a nice usecase in mind for something I have to do manually with GSAP now, but would be neat to get it done in Hype fully.

1 Like

I just noticed that this is failing on Safari due to inconsistent CSS Animation API support. I need to fix this issue… otherwise, it will only work on Chromium until I revert to using Hype animations exclusively, with the possibility of integrating a third-party animation engine.

Update: Managed to make it work with GSAP as a dependency. This will be the upcoming release as the web animation API remains unreliable in Safari. Regrettably, this step is necessary for now. I may consider adding a legacy mode (only setElementProperty via Hype) for users interested in using this in banners to avoid an additional dependency, but GSAP is largely whitelisted by ad networks.

Download the GSAP based version (Preview):
HypeSceneMagic-with-Data-Magic-GSAP-Edition.hype.zip (1,4 MB)

1 Like