Pinned
Introducing Animations on the web
A course about how to craft animations that make people feel something.
It contains everything I know about motion on the web.
animations.dev
00:00
Emil Kowalski
811 posts
Emil Kowalski
@emilkowalski
Joined April 2020
- An easy way to make your interface feel more responsive is to add a subtle scale down effect when a button is pressed. A scale of 0.97/0.98 scale on the :active pseudo-class with a ~150ms transition should do the job.
00:00 - Tooltips tip: Tooltips should have a delay before appearing to prevent accidental activation. Once a tooltip is open, hovering over other tooltips should open them with no delay and no animation. This feels faster without defeating the purpose of the initial delay.
00:00 
- Animating from `scale(0)` usually feels "off". Try animating from a higher initial scale instead (0.9+). It helps it feel more gentle and elegant. Here's the difference between initial `scale(0)` and `scale(0.93)`:
00:00 - My animation course is live! It contains everything I know about animations on the web. We'll build all of these and more.
00:00 - Every design looks better in light mode
- Introducing Sonner - an opinionated toast component for React. sonner.emilkowal.ski
00:00 - Introducing Vaul 1.0. A drawer component for React. Rewritten, improved, with new docs. vaul.emilkowal.ski
00:00 - Hover transitions seen tens, maybe even hundreds of times a day can make your interface feel slower. Make them snappy by removing the transition altogether.
00:00 - Introducing Vaul - an unstyled drawer component for React. vaul.emilkowal.ski
00:00 - The registration for my animation course is open for the next 10 days. Now, with a new CSS Animations module! We'll build all of these components and more, source code included.
00:00
