When will Hype support blend-mode?


(Uli Zappe) #1

Will Hype support blend-mode in the foreseeable future? I depend on this … :neutral_face:


Blend-mode to any element in a scene?
#2

Tumult seems to be highly focused on cross-browser support. Unfortunately, IE / Edge support for blend mode looks bad…

It looks like a cool feature though…


(Uli Zappe) #3

I see.

However, the good thing about blend mode is that if done right it’s mostly backwards compatible.

E.g. if you color an image for additional GUI feedback, the image simply will remain uncolored in IE/Edge which isn’t an issue if the GUI does not rely on this effect alone.

It looks like a cool feature though…

It is.

In my case, I need it for precise color changes of images which are originally monochrome. You can try and use the CSS hue filter for that, but specifying a hue angle limits you much more than specifying the RGB values of a backplane in getting precisely the color you want (especially so since Chrome and Firefox behave differently from WebKit for the CSS hue filter).


(Uli Zappe) #4

And, BTW, while this is true, the linked statistics page says that CSS filters (working with Hype) all in all are 90% supported and blend-mode is 86% supported. That’s not that much of a difference …


#5

This is a problem that has plagued the industry for decades. Microsoft does their own thing with their browsers.

Provides a way to blend an HTML or SVG element with its backdrop

Roadmap Priority: Low — We are still evaluating this technology. There may be significant spec stabilization, foundational work, or additional community input required before we can begin development.

That roadmap priority is pretty telling. I don’t even think it’s necessarily malicious, as Windows is a very different operating system than macOS, iOS or Android. Some features are simply harder to support on other platforms.

I’m just saying, that this is probably one of the issues for Tumult. I’ve used blending in other projects, such as creating particle effects in games. It’s really cool. But unfortunately, most developers don’t have the luxury of ignoring Internet Explorer / Edge, even if the market share is low.


(Jonathan Deutsch) #6

blend-mode is a good feature request.

It is true that web features with a high degree of browser support are going to be higher priority, but we also have the browser compatibility warning system to alert users that specific effects won’t work. For example, released CSS Filter Effects and 3D Transformations when only WebKit-based browsers supported them.

I assume as a workaround you are using custom css with elements with IDs/class names?


(Uli Zappe) #7

Exactly. :slight_smile:

I assume as a workaround you are using custom css with elements with IDs/class names?

In case it was me whom you addressed: No, since it looked as if blend-mode wouldn’t come, I spent the last 5 days replacing the Hype version of my page with my own CSS/Javascript code. A lot of work, but I also learned a lot. :sunglasses:


#8

Adding CSS classes on a style tag in the header does not work well unfortunately. I’ve gotten it to work with an asterisk selector on Chrome:

* { mix-blend-mode: multiply; }

Obviously this applies it to all the elements not just the ones you want.


#9

I’ve written an extension that adds the mix-blend-mode to any element that you specify using a selector (id, class, role)
###Installation
In your Head HTML import the script by adding this line

<script src="//hype-expert.uk/cdn/HE_Extensions.0.1.js"></script>

then you can use the function below

###Code:

hypeDocument.setMixBlendMode(selector, mode)
//e.g hypeDocument.setMixBlendMode(".blender", 'multiply');

###Description
Sets the mix blend mode for any element with the chosen selector. (Selectors can be added in the Identity’s Inspector’s relevant fields


Multiply Blend Mode
Blend-mode to any element in a scene?
#10

@DBear Works well - Thank You!


#11

Beautiful! It works! Thank you very much :+1:


(Uli Zappe) #12

How would I apply mix-blend-mode to an image in Hype? As far as I can see, images in Hype are always background images, but mix-blend-mode assumes a foreground image.

Do you have an example? I could not get this to work.


#13

You could always place an IMG tag inside the inner HTML of a rect element and give it an ID/Class then you can change the background color to see any effects.

As I’m nice I added another extension that takes advantage of the background-blend-mode property.

You can use it in your same document that you would use mix-blend-mode like this:

// 	hypeDocument.setBackgroundMixBlendMode(selector, mode, bgColor)
hypeDocument.setBackgroundMixBlendMode(".img", 'exclusion', 'red')

mixBlendMode-example.zip (75.8 KB)


(Uli Zappe) #14

Thanks for the example, but for me, this doesn’t work.

At first glimpse it seems to work, but if you try to animate the background color, nothing happens. In fact, even trying to animate the background color of another, completely blend-mode independent rectangle (Control Rectangle in my example) does not work anymore:

mixBlendMode-example animation.hype.zip (102.8 KB)

When I tried to add blend-mode to Hype via custom HTML and CSS, I came to a similar point, but animation never worked, which made the whole thing kind of pointless for me.


#15

Can’t seem to replicate your problems. Everything animates for me. What is your setup?

Bear in mind that the element with the background-blend-mode won’t be effected by the other elements as it doesn’t have mix-blend-mode.


(Uli Zappe) #16

Hype Standard 3.6.3 on Mavericks and Sierra (latest OS version each).

In Mavericks, Safari 9.1.3 displays a static image with no animation at all.

In Sierra, Safari 10.1.1 displays a blank page.

Your movie link is most interesting, as it shows two logos. I only see the upper logo (in your original example as well as in my animated modification); the lower logo is just an empty rectangle for me in Hype as well as in Safari 9 (as I said, Safari 10 shows an empty page):

PS: I get the email notifications about new posts in this thread only sporadically; e.g. I didn’t get one for your last post. Is this a known problem?


#17

Email notifications are only sent if you don’t visit the site (notifications in the top right will show you new notifications if you have the forums open). You can change this behavior in your profile.

This might be because the blend mode is not being understood by the version of Webkit your operating system has installed. Hype uses webkit rendering to display content in the scene. This is the kind of thing that Modernizr was built for: https://modernizr.com/docs/#using-modernizr-with-javascript – you can check to see if backgroundblendmode is supported, and only apply that CSS to an element if it is:

  if (Modernizr.backgroundblendmode) {
    // use blend mode!
  } else {
    // do something else for browsers that don't support it
  }

(Ken Heins) #18

Since I have 20 + years in Photoshop (Pixelmator in the last 10 years) I just use stacked png images and crossfade them to create blend effects. I realize that can cause image size issues in things like Adsense, but it does work with any browser, and I can’t see much if any increased loading time. And, if you use tinypng.com to minimize your file sizes, it can work very well.


(Uli Zappe) #19

Ah, I see! This explains it. thanks for the hint!

This might be because the blend mode is not being understood by the version of Webkit your operating system has installed.

No, that’s definitely not the reason.

Apart from the fact that the latest developer beta of Sierra should use a decently recent version of WebKit :wink:, I’ve meanwhile implemented the features I need with my own handwritten code (without Hype), and there, blend-mode works just fine, on both Mavericks and Sierra.


#20

Can you see if the reported version when you open this in Hype is different than when you preview in Safari? (detection via this tool)

webkitversion.zip (15.7 KB)