Click animation collides with link / href (GSAP)

Bug Reports
1

Hi.

Using a click animation on a button or similar negates the link function / target. Is this a normal behaviour and is there a simple way for a workaround?

Example : All buttons with a internal link should use a little fade / scale animation after click - the animation works well but the final link won´t.

2

When using GSAP’s Click Trigger to animate an element, the default behavior is to execute event.preventDefault(), which stops the native actions, such as opening a link. This is expected behavior because we need to intercept the original click event to perform its animation. Otherwise the link would open directly and not care about it.

To work around this and still be able to open the link after the animation, you can follow these steps:

  1. Create your GSAP animation timeline for the button or element.
  2. Instead of using the “Timeline” Click event trigger, you can create a new “Click” event listener in the “Events” tab and toggle “Prevent Default” to ON. As action, use “GSAP Timeline” and fire the timeline you’ve created before.
  3. Then, use an additional action “JavaScript” to get the URL from the href attribute of the button and open the link using methods like window.location.href.

Doing so, you will be able to trigger the animation AND open the link :slight_smile:

3

I´m not sure if it´s worth the progress - but i´ll keep it in mind :slight_smile:

Thank You!

P.S. - may good to move the thread to ‘How To’.