I have found many examples of how this might be done and only one used here, seems to be elegant in its function.
I.E., the animation triggers in and then as appropriate reverses out.
However, Once the page is scaled the animations happen out of sync and for some reason, has a double play
example here. Sample
My compositionReady code is as follows
var oldPos, newPos;
//PLAYS FIRST ANIMATION
$(window).scroll(function(){
newPos = $(window).scrollTop();
if(!oldPos){
oldPos = 0;
};
if(newPos >= 50 && oldPos < 50){
//plays the timeline after vertical scrolling 50
sym.getSymbol("bird2").play();
oldPos = newPos;
}else{
//reverse play if vertical scrollbar is less than 50
if(newPos < 49 && newPos < oldPos && oldPos > newPos && oldPos > 49){
sym.getSymbol("bird2").playReverse();
oldPos = newPos;
}
};
})
//PLAYS SECOND ANIMATION
$(window).scroll(function(){
newPos = $(window).scrollTop();
if(!oldPos){
oldPos = 0;
};
if(newPos >= 300 && oldPos < 300){
//plays the timeline after vertical scrolling 300
sym.getSymbol("bird3").play();
oldPos = newPos;
}else{
//reverse play if vertical scrollbar is less than 300
if(newPos < 299 && newPos < oldPos && oldPos > newPos && oldPos > 299){
sym.getSymbol("bird3").playReverse();
oldPos = newPos;
}
};
})
$("body").append($("#Stage_WORX").css("position", "fixed"));