Jump to content
GreenSock

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

click on animationend

Recommended Posts

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!

Link to comment
Share on other sites

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? :)

  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

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