CSS Animations Tutorials
- CSS prefers-reduced-motion Media Query
CSS prefers-reduced-motion Media Query
When I started in the web development industry, media queries were limited --
screenandprintwere the two media queries I was most often using. More than a decade later, media queries have advanced to various screen units, feature checking, and even color... - Create the Google Button Effect with CSS
Create the Google Button Effect with CSS
I always found Google's branding simple but grew to realize that was the beauty in their design; there's something about "just enough" that is the perfect balance between bland and over the top. GMail's design grew old over the years and Google just got around to...
- Simple Image Lazy Load and Fade
Simple Image Lazy Load and Fade
One of the quickest and easiest website performance optimizations is decreasing image loading. That means a variety of things, including minifying images with tools like ImageOptim and TinyPNG, using data URIs and sprites, and lazy loading images. It's a bit jarring when you're lazy loading images and they just...
- GSAP + SVG for Power Users 2: Complex Responsive Animation
GSAP + SVG for Power Users 2: Complex Responsive Animation
This is the second article in a series about the GreenSock Animation API and SVG. This series isn't intended for beginners, but rather a deep dive into some of the more exciting and lesser-known features that one can work with after they've gotten past the initial...
- Crafting a 3D React Carousel
Crafting a 3D React Carousel
There is something in me that is amazed but beautiful 3D interfaces. And it doesn't matter whether they're functional like Gyroscope features menu, technology demonstrators like the amazing periodic table demo from famous or they're artistic representation pushing the limits of...
- Intro to JavaScript Animation
Intro to JavaScript Animation
Despite what many developers believe, CSS-based animation is not the only performant way to animate on the web. There's also JavaScript—and JS has some incredible advantages. By abandoning JavaScript for CSS, like many developers do, we are bloating our stylesheets, sacrificing animation timing control, and forgoing physics-based...
- Reducing Memory Leaks when Working with Animations
Reducing Memory Leaks when Working with Animations
I have been doing a lot of work with Snap.svg recently and you may have already seen an article a while back regarding SVG animations. After the article had been published, I took some time out to review the code I had written and found that...
- Web Animation using JavaScript: Animating Text
- Sara Soueidan’s Favorite CodePen Demos
Sara Soueidan’s Favorite CodePen Demos
A few months ago, Chris Coyier shared his favorite CodePen demos right here on David's blog. A while back David asked me to share some of my favorite pens too, so here are some of the demos that have blown my mind in the past...
- Ana Tudor’s Favorite CodePen Demos
Ana Tudor’s Favorite CodePen Demos
Cocoon I love canvas, I love interactive demos and I don't think I have ever been more impressed by somebody's work than when I discovered what Tiffany Rayside has created on CodePen. So I had to start off with one of her interactive canvas pens, even though...