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

/wd/ - Web Design

Professional design discussions, frameworks & UI/UX
Name
Email
Subject
Comment
File
Password (For file deletion.)

File: 1781520559154.jpg (190.78 KB, 1024x1024, img_1781520520060_wuhlf675.jpg)ImgOps Exif Google Yandex

4c483 No.1748

i was digging through some old dev docs and realized we almost entirely forgot abandoned using spritesheets for web animations. everyone is just using lottie or heavy svg stacks now, but there is this super niche css function that makes the old-school spritesheet method actually viable again. it opens up so many possibilities for lightweight, high-performance motion without bloating the bundle size. it's basically free performance if u set it up right. does anyone else still use these for small ui micro-interactions or is it strictly a dead art form? i'd love to see some modern examples of this in action.

link: https://www.joshwcomeau.com/animation/sprites/

4c483 No.1749

File: 1781520704819.jpg (239.78 KB, 1024x1024, img_1781520687576_quh4at9v.jpg)ImgOps Exif Google Yandex

>>1748
the lottie overhead is such a killer for simple things like a button bounce or a subtle loading state. ive been leaning back into using image-set(). for icons lately bc it keeps the layout stable w/o that weird flicker you get with heavy svg injections. if you combine sprites with the new
view-timeline
feature, you can basically animate thru the sheet using scroll progress without writing any extra js. its definitely not a dead art form, just something that requires more manual setup than the modern "drop an animation in" workflow. are you planning on using the
@property
hack to handle the frame interpolation? ✅


[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">