I am trying to run Waypoints on a Webflow website. This is the code that I have inserted on the site to load the libraries and run a test to console log something when the element is scrolled into view.

<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/3.0.0/jquery.waypoints.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/3.0.0/shortcuts/inview.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/3.0.0/waypoints.debug.js"></script> 
<script>
var waypoint = new Waypoint({
element: document.getElementById('#title_1'),
handler: function(direction) {
alert('You have scrolled to a thing')
}
})
</script>

Here is a link to the Screenshot of Error

I am not sure what I've done wrong here. I took this code from a CodePen that was working fine correctly. I know that my HTML structure is set up correctly on the site. Any help would be greatly appreciated.