JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

GIF Loop Coder is a desktop tool for creating looping animations using JavaScript code. It is hours of fun to be had, and the [results are always interesting](http://gifloopcoder.tumblr.com/).

With this course, you will learn how to create animations with GLC. GLC is an open source application, built on top of Electron. [You can find it on Github](https://github.com/bit101/gifloopcoder)!

In this video, I'll introduce you to the program, GIF Loop Coder, which allows you to make looping animated gifs (and other types of animations) using JavaScript and HTML5 Canvas. We'll cover the basic UI and syntax of how to add objects to the animation list, animate them and save the result as an animated gif.

GIF Loop Coder - Introduction

In this lesson, we discuss animating using arrays, and how different data types are interpolated while animating.

GIF Loop Coder - Animating with Arrays

This video discusses the default interpolation in GIF Loop Coder, and four distinct ways to change that interpolation to add variety to your animations.

GIF Loop Coder - Interpolation

Animating with arrays is super simple with GIF Loop Coder, but using an animation function can give you the power to create much more complex animations.

GIF Loop Coder - Animation Functions

In this lesson we cover the different methods for defining and animating colors in GIF Loop Coder.

Colors in GIF Loop Coder

This lesson is a quick tour of the predefined shape objects in GIF Loop Coder.

Shape Objects in GIF Loop Coder

In this lesson, we look at how you can build up complex animations by assigning one shape as the parent of another, creating a branching display tree. 

Parenting in GIF Loop Coder

We'll take a look at Single Mode animations and strategies for making this type of animation smoothly loop.

GIF Loop Coder Single Mode

In this lesson, we look at one of the most powerful features in GIF Loop Coder, the phase property, which allows you to let different objects run animations shifted in time.

The Phase Property in GIF Loop Coder

Let's discuss all the different formats that GIF Loop Coder can output animations as. We'll also look at different ways to optimize output file size.

Outputting Animations from GIF Loop Coder

We'll look at how you can access the raw HTML5 Canvas in GIF Loop Coder and use it to draw whatever you want, in addition to the animated shapes that are a core part of GLC.

GIF Loop Coder for Creating Animation

Keith Peters

Course Content