Display contents fixes the stacking order in Hype

Tips & Tricks
1 

.HYPE_element_container {
	display: contents !important;
}

Display content is very effective and somewhat well-supported, addressing the stacking order issue in Hype. Until Hype 5 potentially resolves this, it serves as an excellent workaround for using blend modes and anything dependent on stacking order, which was hindered by the cumbersome Hype element containers used solely for 3D effects. If you have ever tried to utilized blend modes or other things that rely on a proper stacking order, you know these containers often obstructed functionality. However, with the new display contents setting, you can bypass these drawbacks while still enjoying the advantages of normal stacking. This is offers a fix for all the effects and layout modes that require a proper stacking order and should prove useful. I tested it with mixed blend modes, and it works great. I didn't test it with layout capabilities like grid and flex container that actually should also work. You're welcome to also try around and share your work in this thread. Happy testing! It mainly has screen reader accessibility issues when used on semantic node elements, but we are using it on a wrapper, this is the best-case scenario usage.

Here is my file with my Mix Blend Mode test:
Display contents in Hype - Mixed blend mode.hype.zip (17,9 KB)

5 Likes
2

CleanShot 2025-01-07 at 00.02.11

Here is another test file with an animated 3D cube - 3D transformation on nested objects:
Display contents in Hype - Cube 3D.hype.zip (23,8 KB)

Works like a charm. I did use some classes to translate objects on the Z-axis because you can't do that in the interface, so I just used the classes to translate the faces of the cube. But you can now just group the cube and then apply rotational animation to the group inside of Hype. You can also use Hype to color, style and animate the faces. It was impossible inside Hype because of the mention Hype Element Containers before and now just works. I always wanted this in Hype. One major drawback is that the on stage selection of elements doesn’t work as the bounding box Hype applies is managed outside the web view and isn’t in sync with now possible display methods like flex, grid or z-translation. We need a new Hype version to fix that.

6 Likes