4 ms·

I love the presentation and purpose of the site. But the gravity of dropping the balls looks really weird on my end. They seem to fall at speed, but then de ac

I love the presentation and purpose of the site. But the gravity of dropping the balls looks really weird on my end. They seem to fall at speed, but then de accelerate before touching the ground, then they bounce again until coming to a standstill. The ball on the title looks accurate when bouncing, so I'm not sure if this is on purpose or not. Running firefox under MacOS.

teraflop 5y ago
I don't know if it's "on purpose", but that's a correct result of how the animations are defined in the CSS, not a browser bug. The stylesheet defines a single set of animation keyframes going from top to bottom at constant speed with a small bounce, and then applies the default CSS "ease" timing function to the entire animation. That results in an incorrect non-zero vertical initial velocity (making it seem like the ball was thrown downward rather than dropped), an initial downward acceleration that's vaguely in the right ballpark, and then a deceleration that's completely incorrect.
jstanley 5y ago
Yes, it also looks very strange to me. The balls seem to decelerate before they hit the ground. Firefox on Ubuntu: https://www.youtube.com/watch?v=5CihIHXj5HE https://www.youtube.com/watch?v=5CihIHXj5HE I'm guessing that this behaves differently on Chromium, or alternatively that OP has never seen a ball bounce before :)
- mstngl 5y ago
  I assumed also a more correct way of "simulation" in Chromium-derivates, but looks exactly the same on Chromium (Windows).
- babypuncher 5y ago
  Maybe the objects in question are so massive that relativistic effects come into play. To an outside observer, time would appear to slow down for objects venturing deeper into the gravity well.
- spicybright 5y ago
  I feel like this is an argument for not sticking to 100% CSS. Tiny bit of javascript would fix this.
deleted 5y ago
[deleted]
deleted 5y ago
[deleted]

teraflop 5y ago

I don't know if it's "on purpose", but that's a correct result of how the animations are defined in the CSS, not a browser bug. The stylesheet defines a single set of animation keyframes going from top to bottom at constant speed with a small bounce, and then applies the default CSS "ease" timing function to the entire animation. That results in an incorrect non-zero vertical initial velocity (making it seem like the ball was thrown downward rather than dropped), an initial downward acceleration that's vaguely in the right ballpark, and then a deceleration that's completely incorrect.

jstanley 5y ago

Yes, it also looks very strange to me. The balls seem to decelerate before they hit the ground. Firefox on Ubuntu: https://www.youtube.com/watch?v=5CihIHXj5HE https://www.youtube.com/watch?v=5CihIHXj5HE I'm guessing that this behaves differently on Chromium, or alternatively that OP has never seen a ball bounce before :)

mstngl 5y ago
I assumed also a more correct way of "simulation" in Chromium-derivates, but looks exactly the same on Chromium (Windows).
babypuncher 5y ago
Maybe the objects in question are so massive that relativistic effects come into play. To an outside observer, time would appear to slow down for objects venturing deeper into the gravity well.
spicybright 5y ago
I feel like this is an argument for not sticking to 100% CSS. Tiny bit of javascript would fix this.

deleted 5y ago

[deleted]

deleted 5y ago

[deleted]