Thursday, April 15, 2016

Animation Challenge!

1. Make the ball bounce off the walls
2. Make the car drive.
3. Draw a diving board and water below USING ONLY CSS and make the guy dive in.

In-Class Final Project Work: all elements due by start of next class!

Tuesday, April 12, 2016

Animate an Element!

Play with animating one of your elements in JSFiddle. Use it as an opportunity to see how you will animate an element. For example, if you have a car that will drive, make its wheels spin.

In-Class Final Project Work: half of remaining elements (75% of total) due by start of next class!

Thursday, April 7, 2016

Animation Challenge!

Using this: as your basis, you and a partner have 45 minutes to make the best animation in class.

In-Class Final Project Work: 50% of elements due by start of next class!

Tuesday, April 5, 2016

Finishing Speaking Animation from Last Week

Deconstructing a Great Example

In-Class Final Project Work Begins! "Script" due by start of next class.

Thursday, March 31, 2016


Tuesday, March 29, 2016

Going Further with Articulation

JSFiddle Start

Tuesday, March 22 & Thursday, March 24, 2016


Thursday, March 17, 2016

Student Evaluation of Instructor & Course

Doing more with audio

Tuesday, March 15, 2016

Scrolling Background Images (JSFiddle example)
HTML5 Audio
Sound we'll use (or find your own):

Thursday, March 10, 2016

Group project, make a movie!

Tuesday, March 8, 2016


Make a Movie

JSFiddle 1 JSFiddle 2

Thursday, March 3, 2016


Make a Movie


Tuesday, March 1, 2016

Test Review

1. SVG stands for Scalable Vector Graphics

2. Be able to point out what every element in the following code does:

<svg height="210" width="500"> <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" /> </svg>

3. Be able to draw a circle, a box, and a triangle with CSS

#box {
width: 100px;
height: 100px;
background: red;

#circle {
width: 100px;
height: 100px;
background: red;
border-radius: 100%;

#triangleup {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;

#triangledown {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;

#triangleright {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;

#triangleleft {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid blue;

4. Understand that a CSS Animation is broken into two parts: the Keyframes, and then calling the animation within an element

@keyframes spinner {
from {
transform: rotate(0deg);
to {
transform: rotate(360deg);

#spin {
animation: spinner 2s ease-in-out .5s infinite alternate;

OR, if we want more than just two steps in the animation:

@keyframes spinner {
0% {
transform: rotate(0deg);
50% {
opacity: 50%;
100% {
transform: rotate(360deg);

#spin {
animation: spinner 2s ease-in-out .5s infinite alternate;

5. Be able to explain how to make a sprite sheet work

In the above example, we see

Now Let's Practice!

Thursday, February 25, 2016


Tuesday, February 23, 2016

Using Sprite Sheets

Thursday, February 18, 2016

Characters on a Sprite Sheet

Tuesday, February 16, 2016

Javascript KeyCodes

Thursday, February 11, 2016

Articulating Movements

The idea of having articulated movements is basically to animate separate elements to keep them in sync. We'll start by doing this with css shapes. Then, we'll arrange them into position by using the CSS "position" command. Finally, we can wrap all of the separate elements into a "parent" div, which can make all of the elements move together.

Tuesday, February 9, 2016

Using Loaders and Pre-loading a Website

Step-by-step examples

Thursday, February 4, 2016

Animated GIFs with Photoshop

The Basics:

Tuesday, February 2, 2016

SVGs (Scalable Vector Graphics)

Illustrator to the Web

This SVG image is only 332 bytes of data.
How to save an Illustrator file to SVG

Transforming an SVG with CSS

Transitions & Animations
Example (transition)
Example (animation)

Shapes with CSS (instead of CSS)

Shapes of CSS

Thursday, January 28, 2016

SVGs (Scalable Vector Graphics)

What can be drawn with SVGs?

SVG Tutorial

Google Logo code via Gizmodo [src]
Tweak it at JSFiddle

SVG Reference Guide