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, si sigue el enlace, hay una buena cantidad de HTML, CSS (SCSS) y JS (Babel), pero creo que el fragmento de código pertinente es el siguiente 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>

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 probé 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 del encabezado interior, pero aún no se ha hecho nada). funciona Realmente agradecería cualquier ayuda.

Mi página de solo lectura de Webflow 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