[stopping and starting timeline with input range]

Its ok realised need to use tweenMax!

 

Thanks for the help!

[stopping and starting timeline with input range]

$(".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?

[stopping and starting timeline with input range]

I am trying to create a water fill effect that responds to a input type=range value. 

 

Managed to get it fill up but the timeline is not responding after the first animation. You will see what I mean in the JSFiddle.

 

Any help would be appreciated! 

 

Still new to GSAP animation so excuse any hacky methods.

 

JSFiddle link here.

https://jsfiddle.net/7mLkf5uh/#&togetherjs=bu7OUD9asn