Hype Blendmodes (with full IDE support)

MaxZieb · August 28, 2019, 10:19pm

This is a full extension offering blendmodes. You can assign them by using the attribute data-blendmode (assigning MODENAME) or by class blendmode-MODENAME.

MODENAME are color, color-burn, color-dodge, darken, difference, exclusion, hard-light, hue, lighten, luminosity, multiply, overlay, saturation, screen, soft-light.

Demo:
HypeBlendModes.html

Example Download:
HypeBlendModes.hype.zip
PS: there is an older version of this project using an symbol but this take is much more versatile, in my opinion.

Code repository on GitHub

Version history
1.0 Initial release under MIT-license
1.2 Converted into full IDE plugin
1.3 Fixed IDE support, added dataset variation

Content Delivery Network (CDN)

Latest version can be linked into your project using the following in the head section of your project:

<script src="https://cdn.jsdelivr.net/gh/worldoptimizer/HypeBlendModes/HypeBlendModes.min.js"></script>

Optionally you can also link a SRI version or specific releases.
Read more about that on the JsDelivr (CDN) page for this extension at https://www.jsdelivr.com/package/gh/worldoptimizer/HypeBlendModes

Learn how to use the latest extension version and how to combine extensions into one file at

MaxZieb · September 2, 2019, 6:06pm

Here is a simple trick using the blendmode multiply to color a chair.

Demo:
HypeBlendModes_Chair.html

Download:
HypeBlendModes_Chair.hype.zip

jonathan · September 4, 2019, 8:05pm

I just came across this article:

But I think your extension and Hype’s editor makes the process much easier!

MaxZieb · September 5, 2019, 6:40am

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

h_classen · September 5, 2019, 7:03am

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

MaxZieb · September 5, 2019, 8:17am

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

MaxZieb · September 19, 2019, 2:43pm

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

MaxZieb · October 22, 2019, 7:57pm

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

thomas_lundin · October 23, 2019, 12:35pm

Nice work!!

Easy to use

I have been using something similar for a while:

thomas_lundin · October 23, 2019, 12:39pm

Very cool! (In Chrome)

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

MaxZieb · November 13, 2019, 3:27am

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/

petester · March 22, 2020, 12:31am

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)

finedesign · April 29, 2020, 1:35am

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>

MaxZieb · April 29, 2020, 8:21am

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.

finedesign · April 29, 2020, 3:39pm

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)

h_classen · April 29, 2020, 4:33pm

try loading the HypeBlendModes.min.js in the head section. it has to be in charge before a hypedoc loads …

finedesign · April 29, 2020, 4:37pm

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!

h_classen · April 29, 2020, 4:40pm

all hyperelated scripts that listen for its events have to be loaded before the hypedocs …

finedesign · April 29, 2020, 4:41pm

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.

Bendora · February 10, 2021, 10:33am

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