Tag Archives: GSAP

GSAP + SVG for Power Users 2: Complex Responsive Animation


via GSAP + SVG for Power Users 2: Complex Responsive Animation.

This is the second article in a series about the GreenSock Animation API and SVG. This series isn’t intended for beginners, but rather a deep dive into some of the more exciting and lesser-known features that one can work with after they’ve gotten past the initial introduction. The first article was about Motion Along a Path. Today we’ll briefly explore some new GSAP features, and then go further and create a responsive complex animation from start to finish.

Animating SVG with GSAP


via GreenSock | Animating SVG with GSAP.

When it comes to animation, SVG and GSAP go together like peanut butter and jelly. Chocolate and strawberries. Bacon and…anything. SVG offers the sweet taste of tiny file size plus excellent browser support and the ability to scale graphics infinitely without degradation. They’re perfect for building a rich, responsive UI (which includes animation, of course).

However, just because every major browser offers excellent support for displaying SVG graphics doesn’t mean that animating them is easy or consistent. Each browser has its own quirks and implementations of the SVG spec, causing quite a few challenges for animators. For example, some browsers don’t support CSS animations on SVG elements. Some don’t recognize CSS transforms (rotation, scale, etc.), and implementation of transform-origin is a mess.

Don’t worry; GSAP smooths out the rough spots and harmonizes behavior across browsers for you. There are quite a few unique features that GSAP offers specifically for SVG animators. Below is a list of common challenges along with GSAP solutions. This page is intended to be a go-to resource for anyone animating SVG with GSAP.

Before moving on, make sure you download the latest GSAP.