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.6 (20 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
103 students enrolled
Take This Course
  • Lectures 15
  • Length 3 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 10/2015 English

Course Description

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.

What are the requirements?

  • Students should have a good understanding of HTML, CSS & JavaScript
  • Students will need a text editor to follow along with the coding videos
  • Students will need someway of running the supporting files on localhost server and browser

What am I going to get from this course?

  • 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

Who is the target audience?

  • Some experience with HTML/CSS/Javascript is needed
  • No SVG knowledge is needed or expected
  • Anyone with an interest in web development and animation will benefit from the skills taught in this course

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Start Here
Take a first look at the animated greeting card you will be creating in this course.
Section 2: SVG Basics

Learn the benefits of using SVG on the web

  • Compare Raster vs. SVG images (Scalability)
  • Get familiar with the SVG format and syntax (you already know it ...sort of!)
  • Dynamically manipulate SVG content

Learn the basic SVG shapes & primitives:

  • Rect
  • Circle
  • Line
  • Polyline
  • Polygon
  • Path

Here you learn about three very powerful (and very cool) SVG features that we use in the animation project:

  • SVG groups & the 'g' tag
  • Clipping Paths and how to use them
  • The difference between Viewport and Viewbox
Section 3: GreenSock Basics

Get introduced to the powerful GreenSock Animation Platform.

  • What GreenSock does
  • What its used for and who uses it
  • Understand its different bundles and how to include them in your project
  • Learn basic GreenSock API patterns
  • Learn the .to, .from, and .fromTo functions
  • Learn about easing functions and how to use GreenSock's Ease-Visualizer

Learn how to:

  • Animate several objects at once
  • Use the .staggerTo, .staggerFrom, and .staggerFromTo functions

Learn about:

  • Timelines and how to use them
  • Nesting timelines
  • Timeline labels and offsets
Learn about Callbacks and Callback Parameters
Section 4: Animation Project
Finally, we start bringing all your knowledge, thus far, together. We start by reviewing the animated greeting card you will be creating and breaking down the individual scenes.
  • First, download your project files (tutorial_starter.zip)
  • Then we get familiar with the files and folder structure to see how it all fits together

Start project by:

  • Creating the basic master Timeline
  • Clear the stage objects
Animate the first scene of the project -- 'Enter Floor Vegetation’
  • Animate the second scene of the project -- 'Enter Tree Stuff'
  • Use a callback to trigger a timeline that loops infinitely
  • Animate the third and last scene of the project -- 'Enter the Text Greetings'
  • Create infinite loops by using callbacks recursively
  • Learn how to simulate randomness in your loops

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Siggy Works, Javascript Developer/SVG Enthusiast/Cartoonist

Short Version

Siggy, as friends and enemies call him, is a FullStack JavaScript Developer with over 15 years of web development experience. At work he also happens to be the developer who can also draw, so inevitably always gets handed the dry-erase marker during design sessions.

The Whole Nine

Siggy was born many moons ago as an artist, got in trouble for drawing cartoons in class, compensated by taking way too many math classes, then somehow managed to shoe-horn a computer science degree in between marathon sessions of black-jack. Then he discovered Flash, fell in love with Flash, made lots of noise and cash with Flash (apparently ad agencies love[d] it), got bored, read Bruce Mau's Incomplete Manifesto, wandered the earth like Kane for a few years while attempting to grow a beard. Shaved. Mourned the death of his dearly beloved Flash. Learned who the hell Douglas Crockford was and marveled at his kung-fu. Contemplated deeply. Very deeply. Swallowed his pride and embraced the long-scorned web maiden that is JavaScript! ...but kept his sketchbook close by.

Ready to start learning?
Take This Course