This lesson is a quick tour of the predefined shape objects in GIF Loop Coder. function onGLC(glc) { glc.loop(); // glc.size(400, 400); // glc.setDuration(5); // glc.setFPS(20); glc.setMode('single'); glc.setEasing(false); var list = glc.renderList,…

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. function onGLC(glc) { glc.loop(); // glc.size(400, 400); // glc.setDuration(…

Introducing 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 a…

In this lesson we cover the different methods for defining and animating colors in GIF Loop Coder. function onGLC(glc) { glc.loop(); // glc.size(400, 400); // glc.setDuration(5); // glc.setFPS(20); glc.setMode('single'); glc.setEasing(false); var lis…

This video discusses the default interpolation in GIF Loop Coder, and four distinct ways to change that interpolation to add variety to your animations. Set Mode: glc.setMode('single'); //or glc.setMode('bounce'); Set Easing: glc.setEasing(false); //…

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. function onGLC(glc) { glc.loop(); // glc.size(400, 400); // glc.setDuration(5); // glc.setFPS(20);…

We'll take a look at Single Mode animations and strategies for making this type of animation smoothly loop. There are a number of ways to do this. One is to simply have the object start and end off the screen. function onGLC(glc) { glc.loop(); // glc…

Previous, we animate the item by passing an array to tell the start position and end position. To make thing more interesting, we actually can pass the function instead of array. function onGLC(glc) { glc.loop(); // glc.size(400, 400); // glc.setDura…

In this lesson, we discuss animating using arrays, and how different data types are interpolated while animating. function onGLC(glc) { glc.loop(); // glc.size(400, 400); // glc.setDuration(5); // glc.setFPS(20); // glc.setMode('single'); // glc.setE…

Instead of defining what is design pattern lets define what we mean by design and what we mean by pattern. According to me design is blue print or sketch of something so it can be defined as creation of something in mind. Moving to pattern, we can de…