maxhumberstone

Its ok realised need to use tweenMax! Thanks for the help!

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

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