Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
maxhumberstone

stopping and starting timeline with input range

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

Share this post


Link to post
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

Share this post


Link to post
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?

Share this post


Link to post
Share on other sites

Yes, you are exactly right! Sorry for not catching that sooner.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×