Jump to content
Search Community

click on animationend

Anna test
Moderator Tag

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


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.


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



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
    TweenLite.to(ellips, 1, {attr:{rx:80},strokeWidth:10,onComplete:allowURL});
  //if the boolean is true navigate to the URL
    window.location = 'http://www.google.com';

function allowURL()
  urlBoolean = true;


  • Like 1
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.
  • Create New...