Animazioni di entrata configurabili sui blocchi. Le animazioni partono quando l'elemento entra in viewport (scroll). Dopo ogni modifica alle animazioni, esegui una build della pagina per vedere il risultato.
Catalogo animazioni
Dissolvenza fadeIn
Il contenuto compare con dissolvenza da trasparente a visibile.
Testi secondari, paragrafi, elementi neutri.
Entrata dal basso fadeInUp
Il contenuto sale dal basso con dissolvenza.
Titoli, hero, CTA principali.
Entrata dall'alto fadeInDown
Il contenuto scende dall'alto con dissolvenza.
Intestazioni, badge, elementi in alto.
Entrata da sinistra fadeInLeft
Il contenuto entra da sinistra con dissolvenza.
Colonne sinistra, media, card.
Entrata da destra fadeInRight
Il contenuto entra da destra con dissolvenza.
Colonne destra, immagini, sidebar.
Come configurare
Default sul layout
- Apri Layout → blocchi del layout → modifica blocco nello slot.
- Nella sezione Animazioni, scegli target, animazione, durata (600–1200 ms) e ritardo.
- Salva e rebuild delle pagine che usano quel layout.
Override su singola pagina
- Apri la pagina generata → Contenuti.
- Nella sezione animazioni del blocco, modifica rispetto al default layout (badge override).
- Usa Ripristina default layout per annullare l'override.
- Rebuild della pagina.
Regole consigliate
- Durata 600–1000 ms per testi; max 1200 ms per blocchi grandi.
- Ritardo 0 ms per il primo elemento visibile; 100–300 ms tra target sequenziali.
- Anima 1–3 target per blocco, non tutto.
- Con
prefers-reduced-motionle animazioni vengono saltate. - Solo blocchi con target dichiarati (
animatable_targets_json) espongono slot animabili.
Aggiungere nuove animazioni
Vai su Animazioni → Libreria → Nuova, compila @keyframes e stato iniziale CSS.
Non serve modificare codice né fare deploy.
Cosa non sono
Carousel, contatori e altre animazioni funzionali restano nel JavaScript del blocco e non sono configurabili da qui.