Jump to content
GreenSock

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

reinitiate a tween / onComplete

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

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
 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!

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.
×