Hacker Newsnew | past | comments | ask | show | jobs | submitlogin
Bouncy Ball – Compare Web Animation Techniques (sparkbox.github.io)
26 points by fagnerbrack on March 11, 2024 | hide | past | favorite | 4 comments


none of these seem use the good old fashion integer method from the 80s

yvel = yvel + accel

height = height - yvel

if position < floor, yvel *= -1

pause for x milliseconds, repeat

i wonder why this is not good enough and we need to resort to calculus and exponentiation


Physics based animation is great, but there are some limitations.

Firstly, it's frame-rate dependent as you've described it. You'd need at minimum to multiply by time delta per frame.

Secondly, the integration method you've used is called Euler integration. which is inherently unstable. There are stable approaches but they are more complex and easy to get subtly wrong.

Thirdly, it's not parametric, which (for example) the CSS version is. This might not be important, but for some applications being able to play the animation more slowly, or in reverse, is important.


They should add a Rive example to go with Lottie.


interesting that the CSS version is the smoothest in an ios webview




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: