For the Hype Blendmodes extensions
or a future version of Hype supporting Blendmodes, this is very interesting in the context of using blend modes:
.my-container {
isolation: isolate;
}
Yes… How would one use that?
I so wish that elements within a Hype group or symbol could be blended.
Any idea on how to solve that?
See attached test document.
The symbols walking_lightning and flash have the class name blendmode-lighten.
The elements inside the symbols also have that class name. And that should be enough.
Sometimes you want to have a symbol or a group with e.g just some of the elements blended.
Perhaps not the best example here, hope you get the point. (Can't post project I'm working on, with better examples.)
blend_mode_issue.hype.zip (2.7 MB)
I am not entirely sure what you are considering the problem, so here is my guess: Blending happens in a stacking context. Hence, one should be able to add a blend mode to any set of elements in the same group or symbol level, and they would blend with each other. As Hype uses an container around each element, it breaks the stacking context for elements one would consider to be in the same realm. That is the reason this little helper exists. It considers your class assignment a letter of intent to blend and adds the blend mode to the invisible container around each element, putting the blending in the same stacking context.
Blending can be nested, and if you are talking about using isolation, it would probably need to follow the same fix for Hypes DOM structure. I haven't looked into that yet, though.
Creating a group does break the stacking context and work sort of like isolation:
Doesn't prevent nested blending, though
Thanks Max, for the quick response!
What I'm trying to do is:
Make sure videos that should be on several scenes and play in a loop to play smooth — without interruptions and flickering — when a scene switch happens.
I have made a persistent symbol with 8 video clips, all of them are playing looped. One or two playing at the time.
That persistent symbol will be on 8 out of 10 scenes. Then there are some JavaScripts to control play/paus and rewind of the videos. (Only one or in some cases, two videos should play at the same time.)
This works very well with the persistent symbol. No interruptions or flickering in any video when the scene is changed.
Now…
…two of the videos have the class name 'blend mode lighten'. One of those two videos also has one more class name ('video_a', used to control play/paus).
The other 6 videos in the persistent symbol should not have a blend mode applied.
Can't make this work, without applying the blend mode to the persistent symbol as well. And that breaks the look for those 6 videos within the persistent symbol that shouldn't have a blend mode.
If I skip the persistent symbol idea and just put the two videos that should have blend mode lighten in a group, it only blends the correct way if the group and the two videos has 'blend mode lighten' applied.
And if I take that group and put it into a symbol, the blend mode effect is gone.
Any chance, it will blend… the way I want?
Makes me think of that guy with the blender on youTube…
In general, persistent videos moved between scenes are detached and reattached. The portion being moved is the inner DOM structure. Meaning the symbol wrapper may not be moved and hence there could be glitches as I explained in the previous post, this extension applies the "fix" to the invisible Hype element container. I didn't test it for the use case of persistent symbols. Last time I touched this code was 2019.
Could be worth to check your extension code, and try with a e.g. persistent symbol.
If I remember correctly, this worked reliable some time ago… 6 months, a year ago… the BlendModes extension worked better with grouped groups and symbols.
Now, after fiddling with this, I have two test files with the exact same structure, same blend mode class names – only one of them works as intended. Very strange.
For make current case…
…I think I will make two persistent symbols. One persistent symbol with the blend mode videos and one with the other videos. Then put these two persistent symbols an all scenes, with some javascript to control the videos. That should solve the problem.
Yes, I have heard that persistent symbols get detached and reattached at scene switches. Yet, the looping videos are playing perfectly, without glitches.
Can you please share your test files, but please try to reduce them as much as possible to illustrate the „error“. I am still not sure I understand what you want to achieve.
I think I'm talking about what you refer to as doesn't preserve nesting.
A solution could be to apply a blend mode to the group (or symbol).
However, if you want to have elements within that group or symbol without blend effects you will not get the wanted result.
And that I think worked, some time ago. I can be wrong. That has happened before 
Can't post my clients files. Maybe after they have been published. Way to big for upload here anyway.
Perhaps a can replace the videos and make small test files with dummy content.
Most likely as Hype hasn’t changed anything and I haven’t touched the codebase since Hype 3/ Hype 4 beta times.
If I have time I will look into it.
1 Like
All client stuff removed and replaced with some quick and ugly videos made now in Blender.
Navigate between the scenes with the buttons A, B, C.
To see the rendering difference: just click and drag (the symbol with the video) around a bit when the Hype document is running in a web browser. It's visible in Hype too.
Visible in the top part, not blending the same way. And I think these two Hype document are setup the same way.
Two things at first sight…
- In the file you are missing a hyphen, blendmode lighten → blendmode-lighten
- You are missing symbol actions compared to the working version, might be why it stops
1 Like
good catch!
Must have been a bit stressed.
"On Symbol Load", within this persistent symbol works in this document; Start Timeline Main Timeline".
So the trigger on the main timeline of the scene is not needed.
Not always the case, in my experience.
The wish to be able to have different blend modes or blend mode none — within a group or a symbol remains. Like you can have in Photoshop, Premiere, etc.