Jump to content
Search Community

stopping and starting timeline with input range

maxhumberstone test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

Thanks for the demo.

 

Its a little tough to decipher what is happening in the multiple timelines and how you are trying to control them all. 

It appears that the way things are set up you have multiple timelines that are controlling the same properties of the same object. 

When you adjust your slider you tell some timelines to play and others to reverse. I suspect when that happens tweens are getting overwritten and killed. 

Whenever 2 tweens fight for control over the same properties at the same time the newest tween will win the battle and kill the previous tween. 

If you have one timeline moving the y up and then you tell another timeline to play that moves the y down, the tween in the first timeline will be killed and will never be played again :( This is what overwrite "auto" does. You can set TweenLite.defaultOverwrite = "none" to prevent overwriting but that can have some side effects if you don't understand it completely (not recommended in this case). 

 

I think what will work better for you is to NOT build a bunch of  timelines at the beginnning and then try to play() and then reverse() them.

 

It would be better to just create the tweens you need when you need them like

 if (this.value == 0) {
    var wave = TweenLite.to(waterFill, 0.7, {ease: Linear.easeNone, x: -400, repeat: -1});
    TweenLite.to(waterFill, 1.7, {ease: Sine.easeOut, y: -30,height: 20});
    setTimeout(function() {
      wave.pause();
    }, 3000);
  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...