Create a hover zoom interaction powered by GSAP in Webflow
With Webflow's new interactions powered by GSAP, making a hover zoom interaction for cards is easier and more powerful. The new targeting features enable you to target an element within a trigger element to create rich, impactful animations that engage, guide, and delight visitors to your site.
Video transcript
In this video, we'll build a hover zoom interaction in Webflow powered by GSAP. The effect makes an image scale up smoothly when you hover over it — a subtle but polished detail that adds life to a design.
GSAP (GreenSock Animation Platform) gives us precise control over the animation — timing, easing, and the scale values — that goes beyond what CSS transitions alone can offer.
Here's the approach: we'll add a Code Embed to our image element, write a small GSAP script that targets that specific image, and use GSAP's mouseenter and mouseleave events to trigger the zoom in and zoom out.
First, make sure GSAP is loaded on your page. You can add it via a CDN link in your Page Settings under the head code, or use a Code Embed if you only need it on one page.
Then, add a Code Embed inside or adjacent to the element you want to animate. Inside the embed, write a short script that selects your element — using a class or ID — and uses gsap.to() to animate it to a slightly larger scale on hover, then back to normal on mouse leave. Set an ease and duration to taste.
When you preview the page, hovering over the image should produce a smooth, spring-like zoom effect.
This same pattern can be applied to cards, buttons, thumbnails, or any element you want to give a hover response to. Once you understand the basic structure, it's easy to adapt.
