Tagged “animations”
-
Additive Animations in CSS
The Web Animations API allows us to have multiple animations affect a single property simultaenously, but keep it in check.
-
Pseudo-elements in the Web Animations API
Now you can animate pseudo-element content with the Web Animations API.
-
CSS + the Web Animations API
New features in the Web Animations API allow us to interact with CSS Animations and Transitions.
-
When 255 × 0 does not Equal Zero
A discussion around blend modes in different color spaces, and where their math happens on the web
-
How They Fit Together: Transform, Translate, Rotate, Scale, and Offset
How the transform property, the independent transform properties, and CSS Motion Path are applied together
-
Get Moving (or not) with CSS Motion Path
Now in more browsers, CSS Motion Path is ready to be explored.
-
Animating a Hue around the Color Wheel with Houdini
How to get a true HSL color wheel color rotation with Houdini. Or Huedini if you will...
-
3D Glasses with Perspective Origin
Exploring how we can use duplicated 3D Transforms, blend modes, and slightly offset perspective origins to create anaglyphs ready for use with classic red/cyan 3D Glasses.
-
Jumps: The New Steps() in Web Animation
There are four new ways to step through an animation via the steps() timing function in Firefox 65.
-
Clip Paths Know No Bounds
24 ways #20: Going beyond the expected with CSS Shapes and Clip Paths
-
Animation at Work: September 2018 Edition
I was the Guest Editor for the Animation at Work newsletter for September (formerly Web Animation Weekly), and here are the links I shared.
-
Morphing Images with Lenticular Printing: Illusions on the Web Part 4
Exploring how we can create an effect akin to lenticular printing, where a card morphs into a different image as you tilt it.
-
The Stroboscopic Effect: Illusions on the Web Part 3
What we can learn from Zoetropes, Phénakistiscopes, spinning Tops, and other classic toys about frame rates and stroboscopic effects on the web.
-
CSS Motion Path beyond the Big Three Properties
While CSS Motion Path is still young, it has evolved a lot in the last three years... and new aspects are available to start experimenting.
-
A Houdini Quickstart: registerProperty
Houdini is becoming a technology option you can actually try and experiment with, not just hear about for the future.
-
Barrier Grid Animation: Illusions on the Web Part 2
Using gradients, blend modes, CSS variables, and more to recreate an animation technique that has roots in the 19th Century.
-
The Red Reveal: Illusions on the Web Part 1
Using streaming video, blend modes, CSS variables, and more to recreate a classic optical trick.
-
Additive Animation with the Web Animations API
CSS-Tricks: Using the composite properties (and more) of the Web Animations API to update already running animations.
-
3 Ways to Use Independent Transform Properties
I figure there are three main ways we can treat transform functions independently. This covers their basics and viability.
-
Animating Single Div Art
Showing how CSS Variables can be used to animate... in the context of a 'Single Div' illustration.
-
Scrubbing via the Web Animations API
Going back to my blogging-about-the-web-animations-api roots and creating a basic visual timeline.
-
Making Custom Properties (CSS Variables) More Dynamic
Discussing how CSS Variables derive real power from combining with other facets of CSS.
-
Individualizing CSS Properties with CSS Variables
A followup on how CSS Variables bring a new level of control over properties that support multiple values at a time.
-
A Trick: Individual CSS Transform Functions
The difficulty with managing multiple transform functions in a single transform property forever resolved (kinda). Here's how to (almost) get independent transform properties today.
-
A Different CSS Motion Path
... wherein I write about how I had envisioned CSS Motion Path working when I first heard about it.
-
When to Use the Web Animations API
CSS already does a lot for animation... so when might you want to use the Web Animations API over it?
-
Promises in Web Animations
Learning about the Web Animations API and wondering what these Promises are in the spec? Here's a little intro to some basics.
-
Web Animations API Tutorial Conclusion
Concluding and summarizing the introductory series.
-
Web Animations API Tutorial Part 5: The Loveable Motion Path
All about animating along a path in Part 5 of the Web Animations API series.
-
Web Animations API Tutorial Part 4: GroupEffects & SequenceEffects
Focusing on the polyfill's support of GroupEffects in Part 4 in the Web Animations API series.
-
Web Animations API Tutorial Part 3: Multiple Animations
Part 3 in the Web Animations API series looking at some advanced usage.
-
Web Animations API Tutorial Part 2: The Animation & Timeline Controls
The second part in the Web Animations API series exploring timeline controls.
-
Web Animations API Tutorial Part 1: Creating a Basic Animation
The first official article in a series highlighting the features of the Web Animations API... starting with how to create a basic animation.
-
Let's Talk about the Web Animations API
My hope is to start a series of posts highlighting the features of the Web Animations API that are already in browsers (and the polyfill) now, exploring why we want this API, and figuring out the nuances.
See all tags.