[{"data":1,"prerenderedAt":148},["ShallowReactive",2],{"post-why-spring-animations-feel-faster-en":3,"related-posts-why-spring-animations-feel-faster-en":112,"related-categories-why-spring-animations-feel-faster-en":137},{"id":4,"title":5,"author":6,"authorImageUrl":7,"authorUrl":8,"body":9,"categorySlug":88,"categoryText":89,"dateModified":90,"datePublished":90,"description":91,"extension":92,"faqs":93,"image":100,"language":101,"meta":102,"navigation":103,"path":104,"seo":105,"stem":106,"tags":107,"__hash__":111},"blog\u002Fblog\u002Fwhy-spring-animations-feel-faster.md","Why Spring Animations Feel Faster Than They Are","Bruma","\u002Fimages\u002Fauthors\u002Fbruma.jpg","https:\u002F\u002Fbrumaombra.com",{"type":10,"value":11,"toc":78},"minimark",[12,17,21,24,28,31,34,39,43,51,57,64,69,72,75],[13,14,16],"h2",{"id":15},"the-stopwatch-and-the-feeling-disagree","The stopwatch and the feeling disagree",[18,19,20],"p",{},"Open a dropdown that fades in over 200 milliseconds, then open one that springs in over 380. Most people will tell you the second one felt faster. That sounds backwards, but it is a pretty reliable result, and it is the reason the UI Vintage components lean on springs for almost everything that moves into place.",[18,22,23],{},"So, what is going on? The short version is that we don't judge speed by when an animation ends. We judge it by when something useful appears.",[13,25,27],{"id":26},"most-of-the-motion-happens-early","Most of the motion happens early",[18,29,30],{},"A spring curve front-loads its movement. In the first third of the animation the element covers most of the distance, then spends the remaining time settling, sometimes nudging slightly past its target and back. A linear or symmetric curve does the opposite: it eases in, so the first frames barely move at all.",[18,32,33],{},"For this reason, a spring reaches \"readable\" sooner, even when its total duration is longer. The settle at the end reads as polish rather than waiting.",[35,36],"blog-list",{":items":37,"variant":38},"[\"Panels and menus reach their final position early, so content is readable almost immediately\",\"A small overshoot signals that the motion is physical, which makes the result feel intentional\",\"Indicators that follow a selection, like tab underlines, look connected to the user's input\"]","checkmark",[13,40,42],{"id":41},"writing-a-spring-in-plain-css","Writing a spring in plain CSS",[18,44,45,46,50],{},"Until recently, a convincing spring meant a JavaScript animation library. The ",[47,48,49],"code",{},"linear()"," easing function changed that: it accepts a list of points, so you can sample a spring curve once and hand it to the browser.",[52,53],"code-block",{"code":54,"language":55,"title":56},":root {\n    --ease-spring: linear(0, 0.0292 1.6%, 0.4254 8.4%, 0.6922 13.7%,\n        0.8729 19.8%, 0.9764 27.2%, 1.0173 36.7%, 1.0201 43.1%, 1);\n}\n\n.menu[data-state=\"open\"] {\n    animation: float-in 380ms var(--ease-spring) both;\n}\n","css","A spring easing as a CSS custom property",[18,58,59,60,63],{},"The browser runs this exactly like ",[47,61,62],{},"ease-out",", so it stays smooth even when the main thread is busy.",[65,66,68],"h3",{"id":67},"where-the-trick-stops-working","Where the trick stops working",[18,70,71],{},"Okay, but springs are not free. An overshoot on something large, like a full-screen sheet, can feel wobbly rather than lively. And on exits, the settle phase is pure delay: nobody wants to watch a menu bounce while it disappears.",[18,73,74],{},"The rule the library follows is simple. Springs bring things in, short ease-out curves take them away, and users who ask for reduced motion get no movement at all. That last part matters more than any curve, because for some readers motion is not a matter of taste.",[18,76,77],{},"The point is not that springs are always better. It is that perceived speed depends on when the screen becomes useful, and a good curve lets you spend a little more time without making anyone wait for it.",{"title":79,"searchDepth":80,"depth":80,"links":81},"",2,[82,83,84],{"id":15,"depth":80,"text":16},{"id":26,"depth":80,"text":27},{"id":41,"depth":80,"text":42,"children":85},[86],{"id":67,"depth":87,"text":68},3,"motion-design","Motion Design","2026-07-02T00:00:00Z","A spring that overshoots slightly can take longer than a plain fade and still feel quicker. Here is why, and where the trick stops working.","md",[94,97],{"question":95,"answer":96},"Do spring animations need a JavaScript library?","Not anymore. The CSS linear() function can describe a spring curve directly, so the browser runs it like any other easing, with no script on the main thread.",{"question":98,"answer":99},"Should every animation use a spring?","No. Springs suit things that move into place, like panels, indicators, and check marks. Elements that leave the screen usually feel better with a short, plain ease-out.","\u002Fimages\u002Fblog\u002Fwhy-spring-animations-feel-faster\u002Fcover.jpg","en",{},true,"\u002Fblog\u002Fwhy-spring-animations-feel-faster",{"title":5,"description":91},"blog\u002Fwhy-spring-animations-feel-faster",[108,109,110],"Motion","CSS","UX","ksFTNTRPI0SfPSlN4oLl-dzhwD8heN1oH3ipaWmlzmk",[113,119,125,131],{"title":114,"description":115,"image":116,"categoryText":117,"path":118},"Designing a Reusable Editorial System","How we turned a one-off blog UI into a reusable content surface that still feels intentional once it leaves the original product.","\u002Fimages\u002Fblog\u002Fdesigning-a-reusable-editorial-system\u002Fcover.jpg","Design Systems","\u002Fblog\u002Fdesigning-a-reusable-editorial-system",{"title":120,"description":121,"image":122,"categoryText":123,"path":124},"Shipping the Blog Migration Into the Library","A practical summary of what changed once the original blog implementation was moved into a reusable Nuxt-friendly component library.","\u002Fimages\u002Fblog\u002Fshipping-the-blog-migration\u002Fcover.jpg","Product Updates","\u002Fblog\u002Fshipping-the-blog-migration",{"title":126,"description":127,"image":128,"categoryText":129,"path":130},"Shipping a Vue Library Without a Build Step","UI Vintage publishes its source and lets each Nuxt app compile it. That choice removes a whole class of problems, and adds a couple of new ones.","\u002Fimages\u002Fblog\u002Fsource-published-packages\u002Fcover.jpg","Engineering","\u002Fblog\u002Fsource-published-packages",{"title":132,"description":133,"image":134,"categoryText":135,"path":136},"Designing Focus States People Actually Notice","Keyboard users rely on the focus ring to know where they are. Most designs hide it or make it faint. A few small rules make it both visible and good-looking.","\u002Fimages\u002Fblog\u002Ffocus-states-people-notice\u002Fcover.jpg","Accessibility","\u002Fblog\u002Ffocus-states-people-notice",[138,141,143,145],{"name":123,"slug":139,"count":140,"image":122},"product-updates",1,{"name":135,"slug":142,"count":140,"image":134},"accessibility",{"name":129,"slug":144,"count":140,"image":128},"engineering",{"name":117,"slug":146,"count":80,"image":147},"design-systems","\u002Fimages\u002Fblog\u002Fdark-mode-is-a-second-design\u002Fcover.jpg",1792259222330]