Make the transform animation follow mathematical fucntions to interpolate values and map…
This is a design post classified by Jev as Animation & motion (a tutorial), kept by the Design Radar because it carries real work, not commentary.
Design engineering tip: Make the transform animation follow mathematical fucntions to interpolate values and map them. It will make few properties insanly smooth. With normal CSS, you might think in terms of: translateX + scale + easing for this animation. With math, you can derive both from the same t: scale = sin(πt) x = (1 − cos(πt)) / 2 So instead of manually defining how each property changes, you define the function that describes the motion. One input → multiple properties → one coherent motion.
Posted by Nil . Dev . (325 followers) 2 days ago · 34 likes · 1.5k views · view the original post on X. Kept by the Design Radar as Animation & motion.
More design work like this
- turned my favourite coffee shop’s mascot into a tiny animation — @DhaygudeMrunal
- Figma Motion basics: Use shaders in your animations… — @dushyantz
- Poke the little owl on your step tracker and it squishes and blinks right back. A boop… — @movindesign_
- designers waste hours on simple animations when @animosapp exists. — @HeyDetya
- this AI creates 2D animations in 15s — @techhalla
- 💚 Site of the Day - Door Dennis — @greensock
- Glass Button Hits Different in Motion. — @JameslabiQ
- Motion Makes This UI Feel Expensive. — @JameslabiQ
Every post is read and classified by Jev (TypeSafe): what it is, which market it belongs to, and whether the link is a real tool. 4k posts from 1.4k X accounts over the last 21 days, 316 tools, 17 markets. Collected every 5 minutes, fully re-ranked every hour — last update 2026-09-19 02:08 UTC. Full method.