[{"data":1,"prerenderedAt":148},["ShallowReactive",2],{"post-why-spring-animations-feel-faster-it":3,"related-posts-why-spring-animations-feel-faster-it":112,"related-categories-why-spring-animations-feel-faster-it":136},{"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\u002Fit\u002Fblog\u002Fwhy-spring-animations-feel-faster.md","Perché le animazioni a molla sembrano più veloci di quanto siano","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},"il-cronometro-e-la-sensazione-non-sono-daccordo","Il cronometro e la sensazione non sono d'accordo",[18,19,20],"p",{},"Apri un menu a tendina che compare con una dissolvenza di 200 millisecondi, poi aprine uno che entra con una molla in 380. Quasi tutti ti diranno che il secondo è sembrato più veloce. Sembra un controsenso, ma è un risultato piuttosto affidabile, ed è il motivo per cui i componenti di UI Vintage usano le molle per quasi tutto ciò che entra in posizione.",[18,22,23],{},"Quindi, cosa succede? In breve: non giudichiamo la velocità da quando un'animazione finisce. La giudichiamo da quando compare qualcosa di utile.",[13,25,27],{"id":26},"la-maggior-parte-del-movimento-avviene-allinizio","La maggior parte del movimento avviene all'inizio",[18,29,30],{},"Una curva a molla concentra il movimento all'inizio. Nel primo terzo dell'animazione l'elemento percorre gran parte della distanza, poi passa il tempo restante ad assestarsi, a volte superando di poco il bersaglio per poi tornare indietro. Una curva lineare o simmetrica fa l'opposto: parte lentamente, quindi i primi fotogrammi quasi non si muovono.",[18,32,33],{},"Per questo una molla diventa \"leggibile\" prima, anche quando la sua durata totale è maggiore. L'assestamento finale si percepisce come cura del dettaglio, non come attesa.",[35,36],"blog-list",{":items":37,"variant":38},"[\"Pannelli e menu raggiungono presto la posizione finale, quindi il contenuto è leggibile quasi subito\",\"Un piccolo superamento del bersaglio comunica che il movimento è fisico, e il risultato sembra intenzionale\",\"Gli indicatori che seguono una selezione, come la sottolineatura delle schede, sembrano collegati al gesto dell'utente\"]","checkmark",[13,40,42],{"id":41},"scrivere-una-molla-in-puro-css","Scrivere una molla in puro CSS",[18,44,45,46,50],{},"Fino a poco tempo fa, una molla convincente richiedeva una libreria di animazione in JavaScript. La funzione di easing ",[47,48,49],"code",{},"linear()"," ha cambiato le cose: accetta un elenco di punti, quindi puoi campionare una curva a molla una volta sola e affidarla al 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","Una easing a molla come proprietà personalizzata CSS",[18,58,59,60,63],{},"Il browser la esegue esattamente come ",[47,61,62],{},"ease-out",", quindi resta fluida anche quando il thread principale è occupato.",[65,66,68],"h3",{"id":67},"dove-il-trucco-smette-di-funzionare","Dove il trucco smette di funzionare",[18,70,71],{},"Attenzione però: le molle non sono gratis. Un superamento del bersaglio su un elemento grande, come un pannello a tutto schermo, può sembrare traballante più che vivace. E in uscita la fase di assestamento è solo ritardo: nessuno vuole guardare un menu che rimbalza mentre sparisce.",[18,73,74],{},"La regola che segue la libreria è semplice. Le molle fanno entrare gli elementi, curve ease-out brevi li fanno uscire, e chi chiede movimento ridotto non vede alcuna animazione. Quest'ultimo punto conta più di qualsiasi curva, perché per alcuni lettori il movimento non è una questione di gusti.",[18,76,77],{},"Il punto non è che le molle siano sempre migliori. È che la velocità percepita dipende da quando lo schermo diventa utile, e una buona curva ti permette di usare un po' più di tempo senza far aspettare nessuno.",{"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","Una molla che supera di poco il bersaglio può durare più di una semplice dissolvenza e sembrare comunque più rapida. Ecco perché, e dove il trucco smette di funzionare.","md",[94,97],{"question":95,"answer":96},"Le animazioni a molla richiedono una libreria JavaScript?","Non più. La funzione CSS linear() può descrivere direttamente una curva a molla, quindi il browser la esegue come qualsiasi altra easing, senza script sul thread principale.",{"question":98,"answer":99},"Ogni animazione dovrebbe usare una molla?","No. Le molle sono adatte agli elementi che entrano in posizione, come pannelli, indicatori e segni di spunta. Gli elementi che escono dallo schermo di solito funzionano meglio con un ease-out breve e semplice.","\u002Fimages\u002Fblog\u002Fwhy-spring-animations-feel-faster\u002Fcover.jpg","it",{},true,"\u002Fit\u002Fblog\u002Fwhy-spring-animations-feel-faster",{"title":5,"description":91},"it\u002Fblog\u002Fwhy-spring-animations-feel-faster",[108,109,110],"Motion","CSS","UX","y_XyGScYQA__grlCYYAU4NT9Y4sFWD1ue1RSPxgdJsE",[113,119,125,131],{"title":114,"description":115,"image":116,"categoryText":117,"path":118},"Progettare un sistema editoriale riutilizzabile","Come abbiamo trasformato un'interfaccia blog usata una sola volta in una superficie editoriale riutilizzabile, capace di mantenere la propria identità anche fuori dal prodotto originale.","\u002Fimages\u002Fblog\u002Fdesigning-a-reusable-editorial-system\u002Fcover.jpg","Sistemi di design","\u002Fit\u002Fblog\u002Fdesigning-a-reusable-editorial-system",{"title":120,"description":121,"image":122,"categoryText":123,"path":124},"Progettare stati di focus che le persone notano davvero","Chi naviga con la tastiera si affida all'anello di focus per sapere dove si trova. Molti design lo nascondono o lo rendono sbiadito. Poche regole lo rendono visibile ed elegante.","\u002Fimages\u002Fblog\u002Ffocus-states-people-notice\u002Fcover.jpg","Accessibilità","\u002Fit\u002Fblog\u002Ffocus-states-people-notice",{"title":126,"description":127,"image":128,"categoryText":129,"path":130},"Pubblicare una libreria Vue senza passaggio di build","UI Vintage pubblica il proprio codice sorgente e lascia che ogni app Nuxt lo compili. Questa scelta elimina un'intera categoria di problemi e ne introduce un paio di nuovi.","\u002Fimages\u002Fblog\u002Fsource-published-packages\u002Fcover.jpg","Sviluppo","\u002Fit\u002Fblog\u002Fsource-published-packages",{"title":132,"description":133,"image":134,"categoryText":117,"path":135},"La modalità scura è un secondo design, non un filtro","Invertire i colori produce un tema scuro che funziona ma sembra leggermente sbagliato ovunque. I token semantici risolvono quasi tutto. Ombre e accenti richiedono più attenzione.","\u002Fimages\u002Fblog\u002Fdark-mode-is-a-second-design\u002Fcover.jpg","\u002Fit\u002Fblog\u002Fdark-mode-is-a-second-design",[137,142,144,146],{"name":138,"slug":139,"count":140,"image":141},"Aggiornamenti prodotto","product-updates",1,"\u002Fimages\u002Fblog\u002Fshipping-the-blog-migration\u002Fcover.jpg",{"name":129,"slug":143,"count":140,"image":128},"engineering",{"name":123,"slug":145,"count":140,"image":122},"accessibility",{"name":117,"slug":147,"count":80,"image":134},"design-systems",1792259223220]