Creative Coding with SVGs
zuubaDigital

Greensock Animation Platform (GSAP)

codepen practice page

Intro

creative coding withSVGszuubaDigital

GSAP (GreenSock Animation Platform) is a powerful JavaScript library used for creating high-performance animations that work in all major browsers. It allows developers to animate CSS properties, SVG, canvas, and more with great control and precision. GSAP is known for its speed, reliability, and ease of use, making it a popular choice for both simple and complex animations in web development.

An in depth exporation of GSAP could be it's own course, so we're just going to focus on some of the many ways GSAP can be used to animate SVG elements.

GSAP methods

We'll learn about the three main gsap methods, gsap.to(), gsap.from(), and gsap.fromTo().

Timelines

The most powerful tool in the GSAP library, timelines allow you to chain individual tweens together to create complex animation sequences.

Playback control

The GSAP library gives you the ability to control your tweens once created, including the ability to play, pause, reverse and resume your animations

Animating object properties

GSAP's ability to tween numeric object properties gives you the ability to manipulate SVG elements in very unique and powerful ways.