When will Hype support blend-mode?

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 …

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.

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?

1 Like

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:

1 Like

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.

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

7 Likes

@DBear Works well - Thank You!

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

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.

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)

1 Like

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.

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.

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?

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: Modernizr Documentation -- 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
  }

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.

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.

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)

1 Like

It’s the same version on Mavericks.

On Sierra, I get an empty Safari page again – this seems to be some Safari issue in the developer beta. So I tried OmniWeb instead; in OmniWeb, the WebKit version is again the same as in Hype.

Since Safari does not seem to work correctly in the Sierra developer beta, I retried the mixBlendMode-example (without and with animation) on Sierra & OmniWeb, and in this case, the results are the same as in Mavericks & Safari:

The lower logo is invisible, animation does not work.

Thanks for this. Worked like a charm for me.

nice work