Animated pride flags
If you ever wanted to make a cool, animated flag from scratch on the web, Josh has you covered. But the article is also full of clever tricks for animation in […]
Archives
WikiFlix
A Netflix-inspired UI for public domain films, animations, shorts, and similar media that the Wikimedia project has archived and catalogued in some way. Contains some real classics, including much of […]
Animation versus physics
A beautiful and extremely clever animation that takes you on a journey through the major theories and breakthroughs in physics, with an excellent score and an ultimate twist that makes me desperately […]
Using CSS transitions on auto dimensions
A selection of possible workarounds for animating CSS values with auto keywords (e.g. height, width, etc.). Not a huge fan of the Flexbox option, but the max-height trick is a very useful one to […]
Animating the height of content using CSS grid
A useful trick for animating the height of a specific piece of content. You cannot transform a height in CSS to the auto keyword; you have to provide a fixed value, which is obviously suboptimal in […]
The Trick to Animating Grid Columns
Animating a grid element provides a lot of potential for fancy UIs and interesting interactions, but it's not immediately obvious when searching online how it needs to work and what the limitations are.
Holograms, light-leaks, & CSS-only shaders
Robb has come out with some very cool ideas over the years, but wow, seeing CSS-only specular highlighting and holograms is such a neat trick 🤯 I immediately want to co-opt some of this for the […]
The last tyrant
A beautifully animated and incredibly well-scored short film about the K/T extinction, and the legacy it left. Incredibly, this turns out to be the final in a series of animated […]
GSAP video export
A handy little tool for exporting GreenSock animations as videos, with a wealth of customisation options. Perfect for sharing animation work on social media or dropping examples into case studies […]
Mastering SVG Animation
For the past couple of weeks I've been lucky enough to take part in Cassie Evans' latest SVG workshop (the first truly exceptional perk of the "new" career 🤩). The workshop was split into five […]
An interactive guide to CSS keyframes
A wonderful overview of how to use keyframe animation in CSS, including some very useful tips on animation state and creating meaningful animation APIs using custom properties and CSS math […]
The world of CSS transforms
If you're new to (or unsure of) CSS transforms at all, I can't think of a better explanatory introduction than […]
Floaters
"RC5-01 this is RC5-01" 😂 There's nothing specifically science fiction about this short, and that's what makes it great. Simple animation, a timeless plot, and excellent voice acting. As io9 put […]
Astartes: Warhammer 40K short
It's a few years old, but I was blown away by Astartes. Sure, the lore is a bit dense so I didn't fully know what was going on, but the story was well crafted enough that it kept me hooked […]
An interactive guide to CSS transitions
Once again, Josh has put together an excellent introductory tutorial to a subject that is still packed with useful tips for even the most advanced user; in this case, CSS […]
Creating textures with SVG filters
A fantastic overview of the feTurbulence SVG filter, including interactive examples of all the relevant attributes, how they can be combined, and some of the cool things you can (glitch buttons, […]
Animated Content Placeholders
What do you do when a website has loaded but the content is still being fetched from an API? One answer is to fill the page with animated placeholders, creating a skeleton of what the user can expect, with a dash of CSS animation to let them know that something's still going on behind the scenes.
The making of Netlify's million devs animated website
Netlify's microsite celebrating their millionth user is a brilliant experiment, so it's great to see them immediately posting a "making of" article on CSS Tricks. It's a beautifully rendered SVG […]