UI Animation

A UI/UX concept by <n>Josh Puckett</n> demonstrating the responsiveness of interruptible animations.

Here's a tip I don't see enough: make your animations interruptible.

You should be able to immediately trigger close events without waiting for the animation to complete. @motiondotdev makes this super easy.

This helps your interfaces feel durable, snappy, and well considered.

Animating in Public

Easings - Generate, test and share custom easing curves.

Most e-commerce sites feel like databases, not experiences.
Grids. Filters. Scroll fatigue.
I built a small POC to see what happens when browsing feels tactile and opinionated. Depth and motion instead of endless scrolling.

#threejs #r3f

Aurelien (@aureliengmz) on Threads

A comparison of <n>HDR</n> and <n>non-HDR</n> screens by <n>Kevin Grajeda</n>.

UI/UX example of a hover state bug fix by designer <n>Emil Kowalski</n>.

You might’ve seen this bug before where the hover state keeps flickering.  

The fix is to separate the trigger from the effect.  Listen for hovers on the parent, but animate a child element instead. 

This ensures that the hover area stays consistent.

3D characters help hosts visualize guest count in this <n>Airbnb</n> UI detail by designer <n>McLane Teitel</n>.

While on @Airbnb's design team, I introduced the idea of using 3D characters from the Airbnb brand to represent guest capacity. The idea simply came out of my desire to add visual interest and a bit of humor to an otherwise utilitarian tool.

If you tried a few different easings and timings for your animation and something about it still feels off, try adding a bit of blur to mask those imperfections.

Here’s a before/after using `filter: blur(2px)` (+ a subtle scale down on press):

Tobias Renström (@tobberacing) on Threads

A UI interaction concept for the <n>Spatial</n> app by designer <n>Tobias Renström</n>.

A UI concept for a podcast player by <n>Design Spells</n>.

Tiny icons appear when a podcast is playing in Queue · By @eikedrescher

Animations on the web

You Don't Need Animations

When showing multiple elements at once, try applying a slight delay to each one for a smoother transition.     

For product UI, the delay between two elements should not be higher than ~50ms.

Notice how in the correct example chips move instantly to their new position when a chip is removed.

That’s because of the `popLayout` mode on AnimatePresence in motion/react which creates a smoother, faster transition when removing an element.

best delete button by @nitishkmrk 

shadcn component idea

The lifecycle of a pull request

A story told through @linear's status icons.

From backlog → merged, and everything in between.

⊙ One <𝚜𝚟𝚐>, zero component swaps
⊙ 𝚜𝚝𝚛𝚘𝚔𝚎-𝚍𝚊𝚜𝚑𝚊𝚛𝚛𝚊𝚢 doing the heavy lifting
⊙ Spring physics via @motiondotdev

Make your interactions interruptible so they respond to changes in user intent.

CSS transitions are great for interactions, while keyframe animations are better for staged sequences that run once.