Been exploring the Web Animations API over animation libraries like GSAP for the simpler…
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.
Been exploring the Web Animations API over animation libraries like GSAP for the simpler stuff. Text reveals and page transitions, mostly. The library then only loads on a page that really needs it (complex timelines, ScrollTrigger, custom eases), and the bundle stays cleaner everywhere else. Here for example kugiri splits the lines, element.animate() moves them. One animation per line, stagger as each line's own delay. Translate and opacity only, so it runs on the compositor and keeps rising through a blocked main thread.
Posted by Edoardo Lunardi (2.3k followers) 10 days ago · 32 likes · 1k 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.