Search code examples
javascriptsvgzoomingmousewheelgsap

Zooming with mouse wheel -- is there a library that integrates with GSAP?


I used svg-pan-zoom.js to zoom an svg via the mouse wheel. It centers the zoom at the point of the mouse location. But I cannot get it to work with Greensock's javascript library (GSAP). Here is the codepen (which does not use svg-pan-zoom.js). Does anyone know of an svg zoom library that zooms with the mouse and integrates with GSAP?

document.getElementById("svg").addEventListener("wheel", myFunction);
function myFunction() {
    //code to animate the viewbox
}

Solution

  • Scrollmagic integrates really well with GSAP. Here's a demo on their website.

    Also, here's a tutorial from someone using an actual SVG with Scrollmagic and GSAP.