Learn Web Animation the Easy Way: An Intro to SVG and GSAP
4.6 (23 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.
115 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learn Web Animation the Easy Way: An Intro to SVG and GSAP to your Wishlist.

Add to Wishlist

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 (23 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.
115 students enrolled
Created by Siggy Works
Last updated 10/2015
English
Price: $50
30-Day Money-Back Guarantee
Includes:
  • 3 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?
What Will I 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
View Curriculum
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
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.

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
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 15 Lectures Collapse All 15 Lectures 03:10:50
+
Start Here
1 Lecture 02:08
Take a first look at the animated greeting card you will be creating in this course.
Preview 02:08
+
SVG Basics
3 Lectures 46:42

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
Preview 10:42

Learn the basic SVG shapes & primitives:

  • Rect
  • Circle
  • Line
  • Polyline
  • Polygon
  • Path
SVG Basic Shapes & Primitives
14:28

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
A Few More SVG Features
21:32
+
GreenSock Basics
5 Lectures 54:08

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
Introduction to GreenSock
06:57

  • Learn basic GreenSock API patterns
  • Learn the .to, .from, and .fromTo functions
  • Learn about easing functions and how to use GreenSock's Ease-Visualizer
Hands-on GreenSock - Part 1
14:54

Learn how to:

  • Animate several objects at once
  • Use the .staggerTo, .staggerFrom, and .staggerFromTo functions
Hands-on GreenSock - Part 2
09:36

Learn about:

  • Timelines and how to use them
  • Nesting timelines
  • Timeline labels and offsets
Hands-on GreenSock - Part 3
10:26

Learn about Callbacks and Callback Parameters
Hands-on GreenSock - Part 4
12:15
+
Animation Project
6 Lectures 01:27:52
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.
Project Overview
04:16

  • 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
Project Files & Folder Structure
10:08

Start project by:

  • Creating the basic master Timeline
  • Clear the stage objects
Animation Project - Step 1
13:44

Animate the first scene of the project -- 'Enter Floor Vegetation’
Animation Project - Step 2
11:03

  • Animate the second scene of the project -- 'Enter Tree Stuff'
  • Use a callback to trigger a timeline that loops infinitely
Animation Project - Step 3
24:36

  • 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
Animation Project - Final Step
24:05
About the Instructor
Siggy Works
4.6 Average rating
23 Reviews
115 Students
1 Course
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.