Skip to main content
Article

Creating WebGL Effects with CurtainsJS

This article focuses adding WebGL effects to <image> and <video> elements of an already “completed” web page. While there are a few helpful resources out there on this subject (like these two), I hope to help simplify this subject by distilling the process into a few steps: 

  • Create a web page as you normally would.
  • Render pieces that you want to add WebGL effects to with WebGL.
  • Create (or find) the WebGL effects to use.
  • Add event listeners to
Read article “Creating WebGL Effects with CurtainsJS”
Article

An Overview of Scroll Technologies

Scroll-related animations have been used on the web for years. In recent years, they’ve started to become more common, perhaps in part due to devices being higher-performing and thus able to handle more animation. 

There are a number of scroll related technologies out there, so this article’s aim is to provide an overview of them and tools to help choose the one that’s right for you. I’d argue that these technologies can be broken down into two broad categories: ones … Read article “An Overview of Scroll Technologies”

Article

Tips for Writing Animation Code Efficiently

I’ve been coding web animations and helping others do the same for years now. However, I have yet to see a concise list of tips focused on how to efficiently build animations, so here you go!

I will be using the GreenSock Animation Platform (GSAP). It provides a simple, readable API and solves cross-browser inconsistencies so that you can focus on animating. The code and concepts should be understandable even if you’ve never used GSAP. If you’d like to familiarize … Read article “Tips for Writing Animation Code Efficiently”

Article

Animate a Blob of Text with SVG and Text Clipping

I came across this neat little animation in a designer newsletter. Unfortunately, I lost track of the source, so please give a shout out if you recognize it! It’s by Martí Fenosa.

In it, a block of text appears to bleed into view with a swirl of colors, then goes out the same way it came in. It’s a slick effect and one I wanted to recreate in code.… Read article “Animate a Blob of Text with SVG and Text Clipping”

Article

Adding Particle Effects to DOM Elements with Canvas

Let’s take a look at how to make web pages more visually capable by combining the freedom of <canvas></canvas> with HTML elements. Specifically, we will be creating a basic HTML-to-particle effect, but the same technique could be used for many kinds of effects.… Read article “Adding Particle Effects to DOM Elements with Canvas”

Article

Scaling Responsive Animations

Scaling our websites and applications so that they look great on every screen can be difficult. A big portion of that difficulty can be trying to get specific components, particularly ones that have pieces that have to stay a certain size (like animations), to look good regardless of the screen size. In this post, we’ll cover how to help keep our responsive animations sized the way we want them.… Read article “Scaling Responsive Animations”

Article

CSS Animation Tricks: State Jumping, Negative Delays, Animating Origin, and More

I’ve fallen into the habit of creating CSS animations in my free time, inspired by things I come across during the day. To create the animations as I imagine them using as few elements as possible, I’ve found some tricks to make CSS do things you might not know it could do. I’d like to share them with you. … Read article “CSS Animation Tricks: State Jumping, Negative Delays, Animating Origin, and More”

Article

Controlling CSS Animations and Transitions with JavaScript

The following is a guest post by Zach Saucier. Zach wrote to me telling me that, as a frequenter on coding forums like Stack Overflow, he sees the questions come up all the time about controlling CSS animations with JavaScript, and proved it with a bunch of links. I’ve had this on my list to write about for way too long, so I was happy to let Zach dig into it and write up this comprehensive tutorial.… Read article “Controlling CSS Animations and Transitions with JavaScript”