Hype Blendmodes (with full IDE support)

I think this “extension” is so trivial that it should be part of Hype.

1 Like

though, i like the idea of components loaded when needed and not one big library containing the whole thing.

2 Likes

Yes, true. I am with you on this. I was just thinking that blend modes are so basic and only require a couple of lines of code.

edit: Moved thoughts to ...

↑ look at project
1.3 Fixed IDE support, added dataset variation

1 Like

This would be neat to recreate in Hype using blendmodes
https://codepen.io/kyleshook/full/GRKVgeZ

Nice work!!

Easy to use :slight_smile:

I have been using something similar for a while:

Very cool! (In Chrome)

This pen doesn’t work as intended in Safari (13.0.2) or Firefox (70.0).

Playing around with Blendmode and Textstroke:

Mix-Blend-Mode-And-Text-Outline-Test.hype.zip (529,8 KB)

based on https://ishadeed.com/article/blending-modes-css/

4 Likes

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)

4 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 :slight_smile: . 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.

Rephrase my question:
Does the Plugin work in groups, @MaxZieb.
:innocent:

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. :slight_smile:

  1. The entire group can be blended
  2. because its in the same "Stacking Context"
  3. 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