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

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

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

Update: This lesson is missing the link to the codepen demonstration.  The code can be found here, https://codepen.io/siggy/pen/zvoBoY 

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

Update:  I've learned that for some students the .zip extension gets stripped off the filename after they download the resource. A quick workaround is to rename your file, after its downloaded to include the .zip extension.  Then you'll be able to unzip the files successfully and follow along.

• 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

Update:  I've learned that for some students the .zip extension gets stripped off the filename after they download the resource. A quick workaround is to rename your file, after its downloaded to include the .zip extension.  Then you'll be able to unzip the files successfully and follow along.

Start project by:

• Creating the basic master Timeline

• Clear the stage objects

Update:  I've learned that for some students the .zip extension gets stripped off the filename after they download the resource. A quick workaround is to rename your file, after its downloaded to include the .zip extension.  Then you'll be able to unzip the files successfully and follow along.

Animate the first scene of the project -- 'Enter Floor Vegetation’

Update:  I've learned that for some students the .zip extension gets stripped off the filename after they download the resource. A quick workaround is to rename your file, after its downloaded to include the .zip extension.  Then you'll be able to unzip the files successfully and follow along.

• Animate the second scene of the project -- 'Enter Tree Stuff'

• Use a callback to trigger a timeline that loops infinitely

Update:  I've learned that for some students the .zip extension gets stripped off the filename after they download the resource. A quick workaround is to rename your file, after its downloaded to include the .zip extension.  Then you'll be able to unzip the files successfully and follow along.

• 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