Uncaught TypeError: this.handlers[t][n] is not a function

[dangelion]

Hi
I'm using this super simple code:

  inView('.element')
    .on('enter', console.log("in viewport"))
    .on('exit', el => {
      console.log("out viewport")
      el.style.opacity = 0.5;
    });

When I open the page the console prints immediatly "in viewport", though the .element is out of viewport. Scrolling down, when the .element appears, the console prints:

script.js:18654 Uncaught TypeError: this.handlers[t][n] is not a function
    at t.value (http://localhost:3000/dist/js/script.js:18654:3035)
    at http://localhost:3000/dist/js/script.js:18654:2676
    at Array.forEach (native)
    at t.value (http://localhost:3000/dist/js/script.js:18654:2552)
    at http://localhost:3000/dist/js/script.js:18654:1018
    at Array.forEach (native)
    at http://localhost:3000/dist/js/script.js:18654:993
    at r (http://localhost:3000/dist/js/script.js:18654:3843)
    at b (http://localhost:3000/dist/js/script.js:18654:4367)

The library '/dist/in-view.min.js' is concatenated and minified with Gulp with other libraries in the 'dist/js/script.js' file.

[camwiegert]

@dangelion The issue is that, instead of passing a function, you're passing the result of a function invocation to .on('enter'). In this case, you're passing the result of console.log('in viewport'), which is undefined.

What you need to do instead is this:

 inView('.element')
    .on('enter', el => {
        console.log('in viewport')
    })
    .on('exit', el => {
        console.log('out viewport')
        el.style.opacity = 0.5;
    });

Hope that helps!