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.
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:
- Create your GSAP animation timeline for the button or element.
- 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.
href attribute of the button and open the link using methods like
Doing so, you will be able to trigger the animation AND open the link
I´m not sure if it´s worth the progress - but i´ll keep it in mind
P.S. - may good to move the thread to ‘How To’.