Need to click twice on a click event to start an animation

[Sean_has_started_coding]

Hello all

My first posting here....!!

 

I am new to GSAP - I come from a design background and I have enjoyed the challenge of learning code.

My ultimate wish is to master GSAP to help with my hand code web banner animations.

 

I am battling with an issue of needing to click twice on a button to start an animation.

My wish is to post my animations on a portfolio site and enable to user to start and then restart my animation.

I have googled this issue but I have not found an easy solution to apply to my simple code.

 

The code works fine in my code pen but to doesn't work my working website.

 

I'd really appreciate any guidance.

 

Regards

Sean

See the Pen MWBwYJZ by HappyGooner (@HappyGooner) on CodePen

[mvaneijgen]

Hi @Sean_has_started_coding welcome to the forum!

 

Have you fixed your issue already? Because to me it seems to work perfectly.

 

When running in to issues you can also console.log('something'); to check what is happening when you click, to make sure what you think should happen, is really happening. 

 

See the Pen YzjXyYm?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[Sean_has_started_coding]

Many thanks for the reply mvaneijgen.

Still have the issue but it is odd that it's fine on my pen.

Will investigate after the holidays and will view the console log to see if helps steer me towards a solution.

Have a great xmas.....

[Sean_has_started_coding]

Hello all

 

Thanks for the replies so far. I still can't find a solution to what I am sure is a simple issue.

Issue is I need to click the Play button twice to start the animation. It does work fine in code pen but when I open the animation in any browser, I need to click the button twice.

When I open the Console, there is two instances of the message '[Five Server] connecting...'

See the code below (which has been cleaned up from my previous code)

See the Pen yLqVLyq by HappyGooner (@HappyGooner) on CodePen

It would be great if someone can shed some light on this issue.

Thank you.

[mvaneijgen]

If it's not on Codepen, something else in your project is the culprit. And it hasn't to do with GSAP.

 

Are you sure everything has loaded on the page when you run the JS? 

 

In theory you can always use .restart() instead of .play() it will do the same, but .restart() always restarts the animation