Streaming live at 10am (PST)

WebGL integration

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 link: https://preview.webflow.com/preview/webgl-1136c1?utm_medium=preview_link&utm_source=designer&utm_content=webgl-1136c1&preview=dd2d12b4338fa6861d0c6f4b64c6df24&mode=preview

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?

Cheers!

Hello! I messed around with this myself a couple of weeks ago and had some issues. I can’t remember exactly what i did to fix it but I can tell you that I cloned the project and had to spend some time inspecting the published page on the live version to get mine to function like theirs. Looking at your link (and comparing it to theirs) I cant see the js referenced in your script?

In the one I have working I have 3 js links - three.js, webgl hover and tweenmax (its the second tab on their demo) and then links to 2 images and the displacement image.

hey DrNinjamonkey,

what script do you mean? I added all the code from the curtain js docs that is necessary for a basic shader effect. It worked in vs code, although I might have forgotten something. may I see your preview link? If that’s not too much to ask.

Cheers

I can’t share my link right now but will try to tomorrow.

In your live link If I inspect the page I can’t see any of the webgl js files used in the example you linked to. I’m a bit new to this so maybe I’m missing something?

In the console it says that s is not function, which refers to some bug in the compressed jquery inside webflow.

So my last hope of getting an effect of this kind into webflow is the tweenmax version.

Thanks for sharing the link DrNinjamonkey!

update: Errors gone by adding data-sampler=“thumbTexture” crossorigin=“anonymous” alt="cone-left.png to the img tag. Still nothing displayed

Hello @DanApro,

I was able to do the WebGL hover effect. Let me know if you still need help implementing it.

1 Like

What’s up Pablo,

Thanks for the response. I still wasn’t able to manage it, so yeah I’d be eternally grateful if you’d show me/the forum how you’ve made it.

Cheers!

Hello @DanApro,

Ok so here we go, this is the page I made to test it out https://studio-two-test-22.webflow.io/gym-grid-tes. First you need to upload the images you want to use into webflow and get the source url for each one, you can get the url on the assets panel
36%20PM
After that you need to create a container, a div block, with a class of “inner-wrap” inside that div block you have to place another div block with a class of canvas with a width and a height of 100%. Make sure your containers are the same size as the pictures you intent to use.
then on your before </body> tag code section paste the following code

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1295275/webgl-hover_min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1295275/TweenMax.min.js"></script>

<script>
new hoverEffect({
  parent: document.querySelector('.inner-wrap'),
  intensity1: 0.1,
  intensity2: 0.1,
  angle2: Math.PI / 2,
  image1: 'https://uploads-ssl.webflow.com/5d4b104ecf90308025174bfa/5d927897d3e06c21cfc37b9f_Screen%20Shot%202019-09-30%20at%205.49.47%20PM.png?',
  image2: 'https://uploads-ssl.webflow.com/5d4b104ecf90308025174bfa/5d92c78fe2a4d90affaa9dab_Screen%20Shot%202019-09-30%20at%2011.07.55%20PM.png?',
  displacementImage: 'https://uploads-ssl.webflow.com/5b367b755b093e453cec2141/5bdf09eb8f67b72ef0a90867_fluid.jpg?'
});
</script>

You have to replace the URLs of image1 and image 2 with your own urls. displacement image is the wave effect so you keep that the same. After that you cross your fingers and hit publish. I hope this helps, let me know how it goes.

1 Like

Hi Pablo,

sorry I didn’t have the time to get back to you. I have no words man, thank you for putting in the time and posting your solution. I tried it before with the same code, but I might have messed up back then, so I’m just gonna test it out with your solution. Either way dude, you’re awesome! Thanks again! :raised_hand_with_fingers_splayed:

1 Like

hey agian,

it worked here it is haha :slight_smile: the key was giving the innner-wrap a fixed height and a width.
I appreciate the help Pablo!

If someone see’s this I’m here to help as well!

https://hoverfx.webflow.io/

https://preview.webflow.com/preview/hoverfx?utm_medium=preview_link&utm_source=designer&utm_content=hoverfx&preview=28b2d921456de3ab048d7a005fc3e99d&mode=preview

1 Like

No worries @DanApro, I’m glad I was able to help you. Great job!

1 Like