CODEWITHSUNDEEP
cssblendingwebflowmix-blend-mode
hencubed
hencubed

Reputation: 11

Is there something wrong with my mix-blend-mode code snippet?

I’ve been trying emulate (in Webflow) this nifty 'fluid text hover' from the following codepen: https://codepen.io/robin-dela/pen/KKPYoBq

As you can see, there is a fair amount of HTML, CSS (SCSS) and JS (Babel), but I believe the pertinent code snippet to be the following:

<style>
body {
    position: fixed;
    height: 100%;
  overflow: hidden;
}

canvas {
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
}

.mask {
    position: absolute;
    z-index: 2;
    background: white;
    height: 100vh;
    width: 100vw;
    mix-blend-mode: screen;
    /* THE mix-blend-mode ABOVE DISPLAYS IN RED */
}

svg {
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

</style>

When I publish my site, the 'CREATIVE' text displays, but without the interactive fluid element. I’m almost certain it’s something to do with the mix-blend-mode, as that is the only code showing up in red. I’ve seen similar questions asked on here, and have tried all the methods offered (changing the body background to white, as opposed to transparent; adding the code as a code block rather than the Inside tag, but nothing has as yet made it work. I’d really appreciate any help.

My Webflow site read-only can be found here: https://preview.webflow.com/preview/hen-ry?utm_medium=preview_link&utm_source=designer&utm_content=hen-ry&preview=f7f278a8af346d820c843647397c8d76&pageId=6238983c269c21e6d0507afe&workflow=preview

Upvotes: 1

Views: 106

Answers (1)

gjjr
gjjr

Reputation: 569

You're probably missing the js file. If you click the little settings button at the top of the JS section, you will see a file called https://robindelaporte.fr/codepen/bundle.js, if you have not loaded this then it won't work.

Upvotes: 0

Related Questions