Glossario · Animazione
Easing
Il modo in cui un movimento accelera e rallenta tra il suo inizio e la sua fine.
In dettaglio
Senza easing, un oggetto si muove a velocità costante e il movimento sembra meccanico. Con l’easing parte piano e finisce rallentando (o al contrario), come fanno gli oggetti reali. In CSS, le curve hanno nomi come ease, ease-out o ease-in-out, oppure si scrivono con cubic-bezier() per curve proprie. Nomi come back o elastic non sono curve CSS: sono nomi di librerie di animazione, come GSAP.
Regola pratica: ciò che entra nella scena di solito rallenta all’arrivo (ease-out); ciò che esce di solito accelera (ease-in). Le curve molto elastiche attirano l’attenzione, ma stancano se usate in tutto il banner.
Esempio
document.querySelector(".cta").animate({ transform: ["translateX(40px)", "none"] }, { duration: 600, easing: "ease-out" });