So I have multiple morphs running on the same page. Currently they all work great, however the client has asked if the user can control the animation on scroll rather than simply triggering it. Being new to GS I'm a bit lost in this. Here is the code I was able to pull from elsewhere to get the animations working in their current state. How would I modify this to have the animation controlled by the scroll bar both up and down?
var scrollMorph1 = new TimelineLite({paused:true})
.to("#headerBottomMask",1, {morphSVG:"#headerBottomMask2"},0)
.to("#headerBottom01a",1, {morphSVG:"#headerBottom01b"},0)
.to("#headerBottom02a",1, {morphSVG:"#headerBottom02b"},0)
.to("#headerBottom03a",1, {morphSVG:"#headerBottom03b"},0)
.to("#headerBottom04a",1, {morphSVG:"#headerBottom04b"},0)
$(window).scroll(function() {
var scrolled = $(window).scrollTop();
var diff = 20;
if ($('#header h1').length > 0) {
var object1 = $('#header h1');
var topOfRange1 = object1.offset().top + diff;
}
if (scrolled > topOfRange1 ) {
scrollMorph1.play().timeScale(1);
} else {scrollMorph1.reverse().timeScale(1);}
});