Design Engineering Tip: Most UI animations are built for... a single uninterrupted transition. Real users might reverse direction before the animation finishes. Use a spring transition that preserves the element’s current velocity instead of restarting from zero. This keeps rapid hover, press, and state changes smooth and responsive. transition={{ type: "spring", stiffness: 520, damping: 38, }}show more

Design Engineering Tip Make hover interactions respond to where... the cursor actually comes from. Instead of revealing content with the same animation every time, detect the cursor entry direction and move the image + content accordingly. It makes a simple card feel much more spatial and responsive. const direction = getDirection(event, ref.current); const variants = { top: { y: 20 }, bottom: { y: -20 }, left: { x: 20 }, right: { x: -20 }, };show more

SMU CB Press Transition Read Drill, using two receivers... to transition from press to trail and reading a Go or Comeback by the receiver.show more

me finally making a transition look smooth and flow... instead of pausing in between? YAYshow more

💡design engineering tip: if you are using toasts, don't... just create new toasts and stack every toast on each other. it confuses users, and creates a lot of visual noice. 📷 instead, use a cycling animation (a single animation won't work due to the browsers nature) with a slight bounce to visualize, that the task is already completed.show more

having an instant hover transition with a short fade... out feels kind of snappier than no transition at allshow more

screen transition library #RobloxDev all callable with a single... function: TransitionLib .Play("transitionName", duration) pass a callback to execute functions at transition peak (teleporting, start cutscenes, etc) self cleaning + zero UI setup releasing soon for free 💸 :)show more

Created a new skill Transition polish The skill is... focused on transition refinement by adjusting motion tokens instead of replacing the whole transition. npx skills add Jakubantalik/transitions.dev -s transitions-polish Or use it with Refine tool (visual layer for the skill) npx transitions-refine liveshow more

using CSS grid you can avoid width change in... the parent container whilst making it responsive 🤙 the trick: update and transition the grid-template-columns for the list on :focus/:hover ✨show more

THIS MIGHT ACTUALLY BE THE MOST BEAUTIFUL TRANSITION IN... FF7 HOLY SHIT.show more

THIS SMOOTH TRANSITION

The most beautiful and emotional transition 😍

The most beautiful and emotional transition 🥹

We shipped a redesign of the Perplexity iOS app... over the weekend. A more refined and focused experience. Some of my favorite details 🧵 1. Voice dictation: a new interaction and animation for the transition and listening state.show more

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.show more

THE TRANSITION IS SO SMOOTH

comment clustering animation instead of a straight line, each... comment follows an arc so the transition feels more naturalshow more