Blend-mode to any element in a scene?


(marrouche) #1

If not directly supported > how to ?


#2

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

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:


#3

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)


#4

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


#5

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


(marrouche) #6

you are a genius

I shall try to implement ?

thanks


#7

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

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


(marrouche) #8

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


(marrouche) #9

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


#10

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.


#11

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?


#12

@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: