Webflow's 'tram.js' causing conflict with script

Design help Custom code
1

Hi,

I’m trying to integrate an ‘expanding grid’ into a webflow project. I found a script that does what I need, demoed here: https://codepen.io/DanBoulet/pen/YXQBbZ

I recreated the structure in webflow and everything nearly worked as expected. After much testing, I found something in the webflow javascript file was causing the script not to function correctly. By trial and error, I isolated the problem to tram.js that is included in the webflow javascript.

The links below demonstrate the problem (simplified for demo purposes).

Notice in this first link how, when the blue numbered cells are clicked, the expanding area opens, and the window scrolls to a position that includes the clicked cell in the viewport – this is the intended behaviour (this is the exported webflow site so I could remove tram.js from the webflow js file):
http://voodoo6.com/webflow-tram-not-included/

This is the same site but hosted in webflow and is identical except that it includes tram.js. Notice how the scroll behaviour does not work as intended (the clicked cell scrolls outside of the viewport):
webflow published link
webflow share link

I was hoping somebody could help me understand why this script is not working nicely with webflow’s tram.js?

2

Well, any link to a section will have a Webflow scroll to section behaviour on click.

To disable that, just paste this code in Page Footer Code

<script>
$('.link-item').click(function() {
   return false; 
});
</script>
3

Sam you Legend!

So simple in the end; thank you!