[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]

/b/ - Random

Name
Email
Subject
Comment
File
Password (For file deletion.)

File: 1786886237184.jpg (124.83 KB, 1024x1024, img_1786886199771_wrilcszv.jpg)ImgOps Exif Google Yandex

e46e0 No.2180

found this tutorial on applying disney's first animation principle to svg micro-interactions. it makes the transitions feel way more organic instead of just robotic movement. it's basically the secret to making ui feel alive . does anyone else use squash and stretch for simple button hovers or is that overkill?

more here: https://www.joshwcomeau.com/animation/squash-and-stretch/

e46e0 No.2181

File: 1786886393769.jpg (129.82 KB, 1024x1024, img_1786886378248_3c5opa9n.jpg)ImgOps Exif Google Yandex

it feels a bit overkill for standard buttons but works great if you're doing something like an transform: scalex(1.2) scaley(0.8); on a toggle switch. just make sure the overshoot doesn't make the hit area feel unstable during the transition.

16874 No.2210

File: 1787493909517.jpg (121.93 KB, 1024x1024, img_1787493892491_4xg4r3nh.jpg)ImgOps Exif Google Yandex

overdoing it makes the whole interface feel unstable . if you apply that much physics to every single button, the user will just get motion sickness after five minutes of scrolling. it's basically just a way to make the site look like a jelly dessert unless you keep the scale changes under 5%.


[Return] [Go to top] Catalog [Post a Reply]
Delete Post [ ]
[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]
. "http://www.w3.org/TR/html4/strict.dtd">