Why is my mix-blend-mode failing to load the desired interactivity?

[hencubed (Henry Ludlam-Steinke)]

Hi, I’ve been trying emulate this nifty ‘fluid text hover’ from the following codepen: https://codepen.io/robin-dela/pen/KKPYoBq

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

<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 head tag, but nothing has as yet made it work. I’d really appreciate any help.

My Webflow read-only page 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

Thanks in advance for any advice

[Pablo_Cortes]

Hey @hencubed, you are missing two libraries from the codepen settings

I hope this helps.

[hencubed (Henry Ludlam-Steinke)]

You absolute hero, thank you. Working perfectly now!

[Pablo_Cortes]

Awesome @hencubed, could you please share your published link, if you can, I want to take a look at the effect on the browser, It is such a cool effect to be used with and svg. Also, so other people can reference the libraries on codepen settings, could you mark this post as solved? thanks!

[hencubed (Henry Ludlam-Steinke)]

Of course! It’s pretty basic for now, as just experimenting:
https://hen-ry.com/hen-pro-fluid-text
(password is henry)

Also, if I might quickly ask. Could you advise on how to stack code more broadly within page settings? I’m quite keen to have a lot of these extra-code features on my website, but on one long scrollable landing page. Is it as simple as placing the code snippets in order, so that they display on the published page in the right order, or is there a better way to do this?
For example, if I was using code to affect an actual block or piece of text, I would be able to place that initial block or text exactly where I want it - but with this effect, I’m pretty sure the letters have been made in Adobe Illustrator or similar, as they seem to be vectors… Do you know how I would move the word ‘creative’ around my site / stack things above and below it etc? Thanks so much in advance !

[Pablo_Cortes]

Hey @hencubed, so basically you don’t really need the “creative” svg code on your site, because like you mentioned it is just an svg created in illustrator or Figma, you can actually create the same svg cutout and place it as a background image on a fixed/absolute div inside your site, something like this test-hoverimganim, make sure the fixed div has a high z-index. I hope this helps.