Dave Rupert
🌱 Added a spring animation to my multipage view-transition and `linear()` adds so much compared to `linear` when clicking thru the nav. So smooth and buttery.
Mar 7 at 5:32amElk
Show threadDave RupertMar 7
Sheeeeeesh.
Show threadRobert KatzkiMar 7
@davatron5000 This looks very nice. 👌
Show threadErik VorhesMar 7
@davatron5000 Fancy. Schmancy, even.
Show threadAndrea Grandi 🦕Mar 7
@davatron5000 hello from a fellow bass player 🎸
Show threadDave RupertMar 7
@andreagrandi Heckin' yes! SLAP THE BASS.
Show threadLuke DornyMar 7
@davatron5000 good gravy these transitions and animations are so beautiful. Well done.
Show threadEthan MarcotteMar 7
@davatron5000 oh this is hot
Show threadMatthias OttMar 7
@davatron5000 Yup. Linear() is not that linear. 😁https://matthiasott.com/notes/linear-is-not-linear
Linear() Is Not (That) Linear · Matthias Ott

Linear easing isn't actually linear in CSS animations. Understanding timing functions for better motion design.

Matthias Ott – Web Design Engineer
Show threadkseudonymMar 7
@davatron5000 something I learned recently is that `linear()` is not fully optimized in Safari, so it doesn’t run at the highest frame rates on their ProMotion screens, instead seemingly capped at 60fps. If that’s important, the alternative that worked for me was compiling the spring to WAAPI KeyframeEffect and using that. I assume outputting @keyframes would have worked too. The upside of WAAPI is that you can redefine the spring without additional big CSS output, the downside is it’s not declarative.