Articles Tagged
animation
What Houdini Means for Animating Transforms
I’ve been playing with CSS transforms for over five years and one thing that has always bugged me was that I couldn’t animate the components of a transform
chain individually. This article is going to explain the problem, the old …
The Red Reveal: Illusions on the Web
In part one of a series of posts about optical illusions on the web, Dan Wilson looks at how to create the “Red Reveal” that he happens to describe like this:
…Growing up, my family played a lot of board
Web Animation Workshops Dates for 2018 Announced
“I’m getting a raise!”
This was my favorite quote from last year’s Web Animation Workshops, as Val and I covered performance, tooling, and creating animations for SVG, CSS, JS and React.
Now we’re gearing up for another round of …
Additive Animation with the Web Animations API
These features have not landed in any stable browsers at the time of writing. However, everything discussed is already in Firefox Nightly by default and key parts are in Chrome Canary (with the Experimental Web Platform Features flag enabled), so …
Animating Border
Transitioning border
for a hover state. Simple, right? You might be unpleasantly surprised.
The challenge is simple: building a button with an expanding border on hover.
This article will focus on genuine CSS tricks that would be easy …
Animating Layouts with the FLIP Technique
User interfaces are most effective when they are intuitive and easily understandable to the user. Animation plays a major role in this – as Nick Babich said, animation brings user interfaces to life. However, adding meaningful transitions and micro-interactions …
Robust React User Interfaces with Finite State Machines
User interfaces can be expressed by two things:
- The state of the UI
- Actions that can change that state
From credit card payment devices and gas pump screens to the software that your company creates, user interfaces react to the …
Emulating CSS Timing Functions with JavaScript
CSS animations and transitions are great! However, while recently toying with an idea, I got really frustrated with the fact that gradients are only animatable in Edge (and IE 10+). Yes, we can do all sorts of tricks with background-position
…
Creating Vue.js Transitions & Animations
My last two projects hurled me into the JAMstack. SPAs, headless content management, static generation… you name it. More importantly, they gave me the opportunity to learn Vue.js. More than “Build a To-Do App” Vue.js, I got to …
Writing Smarter Animation Code
If you’ve ever coded an animation that’s longer than 10 seconds with dozens or even hundreds of choreographed elements, you know how challenging it can be to avoid the dreaded “wall of code”. Worse yet, editing an animation that was …