— Dec 24, 2023 . 4 min read
An Interactive Guide to Flexbox
Flexbox is a remarkably flexible layout mode. When we understand how it works, we can build responsive designs that rearrange themselves as needed.
Web designers sometimes believe that animating in CSS is more difficult than animating in JavaScript. While CSS animation does have some limitations, most of the time it's more capable than we give it credit for! Not to mention, typically more performant.
Coupled with a touch of JavaScript, CSS animations and transitions are able to accomplish hardware-accelerated animations and interactions more efficiently than most JavaScript libraries. Let's jump straight in!
Manipulation CSS Transitions
There are countless questions on coding forums related to triggering and pausing an element's transition. The solution is actually quite simple using JavaScript.
To trigger an element's transition, toggle a class name on that element that triggers it.
To pause an element's transition, use getComputedStyle and getPropertyValue at the point in the transition you want to pause it. Then set those CSS Properties of that element equal to those values you just got.
Manipulation CSS Transitions
Like we just learned, we can watch elements and react to animation-related events: animationStart, animationIteration, and animationEnd. But what happens if you want to change the CSS animation mid-animation? This requires a bit of trickery!
In Conclusion
- Developers used to need to choose between CSS and JavaScript.
- In JavaScript, CSS transitions are generally easier to work with than CSS animations.
- CSS Matrices are generally a pain to deal with, especially for beginners.
- Thinking about what should be done and planning how to do it.
Never miss an update!
Subscribe and join 100K+ developers.
Build The Site You Want!
Your website should be an asset, not an engineering challenge.