$(".water-slider").on("change", function(){
console.log(this.value);
if (this.value == 0) {
var waveFull = TweenLite.to(waterFill, 0.7, {ease: Linear.easeNone, x: -400, repeat: -1});
TweenLite.to(waterFill, 1.7, {ease: Sine.easeOut, y: -120,height: 160});
setTimeout(function() {
waveFull.pause();
}, 3000);
} else if (this.value == 1){
var waveHalf = TweenLite.to(waterFill, 0.7, {ease: Linear.easeNone, x: -400, repeat: -1});
TweenLite.to(waterFill, 1.7, {ease: Sine.easeOut, y: -60,height: 90});
setTimeout(function() {
waveHalf.pause();
}, 3000);
} else {
var wave = TweenLite.to(waterFill, 0.7, {ease: Linear.easeNone, x: -400, repeat: -1});
TweenLite.to(waterFill, 1.7, {ease: Sine.easeOut, y: 0,height: 20});
setTimeout(function() {
wave.pause();
}, 3000);
}
});
Thanks Carl!! This allows the water graphic to move up and down but the repeat on the wave animation is not working. ie it moves x:-400 but does not repeat.
Any ideas here?