Intro to SVG and GreenSock Animations

CodePen Collection for course

This is the link to the CodePen Collection.

Why this course?

As mentioned in my CSS Layout and Animations course, the human brain is hardwired to pay attention to moving objects. Animation is all over the web. From subtle button transitions to complete story telling online. In this course, I'll show you how to make compelling animations that don't detract from the product but add to a better overall user experience. After looking at how to find or create your own SVG's, we will start with a few simple GreenSock animations to get used to the syntax.

We will use a few different tools in this course. One of the tools we will use is Figma. Figma File

Why use CodePen?

To get started, let's look at setting up a free CodePen profile.

CodePen is an online code editor for designers and developers of any skill, and is particularly empowering for people learning to code. You can start adding code into the editor and see results right away without having to worry about linking to other files or downloading CDN's.

When you visit the CodePen page for the first time you will see a sign up button in several places You could also click Start Coding button here but it will not save your work when you exit the site like it would if you created a free profile. Click the Sign up button and create a profile with one of these options.

After signing up you'll see a list of picked pens. CodePen calls the place where you put your code to be saved a Pen. There are all kinds of Pens on the site and it is definitely worth exploring. You can find code for just about anything, from code art to useful UI. When you have the time I would recommend exploring the site more. But for this course let's go ahead and create our first pen so we can look at the text editor.

CodePen Editor Features

CodePen comes with a built in editor. This is broken down into three sections. One for your HTML, one for CSS, and one for JS.

You can add HTML, CSS or JavaScript preprocessors simply by clicking on the Settings button or the gear button next to each editor.

You can also add in CDN's through settings to experiment with all kinds of frameworks. We will be using the GreenSock framework in another course and this is how we will add it to our CodePen.

What is an SVG

Basic_Shapes

SVG Paths

The shape of a path element is defined by one attribute: d. The "d" attribute contains a series of commands and parameters used by those commands.

Another command is the "Move To" or M. It takes two parameters, a coordinate ' x ' and coordinate ' y ' to move to.

There are three commands that draw lines. The most generic is the "Line To" command, called with L. L takes two parameters—x and y coordinates—and draws a line from the current position to a new position.

There are two abbreviated forms for drawing horizontal and vertical lines. H draws a horizontal line, and V draws a vertical line. Both commands only take one argument since they only move in one direction.