In the following video I demonstrate how we can have a timeline played back, as soon as a specific element scrolls into view:
$(".scroll").scroll(function() {
playIfVisible("highlight");
});
function playIfVisible(name){
var posY = document.getElementById(name).getBoundingClientRect().top;
var winH = $(window).height();
if(posY-winH > 0){
hypeDocument.pauseTimelineNamed(name);
hypeDocument.goToTimeInTimelineNamed(0, name);
} else {
hypeDocument.continueTimelineNamed(name, hypeDocument.kDirectionForward, false);
}
}