Jump to content
GreenSock

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

TimelineMax Auto runs

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,

 

I'm trying to built a penalty shootout game in JavaScript & basic HTML elements.

 

I've run into a problem with a timeline running before the function gets called.

 

Would someone please take a look at my code and let me know where I am going wrong please?

 

I'm also not sure if I am calculating the trigonometry correctly as well.. So any help with that would also help ;-)

 

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

 

Thanks a lot!

Link to comment
Share on other sites

Hello, I tried to go to your codepen...

 

but  in your code pen you might have to use another reference to TweenMax since the console is throwing an error about Tweenmax being undefined in Firefox:

ReferenceError: TimelineMax is not defined
(138 out of range 41)

you can use this script in your JS external source:

http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.1/TweenMax.min.js
Link to comment
Share on other sites

 

Hello, I tried to go to your codepen...

 

but  in your code pen you might have to use another reference to TweenMax since the console is throwing an error about Tweenmax being undefined in Firefox:

ReferenceError: TimelineMax is not defined
(138 out of range 41)

you can use this script in your JS external source:

http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.1/TweenMax.min.js

 

Hi,

 

I've changed the external source the URL above and updated the codepen below:

 

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

 

Thanks!

Link to comment
Share on other sites

Thank you..

 

to be more specific what is the name of the function that is getting called after the fact?

Link to comment
Share on other sites

Thank you..

 

to be more specific what is the name of the function the is getting called after the fact?

 

First is powerBar() which moves the mask up and down and then waits for a click on the background ID. The arrowRotation(result) function is then called to rotate the arrow around a specified origin.

 

Once another click on the background ID has been recognised, the trigonometryCalc(powerResult, arrowDeg, delay) which calculates the trigonometry.

 

Finally, once the trigonometry has been calculated, ballMove() is called and this is where the problem occurs because if you leave the arrow moving for a few second, the ball just ends up on the goal line, without any animation.

 

I've included console.logs of all the trigonometry angles and lengths in case you need to see these.

 

I hope this makes sense

Link to comment
Share on other sites

Just an update, I've removed the timeline and replaced it with just a simple jquery animate.

 

I do have a feeling that I will have to replace this at some point with the TimelineMax as I will probably add in an option to curl the ball.

 

The jQuery is below:

$(football).animate({
			left:ballFinishingPositionX,
			top:ballFinishingPositionY
		}, 500, "linear");
Link to comment
Share on other sites

thanks for the explanation..  try this:

 

See the Pen ekdmb by jonathan (@jonathan) on CodePen

 

i added a special property, paused:true to the new TimelineMax instance:

 

http://api.greensock.com/js/com/greensock/TimelineMax.html
 

paused : Boolean - If true, the timeline will pause itself immediately upon creation (by default, timelines automatically begin playing immediately). If you plan to create a TimelineMax and then populate it later (after one or more frames elapse), it is typically best to set paused:true and then play() after you populate it.

ballTm = new TimelineMax({paused:true}),

and then added a play() within the ballMove()

function ballMove(ballFinishingPositionX, ballFinishingPositionY) {
	ballTm.fromTo(football, 2, {left:342, top:473}, {left:ballFinishingPositionX, top:ballFinishingPositionY, ease:Linear.easeNone});
        // added play(0)
        ballTm.play(0);
}

does that help? :)

  • Like 2
Link to comment
Share on other sites

I've been at this for 6 hours now... God damn! You are my idol now sir!

 

(As you can probably guess, I'm a JavaScript noob..)

 

Thank you so much!

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