click on animationend

[Anna]

Hallo,

I''m trying to get two followup clicks with different output running.

First click should trigger the animation.

After the animation has ended, a second click shouldn't trigger the animation again but open aURL.

codepen: 

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

thank you for help!

[Jonathan]

Hello Anna, and Welcome to the GreenSock Forums!

 

Your codepen example was throwing an error due to a undefined variable svg, so i forked it. TweenMax.js was already included in the JS panel, so I removed the script tags since CSSPlugin, AttrPlugin, and TweenLite are included in TweenMax.

 

The animationend event is fired when a CSS animation has completed, using the CSS animation property. But you are using GSAP to animate the svg attribute and CSS style values. So in this case you can add your function to the onComplete callback of your to() tween. This way when the tween has completed the animation it will run your function to bind the new event listener.

 

Working example:

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

 

Keep in mind, that codepen will throw a warning that displays in the browser console: Load denied by X-Frame-Options: http://www.google.com/ does not permit cross-origin framing.  Due to cross-origin, because it displays the codepen previews in an iframe.  

 

Does that help?

[Rodrigo]

Hi,

 

In order to add to Jonathan's great advice you could create a boolean check in the click event handler. This should be false until the tween is completed, so once the onComplete callback is called the boolean changes and in the next click you can navigate to the desired URL, like this:

var svg = document.getElementById("Ebene_1"),
    ellips = document.getElementById("ellips");
    urlBoolean = false;

svg.addEventListener('click', clickfunction, false);
	
function clickfunction()
{
  //check if the animation is completed
  //if the boolean is false animate the element
  if(!urlBoolean)
  {
    TweenLite.to(ellips, 1, {attr:{rx:80},strokeWidth:10,onComplete:allowURL});
  }
  //if the boolean is true navigate to the URL
  else
  {
    window.location = 'http://www.google.com';
  }
}

function allowURL()
{
  urlBoolean = true;
}

Rodrigo.

[Anna]

thank you so much! Incredible forum, incredible answer speed! Works perfectly! And the prevent click addition is very helbful, too.