March 29, 2019
Ever dreaded about writing
cubic-bezier(x1, y1, x2, y2)?
Great, so did I!
Turns out that’s CSS’ attempt to resemble real world physics to its best effort. And it’s actually very effective. The Bézier Curves are commonly used in computer graphics to simulate curves. And that includes the hyperbolas — the curve along which objects move when you throw something into the air.
As a passionate front end developer, we thrive to recreate those animations as real as possible. Human eyes are sensitive. Even if things may be just slightly off, your audience will just “feel weird” even if they may not be able to tell why.
We’ll need to humbly learn from the great beautiful nature when we code :)
Let’s try implementing the animation in this design!
Original design: One Minimal Festival Homepage Alternative Version Animation by Zhenya Rynzhuk.
Here’s a blog article I wrote about Bézier Curves, mainly about the intuition.