#motion · 3 settembre 2026 · 1 min di lettura

Animazioni con uno scopo: la nostra checklist

Come usiamo il movimento per guidare l'occhio senza rallentare il sito.

Ogni animazione ha un perché

Guidare l'attenzione, dare feedback, creare gerarchia, raccontare. Se un'animazione non fa una di queste cose, la togliamo.

Animare proprietà come width o top costringe il browser a ricalcolare il layout. Transform e opacity invece vengono gestite dalla GPU.

gsap.from(el, { yPercent: 110, opacity: 0, ease: "expo.out" });

Con prefers-reduced-motion disattiviamo parallax, pin e smooth scroll. Il contenuto resta identico, cambia solo il modo in cui appare.