What’s up Webflowers!
I’d like to point out that I only have one preview link for the bottom example.
I’ve been trying to do some sort of a WebGL shader or hover effect for a while now. I’ve seen a couple of webflowers managing this in Webflow but for me there’s always some issue that comes up. I’ve tried two projects in a normal editor and everything worked out.
The first one is even cloneable https://webflow.com/website/WebGL-Hover-Effect and by not even changing a single thing and only publishing the project all of the canvases were dark. Here’s a tutorial by Dev Ed https://www.youtube.com/watch?v=HlCzCq46YTk&t=17s it’s super easy but still something doesn’t let it run with Webflow (not when I’m doing it).
The second one is from https://www.curtainsjs.com/ and the Webflow project by Niccolo Miranda http://webgl-shader-effect.webflow.io/, the tutorial is https://www.youtube.com/watch?v=Q5sySJsYct4 . The way Niccolo did this is by pasting the link of an image inside of an tag into an embed element in Webflow. Nothing at all was displayed and the image icon in the embed was broken so I’ve tried it with setting up all the elements ( the canvas, the plane and the image ) with webflow and let the custom CSS do it’s thing. Then the canvas appeared in a dark brownish color so I went back to doing it like Niccolo but still nothing.
Here’s the published page: https://webgl-1136c1.webflow.io/
Sorry for the long ramble. Has anyone of you pulled this off in Webflow successfully? What might I be doing wrong?