Per un po' ho usato Framer Motion su tutto. Poi ho iniziato a guardare quanto pesava sul bundle e ho deciso di toglierla dai progetti dove non serviva davvero — tipo questo portfolio.
Il pattern che uso adesso è un componente Reveal che osserva l'elemento con IntersectionObserver. Quando entra nel viewport setto uno stato visible a true, che aggiunge le classi CSS per opacity e transform. La transizione la gestisce il CSS. Funziona bene, pesa zero e non ho dipendenze da gestire.
Per i delay nelle sequenze uso direttamente animation-delay inline. Passo il valore come prop e lo applico allo style. Non ho mai sentito il bisogno di qualcosa di più sofisticato per quello che costruisco di solito.
Una cosa che ho imparato a mie spese: animare sempre e solo opacity e transform. Qualsiasi altra proprietà — height, padding, margin — causa reflow e l'animazione scatta. Ogni volta che ho avuto un'animazione che sembrava lenta, era colpa di questo.