addClass and removeClass trigger with Waypoints - html

Question

I am making a website that is horizontal parallax scroller. My intention is to have environmetal effect from dawn to night by moving gradient (div 100vw, 300vh) up and down while changing opacity. I want javascript to trigger desired action when a certain div comes to viewport.
I am using jquery, Waypoints and jInvertScroll.
I get this from console:
<div class="dawndusk"></div> when everything is in the beginning. <div class="dawndusk lettherebenight"></div> when I scroll to #dawn. And nothing changes when I scroll to other divs. Why?
This is my HTML
<div class="dawndusk"></div>
<div class="flex" id="birth">
...content...
</div>
<div class="flex" id="dawn">
...content...
</div>
<div class="flex" id="day">
...content...
</div>
<div class="flex" id="dusk">
...content...
</div>
<div class="flex" id="night">
...content...
</div>
This is my CSS
.dawndusk {
z-index:750;
opacity: .9;
background: #4B79A1;
background: -webkit-linear-gradient(to top, #f6d365 0%, #fda085 50%, #283E51 50%, #0A2342 100%);
background: -olinear-gradient(to top, #f6d365 0%, #fda085 50%, #283E51 50%, #0A2342 100%);
background: linear-gradient(to top, #f6d365 0%, #fda085 30%, #283E51 60%, #0A2342 100%);
width:100vw;
height:300vh;
position:fixed;
}
#birth,
#dawn,
#day,
#dusk,
#night {
position: absolute;
top:0;
}
#birth {
left:0;
}
#dawn {
left:100vw;
}
#day {
left:200vw;
}
#dusk {
left:300vw;
}
#night {
left:400vw;
}
.lettherebebirth,
.lettherebedawn,
.lettherebeday,
.lettherebedusk,
.lettherebenight {
transition: all 4s;
-webkit-transition: all 4s;
}
.lettherebebirth {
opacity: .9;
transform: translateY(0);
}
.lettherebedawn {
opacity: .2;
transform: translateY(-200vh);
}
.lettherebeday {
opacity: 0;
transform: translateY(0);
}
.lettherebedusk {
opacity: .5;
transform: translateY(-200vh);
}
.lettherebenight {
opacity: .8;
transform: translateY(-200vh);
}
Javascript is like this:
$('#birth').waypoint(function(direction) {
if (direction === 'up') {
$('.dawndusk').removeClass('lettherebedawn');
$('.dawndusk').addClass('lettherebebirth');
}
});
$('#dawn').waypoint(function(direction) {
if (direction === 'down') {
$('.dawndusk').removeClass('lettherebebirth');
$('.dawndusk').addClass('lettherebedawn');
}
});
$('#day').waypoint(function(direction) {
if (direction === 'down') {
$('.dawndusk').removeClass('lettherebedawn');
$('.dawndusk').addClass('lettherebeday');
}
});
$('#dusk').waypoint(function(direction) {
if (direction === 'down') {
$('.dawndusk').removeClass('lettherebeday');
$('.dawndusk').addClass('lettherebedusk');
}
});
$('#night').waypoint(function(direction) {
if (direction === 'down') {
$('.dawndusk').removeClass('lettherebedusk');
$('.dawndusk').addClass('lettherebenight');
}
});
How do I get the wanted classes to trigger on and off when I want to?

Answer 1

I figured it out myself.
jInvertscroll mimics horizontal scrolling on vertical scrolls behalf. So though everything seemed ok on screen and on code, the problem was that waypoints triggers were all placed on horizontal axis. It was supposed be on vertical axis.
#birth {
top:0;
}
#dawn {
top:100vw;
}
#day {
top:200vw;
}
#dusk {
top:300vw;
}
#night {
top:400vw;
}