Scrolling on a Path


In the fourth installment of my Parallax deep dive, I discuss one technique to animate elements along a complex path.

Read more...

Advanced Parallax


In the third installment of my Parallax deep dive, I go into how to implement more advanced parallax on elements that are further down the page.

Read more...

Basic Parallax

In the second installment of my Parallax deep dive, I go into how to implement basic parallax on the web. I also discuss some other things to consider when implementing parallax.

Read more...

Parallax Deep Dive

Welcome to the first part of my deep dive into parallax. In this part we’re going to talk about what parallax is, how it relates to the web, and whether it’s just a fad.

Read more...

New Site

Recently I redesigned my website (cjgammon.com). Personal sites are kind of a constant background project for me and a great way to keep exploring and learning. I like to keep it clean with some animation and effects. One of these effects is a subtle WebGL background animation using white and off-white semi-transparent beams. I think this keeps the site clean while adding some visual interest without too much noise.

Read more...

Script Analog Game Design with SVG

I have a great passion for games of all kinds. Since I was a kid board games were always something I enjoyed and I even would sketch out and make up my own out of cardboard. So as my kids get older and we start playing games together I thought it would be fun to design our own. To make this easier I made some code snippets that are tools and templates for making various games using SVG.

Read more...

SVG Calendar

Happy New Year! I like to make a calendar for our family each year and doing the layout in illustrator can be rather tedious. So last year I decided to write some code to do it in SVG utilizing Snap.svg. I added a vector illustration noting some of the vacations we had planned for the year.

Read more...

Tiny Javascript Libraries

I used to do a lot of flash banner ads. Banner ads have tight requirements around file size so as not to bloat the hosting page's download. With banner ads migrating to HTML this is even more of an issue with often lack of compression. Jack Doyle of Greensock wrote a great article talking about these problems and possible solutions.

Often making these banner ads in HTML we're limited in what libraries we can use because of their file size. However after looking into many of the libraries I use and how I use them, only a fraction of them are necessary for general use. So I started looking at my rendering libraries (Snap.svg, Pixi.js). I then took a quick stab at rebuilding them with a focus on just drawing and moving objects, nothing else, to focus on small file size. So I started making them:

Read more...

Animate SVG with the Flash Timeline

Here's an introduction video to Snap.SVG Animator, allowing you to publish animated SVG from the Flash Animation tool.

Scalable Vector Graphics (SVG) is a powerful tool in the web developer's arsenal. But web creators have been rather limited by how they can create and manipulate this content. Vector tools like Adobe Illustrator have been able to export SVG for a long time but animating SVG content has been limeted to javascript libraries used by developers. Great designers, animators and motion graphics artists have long relied on timeline based animation tools to create dynamic rich animations.

Read more...

Custom Filters with Pixi.js using GLSL Shaders

NOTE: This applies to Pixi v3

Pixi.js is Mat Groves' lightning fast 2D rendering engine for the web utilizing WebGL or 2D Canvas. When used with WebGL it supports filters, which are basically a simple way to leverage specific GLSL shaders. We can even write our own filters for Pixi.js using GLSL and javascript.

To create your own GLSL filter download the source on github and follow the instructions to build, running 'npm install' and then 'gulp' from the command line. All the filters live in the 'src/filters/' directory. To create your own filter you'll need to add a new directory for your filter name which will include at minimum two files. First, the javascript file that contains the browserify module for your filter. Second, the glsl fragment shader with the suffix '.frag'.

Below is an example of a custom filter module I used for Signed Distance Fields, a way to visually vectorize specially created raster images. I'll walk through the different parts of the code.

Read more...