Jump to content
GreenSock

ChronixPsyc

Refresh or delete and create new?

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 all,

 

Does anyone know of anyway I can either refresh or delete and recreate a timeline at all?

 

I've created a duck shooter game and it works quite well, but when you click on the duck, the speed goes extremely slow and the duck doesn't make it all the way to the right before refreshing.

 

I've created a codepen link below:

 

See the Pen dIAyx by anon (@anon) on CodePen

 

It may be something to do with the Math.floor bit as I don't really understand it too well.

 

Thanks in advance!

Link to comment
Share on other sites

The problem comes from the fact that you aren't resetting the duck's right position prior to making new tweens.

Basically you were creating new from() tweens but the duck was only tweening TO the position it was last in when you clicked it. 

 

Try this:

 

function duckFly() {
 
randomNumber();
 
var duckSpeed = Math.floor(Math.random() * 5) + 1,
duckTop = Math.floor(Math.random() * 300) + 2;
 
      TweenLite.set(duck, {top: duckTop, right:-117})
 
 
tl.from(duck, duckSpeed, {right:900, top:duckTop, ease:Linear.easeOut, onComplete:duckFly});
}
  • Like 1
Link to comment
Share on other sites

 

The problem comes from the fact that you aren't resetting the duck's right position prior to making new tweens.

Basically you were creating new from() tweens but the duck was only tweening TO the position it was last in when you clicked it. 

 

Try this:

 

function duckFly() {
 
randomNumber();
 
var duckSpeed = Math.floor(Math.random() * 5) + 1,
duckTop = Math.floor(Math.random() * 300) + 2;
 
      TweenLite.set(duck, {top: duckTop, right:-117})
 
 
tl.from(duck, duckSpeed, {right:900, top:duckTop, ease:Linear.easeOut, onComplete:duckFly});
}

 

 

Amazing!

 

Thank you so much! I worked out that my Math.random() wasn't quite correct either as I had a max and min set but not a proper equation and also the randomNumber() function was now redundant.

 

The updated code is below if anyone else has a similar issue.

 

See the Pen yKmfF by anon (@anon) on CodePen

 

Thanks a lot Carl!

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