Update spring timing

src/css/base.css

@@ -19,13 +19,13 @@ abbr[title] {
 
 /* Sensible defaults for view transitions groups, which transform */
 ::view-transition-group(*) {
-  animation-timing-function: theme('transitionTimingFunction.spring[265/500]');
-  animation-duration: 500ms; /* make sure this matches the preferred duration of the spring */
+  animation-timing-function: theme('transitionTimingFunction.spring[250/475]');
+  animation-duration: 400ms; /* make sure this matches the preferred duration of the spring */
 }
 
 /* Sensible defaults for the crossfading parts of a view transition */
 ::view-transition-old(*),
 ::view-transition-new(*) {
-  animation-duration: 265ms; /* match the perceptual duration of the default spring */
+  animation-duration: 250ms; /* match the perceptual duration of the default spring */
   animation-timing-function: ease;
 }

tailwind.config.js

@@ -303,10 +303,10 @@ module.exports = {
         spring: {
           // https://linear-easing-generator.netlify.app/?codeType=js&code=const+%5Bduration%2C+func%5D+%3D+createSpring%28%7B%0A++mass%3A+1%2C%0A++stiffness%3A+631.65%2C%0A++damping%3A+50.26%2C%0A++velocity%3A+0%2C%0A%7D%29%3B%0A%0A%2F*%0A++Export+your+easing+function+as+a+global.%0A++The+name+you+use+here+will+appear+in+the+output.%0A++The+easing+function+must+take+a+number+as+input%2C%0A++where+0+is+the+start%2C+and+1+is+the+end.%0A++It+must+return+the+%27eased%27+value.%0A*%2F%0Aself.spring+%3D+func%3B%0A%2F*%0A++Some+easings+have+an+ideal+duration%2C+like+this+one.%0A++You+can+export+it+to+the+global%2C+in+milliseconds%2C%0A++and+it+will+be+used+in+the+output.%0A++This+is+optional.%0A*%2F%0Aself.duration+%3D+duration%3B%0A%0Afunction+createSpring%28%7B+mass%2C+stiffness%2C+damping%2C+velocity+%7D%29+%7B%0A++const+w0+%3D+Math.sqrt%28stiffness+%2F+mass%29%3B%0A++const+zeta+%3D+damping+%2F+%282+*+Math.sqrt%28stiffness+*+mass%29%29%3B%0A++const+wd+%3D+zeta+%3C+1+%3F+w0+*+Math.sqrt%281+-+zeta+*+zeta%29+%3A+0%3B%0A++const+b+%3D+zeta+%3C+1+%3F+%28zeta+*+w0+%2B+-velocity%29+%2F+wd+%3A+-velocity+%2B+w0%3B%0A%0A++function+solver%28t%29+%7B%0A++++if+%28zeta+%3C+1%29+%7B%0A++++++t+%3D%0A++++++++Math.exp%28-t+*+zeta+*+w0%29+*%0A++++++++%281+*+Math.cos%28wd+*+t%29+%2B+b+*+Math.sin%28wd+*+t%29%29%3B%0A++++%7D+else+%7B%0A++++++t+%3D+%281+%2B+b+*+t%29+*+Math.exp%28-t+*+w0%29%3B%0A++++%7D%0A%0A++++return+1+-+t%3B%0A++%7D%0A%0A++const+duration+%3D+%28%28%29+%3D%3E+%7B%0A++++const+step+%3D+1+%2F+6%3B%0A++++let+time+%3D+0%3B%0A%0A++++while+%28true%29+%7B%0A++++++if+%28Math.abs%281+-+solver%28time%29%29+%3C+0.001%29+%7B%0A++++++++const+restStart+%3D+time%3B%0A++++++++let+restSteps+%3D+1%3B%0A++++++++while+%28true%29+%7B%0A++++++++++time+%2B%3D+step%3B%0A++++++++++if+%28Math.abs%281+-+solver%28time%29%29+%3E%3D+0.001%29+break%3B%0A++++++++++restSteps%2B%2B%3B%0A++++++++++if+%28restSteps+%3D%3D%3D+16%29+return+restStart%3B%0A++++++++%7D%0A++++++%7D%0A++++++time+%2B%3D+step%3B%0A++++%7D%0A++%7D%29%28%29%3B%0A%0A++return+%5Bduration+*+1000%2C+%28t%29+%3D%3E+solver%28duration+*+t%29%5D%3B%0A%7D&simplify=0.0017&round=3
           // Perceptual duration: ~265ms, actual duration: 500ms
-          '265/500': `linear(
-            0, 0.005, 0.019 1.7%, 0.079 3.7%, 0.479 12.8%, 0.582, 0.668, 0.743 21.1%,
-            0.807, 0.858 27.4%, 0.9 31%, 0.932 34.8%, 0.957 39.2%, 0.975 44.2%,
-            0.987 50.2%, 0.994 56.9%, 0.998 65.8%, 1
+          '250/475': `linear(
+            0, 0.005, 0.02 2%, 0.08 4.5%, 0.469 15.1%, 0.567, 0.65, 0.723 24.3%,
+            0.784 27.6%, 0.836 31.1%, 0.878 34.8%, 0.915 39%, 0.943 43.7%, 0.964 49.1%,
+            0.979 55.3%, 0.989 62.3%, 0.995 71%, 1
           )`,
         },
       },