CodePen Blog

This is where we post announcements, tips and tricks, new and updated features, fun roundups, new podcast episodes, and more. There's an RSS feed.
📝 Blog Post

Chris’ Corner: Scroll Driven Delight

I’m pretty hot on Scroll-Driven Animations! What a wonderful idea that we can tie @keyframe animations timelines to scroll positions. And I’m sure the creators of it thought long and hard, because the API makes a ton of things possible. It’s not just “how far the entire page has scrolled”, although that’s possible. The progress […]

Read More of the article "Chris’ Corner: Scroll Driven Delight"
Chris Coyier
Co-Founder
📝 Blog Post

Chris’ Corner: More Like Scalable Vector Goodness

I’m going to do an SVG issue here, because I find that technology persistently interesting. It’s a bit of a superpower for front-end developers who know how it works and can leverage it when needed to pull of interesting effects. For example, this compelling line drawing scroll effect is powered by SVG features. There have […]

Read More of the article "Chris’ Corner: More Like Scalable Vector Goodness"
Chris Coyier
Co-Founder
📝 Blog Post

Chris’ Corner: People Be Doing Web Components

Native Web Components are still enjoying something of a moment lately. Lots of chatter, and a good amount of it positive. Other sentiment may be critical, but hopeful. Even more important, we’re seeing people actually use Web Components more and more. Like make them and share them proudly. Here are some recently: Interesting point here: […]

Read More of the article "Chris’ Corner: People Be Doing Web Components"
Chris Coyier
Co-Founder
📝 Blog Post

Chris’ Corner: Switch

The “switch” is a pretty common design pattern on the web. It’s pretty much a checkbox. In fact, under the HTML hood, it really ought to be an <input type=”checkbox”> or perhaps a <select> with just two <option>s (or a third if there is an indeterminate state). But unfortunately, the web doesn’t give us any […]

Read More of the article "Chris’ Corner: Switch"
Chris Coyier
Co-Founder