Web Development


Learn Web Animation the Easy Way: An Intro to SVG and GSAP

Create an animated eCard with just JavaScript and SVG in record time

4.77 (415 reviews)


3 hours


Dec 2020

Last Update
Regular Price

Unlimited access to all SkillShare courses

What you will learn

Understand SVG and the benefits of using it today

Embed SVG on a web page and organize SVG elements for web animation

Gain hands-on experience with the GreenSock Animation Platform and how to animate anything with it

Master how to easily breakdown an SVG project into scenes and timelines in GreenSock

Create a complex, fully animated greeting card, step-by-step and ready to share with friends


If you're a front-end developer, UI/UX designer or just a general web animation enthusiast you'll benefit from the techniques taught in this course. We use a project-based approach to introduce you to the SVG graphics format and GreenSock Animation Platform--possibly the most powerful and performant javascript animation library available today.

While building a complex animated greeting card, you'll learn:

• Why SVG is a hot commodity today

• The benefits of using SVG

• About SVG shapes and custom tags

• How to include SVG on a web page

• How to organize SVG elements for web animation

• What the GreenSock Animation Platform is

• Make sense of GreenSock's different bundles and which to use

• The GreenSock API and its six basic tweening functions

• All about timelines and how they work in GreenSock

• How to break down the SVG project into scenes

• How to create catchy, impressive animations piece-by-piece

• How to use timelines to organize your entire animation sequences

• And much more...

All project files with full source code will be made available to you at each step of the animation process. Learn valuable skills that will benefit you through out your career or open up a whole new world of creative expression if you're a hobbyist or enthusiast.


Learn Web Animation the Easy Way: An Intro to SVG and GSAP
Learn Web Animation the Easy Way: An Intro to SVG and GSAP
Learn Web Animation the Easy Way: An Intro to SVG and GSAP
Learn Web Animation the Easy Way: An Intro to SVG and GSAP


Start Here


SVG Basics

An Overview of SVG

SVG Basic Shapes & Primitives

A Few More SVG Features

GreenSock Basics

Introduction to GreenSock

Hands-on GreenSock - Part 1

Hands-on GreenSock - Part 2

Hands-on GreenSock - Part 3

Hands-on GreenSock - Part 4

Animation Project

Project Overview

Project Files & Folder Structure

Animation Project - Step 1

Animation Project - Step 2

Animation Project - Step 3

Animation Project - Final Step


Geordie29 September 2020

Really clear, concise, detailed delivery of main project. Fantastic example to learn from - felt like it covered everything I needed to know. SVG section was a bit to "baby-steps" for me (nearly lost me) • Section two needs to be updated for the new version of GSAP: //OLD TweenMax.to("#logo1", { //do something; }); //NEW gsap.to("#logo1", { //do something; }); Thanks heaps Siggy

ec-ccs9 September 2020

Very good and easy to follow. GSAP is still a big topic and this course is short, so it should be complemented with other courses and projects to really get a full idea of the API. More importantly: for the final project you will have the opportunity to see a professional animator at work, seeing Siggy (the mentor) using the tool to create something.

Torrey25 August 2020

Learning a lot of great tools in this course. I'm up for a job using DCO's and banner ads that relies heavily on GSAP. This course is just what I needed. The GSAP site seems a little updated so I'm not sure if I am using deprecated syntax, but everything so far seems to work fine. Thank you

Aid15 August 2020

Very useful stuff. Never knew anything about SVGs and what a Tween actually was before this. Nice clear tutorial, simple, measured pace. Have recommended to friends.

Ardak14 July 2020

It is great Intro course to web animation. Honestly, this course was enough for me to animate some features of the my future website, like menu button, menu dropdown, social icons and etc. Thank you for the course.

Ashley10 February 2020

This is an excellent course for getting started with GSAP in a practical, follow-along tutorial. Well-explained and fun to take!

Tommaso8 February 2020

Very good! I am new to svg graphics and animations, and this course is very easy to understand and well done. You only need a little bit of JS knowledge. I wish I could also see how you build up the stage images and how you "layer" them in the html code...maybe in the next course? ;) Looking forward to see more courses about svg animations! I suggest this course to every web designer and graphic designer!

Stephen28 January 2020

Really great, clear and not too much waffling or tangents. Could have gone a little bit more in depth on some of the theory behind the functions etc, but overall very concise and very enjoyable learning from this tutor.

Becky2 December 2019

I'm a developer, and haven't played around with these concepts. This was a good pace and I think the project has given me the tools I need work on something I have in mind. It certainly gave me the resources to figure it out.

Christian3 October 2019

Straight forward introduction to animation. Helps you understand how to use GreenSock to achieve practical effects. Exactly what was advertised.

Rob15 June 2019

It set you in no time on the rails with greensock so you can experiment a lot and use it in your own projects. It also gives me a good way to setup a greater animation with master- and child-timelines.

Marioduilio23 May 2019

Very well done! I learned about Greensock which was something I've been wanting to learn for years. I also learned about a cool new way to animate. I highly recommend the course.

Lisa2 April 2019

This is a great course! I have a way better understanding of GSAP, SVG, Timelines, and using Math.random successfully. Thanks!

Angelique1 April 2019

I would really love to see the HTML with the proper GreenSock links. I was not able to see the codePen link.

Angel30 January 2019

In general it's a very good course, it's not difficult and you get a good result in the final project.

Related Courses

After Effects CC: Master Motion Graphics & 2d Flat Animation
After Effects CC: Master Motion Graphics & 2d Flat Animation
Impactful Logo Drop Animation in After Effects 2020 - For Beginner & Intermediate Users
Impactful Logo Drop Animation in After Effects 2020 - For Beginner & Intermediate Users
Make A Loop Animation With A 3D Icons Using Blender
Make A Loop Animation With A 3D Icons Using Blender


Udemy ID


Course created date


Course Indexed date
Course Submitted by