Blend-mode to any element in a scene?

If not directly supported > how to ?

Not directly. Not any. For Images a good starting point is here…

https://alligator.io/css/exploring-blend-modes/

As Hype wraps images into a container structure you can't recreate the example easily.

Update: There was a thread discussing it:

Conclusion: Be aware of the IE-User as he won't see your creation :smile:

1 Like

I found a solution that allows you to use most blendmodes just by adding a class to any Hype-element. I added the following MODES to the solution:

  • color
  • color-burn
  • color-dodge
  • darken
  • difference
  • exclusion
  • hard-light
  • hue
  • lighten
  • luminosity
  • multiply
  • normal
  • overlay
  • saturation
  • screen
  • soft-light

To add the blendmode use one of the MODES and assign a class with the pattern blendmode-MODE:


For soft-light:

blendmode-soft-light

hypeBlendmodes.hype.zip (303,8 KB)

2 Likes

I’ll add it to the LayoutHelper-Extension (with a disclaimer)!

Wishlist for Hype 4 (or 4.x)
Hype Blendmodes (with export warning for IE)

2 Likes

you are a genius

I shall try to implement ?

thanks

Thanks, well the code ins’t that complicated. :slight_smile:

Please be aware of the following:
https://caniuse.com/#search=mix-blend-mode

the code was written in a "function " . > is there an easy way to export this ‘function = blendmodes()’ to the desktop and reuse it in another document or always copy paste .?

can we see the bend effect directly within Hype document > no need to check the result in a browser?

Techtalk: The function has to be called on “Scene Load” or “Layout Load” and you can recreate it in a new document (copy&paste). There is no easy way to implement this with a Preview. With pure CSS it would be possible but as Hype “wraps” Image elements and CSS doesn’t allow selectors that look backwards (yet).

Easy answer: I am working on making the function easy to transfer. No previews.

I’m guessing my extension (in the thread you pointed too) is a non starter then :slight_smile:

I created one back last year. All you have to do is include the script in the head HTML and call it in any document like:

hypeDocument.setMixBlendMode(selector, mode) ;

Original post:
When will Hype support blend-mode?

@DBear Searching the forum comes second to implementing something. But I did link your solution up top at the beginning!!

@kamal To make things easy here is a Symbol-based approach that can be copy & pasted to any new document. The symbol hides itself and enables blendmodes across your entire Hype document.

Update:

blendmodesEnabler.hypetemplate.zip (17,9 KB)  <-- old version

Latest Version can be found here:

1 Like

...the IE user is a big reason why I stopped building websites :laughing:

1 Like

Max,

I’ve been using your blendmode via:

https://playground.maxziebell.de/Hype/BlendModes/HypeBlendModes.min.js?1.3

Overall, works great!

One issue I face is that it doesn’t apply blendmode to an element “inside” a symbol, unless I apply the CSS to the entire symbol too!

Blendmode inside Symbol.hype.zip (12.7 KB)

Is there a way around this?

Thanks,

Happy Hyper

Hi @MaxZieb @DBear

Reposting, in case this was missed. Any thoughts for areas to explore / try on this?

Thank you!

The blendmode extension doesn't support applying blendmodes from within a symbol to elements outside a symbol. This is in the nature of mix-blend-mode:

The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.

As symbols are a grouped entity the elements withing are not on the same HTML group depth and don't share the same parent. Hence, the blend mode won't apply. Nothing I could do about that, as far as I am aware. You can always blend the entire symbol.

In theory I think if you can target the symbols scene container then it would likely work.

I.e the parentNode above the parentNode that is getting populated with blend.

I did have a look when I had a couple of mins and although I could manually change it in the browser developer inspectors I was not able to via code. Ran out of time…

That is the same as applying the blend mode to the symbol itself. So, that is already possible. You can also blend layer inside of symbols with other layers inside the symbol. But blending elements only works on elements in the same depths layer. That is independet of symbols in general… if you wanted to blend a element within a group to affect other elements outside a group that also wouldn't work.

Here is a good read on the subject matter. Any groups, scene or symbol container creates a stacking context (see article for details)…

There are 16 available blend modes in CSS. The default value is normal . When a value other than normal is specified on an element, this leads to the creation of a new stacking context on that element, forming a new group . This group must then be blended and composited with the stacking context that contains the element.
In addition to that, an element that has blending applied, must blend with all the underlying content of the stacking context that that element belongs to . It will not blend with contents outside that context.
This means that an element belonging to a stacking context is isolated from the rest of the content outside that stacking context. Therefore, unless the entire context (the context’s root element) is blended with an element behind it, the contents will not blend with the latter.

Thanks @MarkHunte and @MaxZieb! Appreciate you fiddling around with this a bit!

Tried reading up on your links and suggestions (many things went a bit over my head). Nonetheless, I tried different combinations of what I "think" you were suggesting, but I don't seem to be able to "breakthrough :slight_smile:" The goal again, is to apply blendmode to an element "inside" a Symbol.

Blendmode inside Symbol 2.hype.zip (26.9 KB)

If have updated the document to make it easy to try what you "may" be suggesting out.

If you can take a look, would be most appreciated.

Thanks!