✳flâneur — a map of the web's best reading

Good vs Great Animations

emilkowal.ski · 942 words · saved by 1 readers

We all want our UIs to feel great and animations can definitely help with that. But how do you actually create a great animation? This article is a collection of practical tips to help you go from good to great animations. When we click on a button that opens a dropdown, we expect the dropdown to animate from where the button is. This feels natural, it then doesn’t appear out of nowhere, it has a clear origin. The default transform-origin in CSS is center, but in this case, we want to change it to bottom-center, because that’s where the button is. If you are using Radix, you can automate it with the --radix-popover-content-transform-origin CSS variable. If you are using shadcn/ui, the work is already done for you. Easing is the most important part of any animation. It can make a bad animation feel great and a great animation feel bad. That’s why you have to know which easing to choose in a specific situation. Take a look at the example below. Each time you click the play button, the

Good vs Great Animations Enrollment for my animation course is open! Enrollment has closed. Good vs Great Animations We all want our UIs to feel great and animations can definitely help with that. But how do you actually create a great animation? This article is a collection of practical tips to help you go from good to great animations. Origin-aware animations When we click on a button that opens a dropdown, we expect the dropdown to animate from where the button is. This feels natural, it then doesn’t appear out of nowhere, it has a clear origin. The default transform-origin in CSS is center

Explore this link on the map →

related reading