Yes I used that representation for illustration purposes. I'm supplying values from 0 to 1 and viceversa when scrolling back. This is what I got so far:
var animate = (function(){
// Scene one
var one = function(pct, rwd) {
let tl = new TimelineMax({paused: true});
if (rwd)
tl.reverse(pct);
tl.to('#hand', 2, {opacity: 0})
.set('#ip', {attr:{mask: ""}}, 1.5);
tl.progress(pct);
}
// Scene two
var two = function(pct, fwd){
let tl = new TimelineMax({paused: true});
}
// Scene three
var three = function(pct, fwd){
let tl = new TimelineMax({paused: true});
}
// Scene Four
var four = function(ptc, fwd){
let tl = new TimelineMax({paused: true});
}
var arr = [one, two, three, four];
return arr;
})();
var play = (function(){
// closure scope
let length;
let lastY = null;
let i = 0;
//function called by the event listener
return function(e){
let frame = scene[i].getBoundingClientRect();
let cam = camera[i].getBoundingClientRect();
length = cam.height - window.innerHeight;
// Determine scroll direction
if (lastY < window.pageYOffset) {
if (frame.top >= 0 && frame.bottom <= window.innerHeight) {
// Get camera scroll percentage
let pct = ((cam.top / length) * -1).toFixed(2);
animate[i](pct, 0);
}
else if (frame.bottom < 0) {
i++;
}
}
else {
if (frame.top <= 0 && frame.bottom <= window.innerHeight) {
let pct = ((cam.top / length) * -1).toFixed(2);
animate[i](pct, 1);
}
else if (frame.top > window.innerHeight && (i > 0)) {
i--;
}
}
lastY = window.pageYOffset;
}
})();