I must admit this an amazing extension @MaxZieb really cool stuff, I was able to do an interesting loop animating 2 circular gradients and a letter zooming in and out Experimental.zip (41.4 KB)
5 Likes
Thank you @MaxZieb for this!
I’m having super flaky results and it’s eating a lot of my time to try to isolate what is happening. The hype doc that I export appears to run fine, but when I insert the Hype code into another document, it has intermittent results. I have even created a dedicated document where I try to remove html until I find the source of the problem, but there doesn’t seem to be any rhyme or reason why it works or doesn’t. I’ll take out harmless code and the effect disappears, but it is not consistent about when it seems to work.
Also, the apply modes that I see in Hype look differently in Chrome. Particularly “screen” appears very different. Does it matter if I have a transparent div holding the hype code? The page still has a white background.
Do you have any ideas on why it may not be working? And is this the correct (latest) code I should use to link from my html doc?
<script type="text/javascript">
/*
Hype BlendModes 1.3
copyright (c) 2019 Max Ziebell, (https://maxziebell.de). MIT-license
*/
!1 === "HypeBlendModes" in window && (window.HypeBlendModes = function() {
function e(a, b, d) {
a.getCurrentSceneElement = function() {
return document.querySelector("#" + a.documentId() + ' > .HYPE_scene[style*="block"]')
};
a.applyBlendModeByElement = function(a) {
var b = String(a.dataset.blendmode).trim().toLowerCase();
-1 < c.indexOf(b) ? a.parentNode.style.setProperty("mix-blend-mode", b, "important") : c.forEach(function(b) {
a.classList.contains("blendmode-" + b) && a.parentNode.style.setProperty("mix-blend-mode", b, "important")
})
};
a.removeUndeclaredBlendModes = function() {
var b = a.getCurrentSceneElement().querySelectorAll("[style*='mix-blend-mode']");
[].forEach.call(b, function(a) {
-1 != String(a.firstChild.className).indexOf("blendmode-") || a.firstChild.dataset.blendmode || a.style.removeProperty("mix-blend-mode")
})
};
a.applyBlendModes = function(b) {
b = a.getCurrentSceneElement().querySelectorAll("[class*='blendmode-'], [data-blendmode]");
[].forEach.call(b, function(b) {
a.applyBlendModeByElement(b)
});
a.removeUndeclaredBlendModes()
}
}
var c =
"color color-burn color-dodge darken difference exclusion hard-light hue lighten luminosity multiply overlay saturation screen soft-light".split(" ");
!1 === "HYPE_eventListeners" in window && (window.HYPE_eventListeners = []);
window.HYPE_eventListeners.push({
type: "HypeDocumentLoad",
callback: e
});
window.HYPE_eventListeners.push({
type: "HypeSceneLoad",
callback: function(a, b, d) {
a.applyBlendModes()
}
});
document.addEventListener("DOMContentLoaded", function(a) {
if (-1 != window.location.href.indexOf("/Hype/Scratch/HypeScratch.") &&
!document.querySelector(".HYPE_document")) {
var b = {};
e(b);
b.getCurrentSceneElement = function() {
return document.getElementById("HypeMainContentDiv")
};
var d = !1,
c = new MutationObserver(function(a) {
c.disconnect();
d || (d = !0, window.requestAnimationFrame(function() {
(new MutationObserver(function(a) {
a.forEach(function(a) {
"attributes" != a.type || "class" != a.attributeName && "data-blendmode" != a.attributeName || (b.applyBlendModeByElement(a.target), b.removeUndeclaredBlendModes())
})
})).observe(b.getCurrentSceneElement(),
{
attributes: !0,
attributeOldValue: !0,
attributeFilter: ["class", "data-blendmode"],
subtree: !0
});
b.applyBlendModes()
}))
});
c.observe(b.getCurrentSceneElement(), {
childList: !0
})
}
});
return {
version: "1.3"
}
}());
</script>Please share your document file (setup). I can’t debug or help only based on a testimony 
. Is the code somehow modified or why did you repost the extension source in the last reply?might take some days as I am pretty busy with family etc.
Thanks for the reply and sorry if I made this sound complicated! I shared the JS code because I wasn’t clear which version of Blendmodes to use. The original post above stated there was an older version and because you didn’t include the HypeBlendModes.min.js file but only linked to it, I wanted to confirm I copied the correct javascript and was using the latest.
I’ve attached the files. I simplified the hype doc a little so the graphic looks a little different, but it is the same setup that exports the embedded hype doc in “website.”
The “hype exported” directory is just a direct export of the hype animation.
For me, if I preview website/html/test-blending.html in Safari, it currently works properly, but in Chrome it does not. But I can simply start deleting other code in the html and it magically appears properly. It’s difficult for me to troubleshoot because I can’t isolate what is causing the problem.
file setup.zip (267.3 KB)
try loading the HypeBlendModes.min.js in the head section. it has to be in charge before a hypedoc loads …
3 Likes
That fixed it! Not only that, it also fixed other issues I was having with other animations mysteriously not showing up. Thank you so much!
all hyperelated scripts that listen for its events have to be loaded before the hypedocs …
Yeah I should have realized that. But without thinking I put the javascript at the bottom of the page with the rest of the js.
That is expected behavior and not under my control. Blend modes work in "Stacking Context" so, you can only blend things together that are in the same context. I guess this is one reason Hype hasn't implemented it yet.
1 Like
Good to know.
- The entire group can be blended
- because its in the same "Stacking Context"
- Just apply the blend mode to the group
The inner contents of the group marked red can also blend, but only with each other and not with elements outside the group (because these are two different stacking contexts). I marked one green and the other red. Closing the group makes it even clearer what is a "Stacking Context" …
2 Likes
This extension is 
!! 
3 Likes
Update: we seem to get a script error wenn exporting this extension in combination with the export script DCM [source code link].
We are now going around it by not using the blend-mode and changing the images in photoshop.
We tested with the tag inside your div. We get an html error in the build.
Tested it with the cdn <script> tag in the <head>. Then the Blend-Mode does not work.
I have added the export and hype file @MaxZieb.
160x600_sky_wgv_hr.zip (151.3 KB)
160x600_sky_wgv_hr.hype.zip (269.0 KB)
Seams like this has nothing todo with blend modes. You have a script tag in the middle of your inline document loader. It is assigned to the w key content describing your scene:
If you visit the Hype Cookbook you can see that this key is mapped to innerHTML
In conclusion: You are inlining the Blendmode code with a script-tag and on top the DCM plugin is inlining the document loader itself. Hence, you end up with an document that has a script tag at the wrong place.
This should be fixed by Tumult in Hype directly, as this is a general error for all script tags in innerHTML when inlined.
@jonathan would need to implement better escaping of SCRIPT tags in the document loader to work properly when inlining the document loader in a HTML page.
Maybe something along the lines of </script> as <\/script>
Workarounds:
Don't inline the Blendmode code inside a Hype rectangle. Rather just put it in the Head section.
4 Likes
Thank you for the feedback and workaround, Max.
1 Like
Thanks for your investigation Max. This is on our list to fix!
1 Like
Works perfectly
Thanks Max
2 Likes