reinitiate a tween / onComplete

[Spiv]

Hi,

As this is my very first post: Awesome work, Greensock. Playing around with GSAP makes the sun shine in me (as an ex flash animator) and I wish I had it discovered earlier.

I'm throwing in my first experiment: multiple infinite moving backgrounds at different speed combined with CSS keyframe animation to create cycles.
I have a bit of trouble with the following.

Please have a look at http://goo.gl/1jCPK

My code for the bird:
 

    
    tween = TweenMax.to(bird, 2, {css:{left:"300px", top:"-50px"}, ease:Linear.easeNone});
    tween2 = TweenMax.to(bird, 1, {css:{left:"2000px", top:"-300px"},  ease:Linear.easeNone, onComplete:myFunction});
    function myFunction() {
    	TweenMax.to(bird, 0, {css:{left:"-300px", top:"-50px"}, ease:Linear.easeNone});
    	
    }
    
        
    tween.pause();
    tween2.pause();

	
	bringBtn.onclick = function() {
		
		tween.play();
	}
	
	revBtn.onclick = function() {
		
		tween.reverse();
	}
	
	byeBtn.onclick = function() {
	
		tween2.play();
	}

 

1. Clicking on the "bye bird" button makes the bird fly away. I can't manage to bring it back by clicking "call bird" button. I guess I do something wrong in the onComplete function? I thought bringing it back to the original position after the tween is finished would suffice?

2. It runs pretty smooth on a dual core laptop, but very choppy on iOS devices (and I suppose android as well). Even the latest quadcore ipad shows it choppy. Any tips to optimize this type of animation? I'm testing how far I can go with this engine.

Please note I'm not a great coder, I design and write mainly CSS/HTML and only wade my feet in JS.
So I'm all ears to learn and share problems with others here that might have similar issues.

Thanks a lot!

S
 

[Carl]

Hi and welcome to the GreenSock forums.

 

Great animation you made. Glad to hear you are enjoying GSAP so much and that its helping you make the transition.

 

The problem is that tween has already played and its progress() is 1. Calling tween.play() after it is completed does not make it play from the beginning. 

 

The solution should be:

 

 

 

bringBtn.onclick = function() {
     tween.restart();
}
 

Let us know if that works.

[Spiv]

Hi Carl,

it works with tween.restart() instead of tween.play(). Actually I also did this now for tween2.
Seems restart() is a better option for tween events you want to repeat.

Now I'm gonna try making the ant walk by means of scrolling. I guess I'll soon need to start a new topic

Thanks a lot!