He estado tratando de emular (en Webflow) este ingenioso 'desplazamiento de texto fluido' del siguiente codepen: https://codepen.io/robin-dela/pen/KKPYoBq

Como puede ver, hay una buena cantidad de HTML, CSS (SCSS) y JS (Babel), pero creo que el fragmento de código pertinente es el siguiente:

 <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; /* display: none; */ } svg { width: 90%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style>

Copié el código HTML en un bloque de código incrustado en mi página, el CSS en la etiqueta del encabezado interior en la configuración de la página y el JS en la etiqueta del cuerpo anterior en la configuración de la página. Cuando publico mi sitio, aparece el texto 'CREATIVO', pero sin el elemento fluido interactivo. Estoy casi seguro de que tiene algo que ver con el modo de mezcla, ya que ese es el único código que aparece en rojo. He visto preguntas similares formuladas aquí y he probado todos los métodos ofrecidos (cambiar el fondo del cuerpo a blanco, en lugar de transparente; agregar el código como un bloque de código en lugar de la etiqueta interna, pero aún no se ha logrado nada). trabajo. Realmente agradecería cualquier ayuda.

Mi sitio Webflow de solo lectura se puede encontrar aquí: https://preview.webflow.com/preview/hen-ry?utm_medium=preview_link&utm_source=designer&utm_content=hen-ry&preview=f7f278a8af346d820c843647397c8d76&pageId=6238983c269c21e6d0507afe&workflow=preview