Matter JS code to Webflow problem

Design help Custom code
1

Hey guys, just decided to dive into custom code in Webflow and met with a problem.

In my project, I want to use this Matter JS sample from Codepen: Matterjs

I put the HTML code into the embed element and the JS code into the before tag and got the scene shown up. But I can’t interact with it like clicking or dragging obects.

I got no experience in coding so I do not know exactly what is the problem. But I tried to change the code here and there, deleting some parts. Nothing seems to work until now. This kinda make me want to learn coding. But in the mean time, would love to have some help resolving this issue.

Thanks in advance.

Here is my site Read-Only: Link

2

Hi @Gigaloo,

Welcome to the forum!

Did you manage to get this working in the meantime? If not, let me know!

1 Like
3

Hi @mww , thanks for the welcoming

I found out what caused the problem. I had a grain element that somehow block the interaction with matterjs. I tried to set the z-index of matter js to above the grain element but it did not work.

What work for me is to put an embed element inside the grain div and set the grain div’s pointer event to none as below

<style>
.grain-effects {pointer-events: none;}
</style>

I changed the design and do not use matterjs anymore though so anyone having the same problem could try and confirm if it works as well.