CJ GAMMON
I have spent my career creating digital advertising, applications, and websites for top brands like Google and Adobe. I bring creativity and technology together to create amazing experiences.

Scripting SVG in Animate CC


Snap.SVG Animator is a plugin for Animate CC that allows you to design on the timeline and export animated SVG content leveraging the Snap.svg javascript library. If you haven't heard about Snap.SVG Animator, the plugin I made for Adobe Animate CC (formerly Flash). Be sure to check out the original blog post I wrote. The latest version supports scripting both inside of the actions panel and by exporting movieclips from your library and dynamically adding and scripting them.

Read more...

Masking in GLSL


WebGL is complicated. Libraries like Three.js have made it more approachable but to do advanced effects you still need to understand the inner workings of WebGL, this includes GLSL shaders. Shaders are small programs that run on the GPU and they consist of two types, vertex shaders which draw the geometry and fragment shaders which draw the colors to present the final output.

Read more...

Masking in Canvas


Because the canvas requires manual drawing through scripting we need to leverage the 2d canvas API, through the canvas’ 2d context.

Read more...

Masking in SVG


Masking is really powerful in SVG in fact SVG has it's own mask element specific to this purpose.

Read more...

Masking in CSS


As far as CSS features go this is still relatively new. Because of this, support can be spotty. So let’s check out caniuse.com. Caniuse is a website created by a friend of mine Alexis Diveria, that shows you what features are supported on which browser versions.

Read more...

Masking in Design Tools


Before digital imaging similar effects to masking could be achieved through double exposure, where film is exposed to multiple negatives or shapes which combine the visible portion of the photographs. In digital media this uses the pixel values of one image to manipulate the transparency of the other.

Read more...

Beyond Parallax


This is my last episode in my series on parallax. I’m going to go through one quick demo of how we can trigger events on items based on their position in the viewport.

Read more...

Mouse Parallax


In the fifth installment of my Parallax deep dive, I discuss how to use mouse movement to apply a parallax effect.

Read more...

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...