SVG Animations with GreenSock

9 SECTIONS – 2 HOURS OF VIDEO

Learn how to find, create, and manipulate SVG for the web. Then add the awesome JavaScript animation Library GreenSock to bring those SVG’s to life. We will dive into SVG code and explore how to set up your illustrations for animating. Then we will take a look at GreenSock’s animation library and many useful plugins to smoothly animate our SVGs on CodePen.

Intro to SVG and GreenSock Animations

Learn to Make Fun and Fast Animations

Hi my name is Christina Gorton with Design+Code. Today I want to teach you how to animate SVG’s with the JavaScript animation library GreenSock(GSAP). We will start off by looking at SVG code and breaking it down a little so we can better understand how to manipulate it for animation. Then I’ll talk about how to find SVG inspiration, how to export and optimize your SVG’s. Next I’ll show you how to bring those SVGs to life with GSAP. We will use a number of beautiful illustrations and the UI prototype from my CSS layout and animation course in CodePen and add the animations to it. If you don’t have a CodePen account we will briefly talk about how to set one up in just a minute.