Function to trigger animation with mouse wheel events

Question

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 <0) {
 slidenum++;
 } else if (delta >0) {
 slidenum = slidenum>0 ? --slidenum : 0;
 }
 if (slidenum > 0) {
 slide1.play()
 } else if (slidenum < 1) {
 slide1.reverse()
 }
 if (slidenum > 1) {
 slide2.play()
 } else if (slidenum < 2) {
 slide2.reverse()
 }
 console.log(slidenum);
}

• codestorm: I'm using greensock lib.
• Sᴀᴍ Onᴇᴌᴀ: what is a timeline in this context? Do you consider slide1 and slide2 as timelines? Those are tweens (i.e. result of calling TweenLite.to()), right?
• codestorm: Yes, slide1 and slide2 are two different timelines.

Answer 1

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 > 0) {
 slide1.play()
} else if (slidenum < 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 >= 1) {
 slide1.play()
} else if (slidenum < 1) {
 slide1.reverse()
}

Or without the else which is redundant in this case.

if (slidenum > 0) {
 slide1.play()
} else {
 slide1.reverse()
}