GSAP Hover Interaction Tip

Feb 15, 2026

At Waveshape, we’re currently building a microinteractions library for Webflow using the new GSAP interactions UI. One of our main priorities is keeping everything as lightweight as possible. The library will include dozens of custom animations and (probably) hundreds of actions, so small decisions quickly add up.

In traditional GSAP setups, the cleanest way to handle hover states is to separate mouse enter and mouse leave into their own timelines. That approach gives you full control over easing and playback in each direction. It also avoids a common issue where an ease-out curve used on hover in makes the hover out feel sluggish if you jsut reverse the same animation.

However, since we're going lightweight, we’re handling both mouse enter and mouse leave within a single interaction through a mouse out reverse of the animation, which causes issues with the sluggish reverse easing.

A small adjustment that seems to work well in practice is increasing the playback speed slightly on the mouse leave trigger (the speed setting is a bit hidden, but you'll find it at the bottom of the trigger settings).

Even bumping it to 1.1x the original speed reduces that dragged feeling and makes the interaction feel more responsive. It's not always perfect, but in most UI contexts it feels right. For us, this small compromise in "perfectness" is worth the reduction in bloat.

Other Posts