Function to trigger animation with mouse wheel events I am new in the JavaScript world and I just want to know if I can optimize my function by making it shorter. It already works but I plan to add five timelines to trigger with my slidenum variable. Here is the code :

var slidenum = 0;
var skrollViewport = document.getElementById('wrapper');
skrollViewport.addEventListener('wheel', skrollSlide);

function skrollSlide(event) {
    var delta;
    if (event.wheelDelta) {
        delta = event.wheelDelta;
    } else {
        delta = -1* event.deltaY;
    }
    if (delta &lt;0) {
        slidenum++;
    } else if (delta &gt;0) {
        slidenum = slidenum&gt;0 ? --slidenum : 0;
    }
    if (slidenum &gt; 0) {
        slide1.play()
    } else if (slidenum &lt; 1) {
        slide1.reverse()
    }
    if (slidenum &gt; 1) {
        slide2.play()
    } else if (slidenum &lt; 2) {
        slide2.reverse()
    }
    console.log(slidenum);
}
This:

var delta;
if (event.wheelDelta) {
    delta = event.wheelDelta;
} else {
    delta = -1* event.deltaY;
}


could be simplified to:

var delta = event.wheelDelta ? event.wheelDelta : -event.deltaY;


or even more succinctly:

var delta = event.wheelDelta || - event.deltaY;


For the if/else:

if (slidenum &gt; 0) {
    slide1.play()
} else if (slidenum &lt; 1) {
    slide1.reverse()
}


I personally find your end points take me a while to understand because of the way they overlap. I would find it easier like this:

if (slidenum &gt;= 1) {
    slide1.play()
} else if (slidenum &lt; 1) {
    slide1.reverse()
}


Or without the else which is redundant in this case.

if (slidenum &gt; 0) {
    slide1.play()
} else {
    slide1.reverse()
}