Intro to SVG and GreenSock Animations
Add to favorites
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.
Purchase includes access to 50+ courses, 320+ premium tutorials, 300+ hours of videos, source files and certificates.
Templates and source code
Download source files
Download the videos and assets to refer and learn offline without interuption.
Design template
Source code for all sections
Video files, ePub and subtitles
Browse all downloads
1
Intro to SVG and GreenSock Animations
Learn to Make Fun and Fast Animations
10:28
2
How to Create an SVG
Finding, creating, or manipulating SVG for animating
17:29
3
Getting Started with GreenSock
Exploring TweenMax
12:49
4
Timing Functions and Easing
Create Custom Animations with GreenSock's Built in Eases
6:19
5
Creating Complex Animations
Utilizing GreenSock's TimeLineMax
10:20
6
MorphSVG Plugin
Smooth Animations Between Shapes
11:10
7
DrawSVG Plugin
Smoothly Reveal and Hide Strokes
18:01
8
Animating Our UI
Bringing it All Together
16:49
9
More GreenSock Plugins
More Animation Choices with GreenSock Plugins
12:38
Meet the instructor
We all try to be consistent with our way of teaching step-by-step, providing source files and prioritizing design in our courses.
Christina Gorton
Front-end Developer and Instructor at Design+Code
Christina is a self-taught developer who has been working in the industry for a few years. She is a creative coder who likes to turn code into art. She has spent the last few years focused on front-end developer and animations.
2 courses - 7 hours
SVG Animations with GreenSock
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.
2 hrs
CSS Layout and Animations
Build out a UI prototype in CodePen using CSS Grid and Flexbox. Learn how to bring life to your UI by adding CSS transforms and transformations. We will dive even more in to CSS animations with the CSS animation property and keyframes rule. We’ll wrap it all up by making our prototype responsive and checking out even more cool features on CodePen.
5 hrs
