T
19

Watched a loading spinner bounce for 3 seconds and rewrote my whole animation approach

I used to write CSS keyframe animations step by step... like 10% here, 50% there, total mess. Last week I was debugging a client's bouncing ball loader and realized you can just use a single cubic-bezier curve to handle the bounce physics. Took me from 30 lines of keyframes down to 4. Has anyone else switched to using custom easing curves for things they used to keyframe manually?
2 comments

Log in to join the discussion

Log In
2 Comments
fiona_lewis37
My cubic-bezier experiments ended up looking janky on mobile browsers about 40% of the time. Sometimes those extra keyframe lines are the difference between smooth and stuttery, your mileage may vary.
4
finleybutler
Cubic-bezier is a total game changer for this stuff. Way cleaner code.
0