Service hero
Animazioni leggereche aiutano l’utente.
Aggiungo micro-interazioni solo quando aiutano: guidano l’occhio, confermano un’azione o rendono più chiaro un passaggio. Le progetto insieme alla UI/UX e le sviluppo con attenzione alle performance.
Valutazione progetto
Per chi è. Cosa definiamo prima.
- Il tuo sito è statico e manca feedback su hover, click, scroll o form.
- Vuoi micro-interazioni che guidano l'occhio (reveal on scroll, hover sui CTA, focus state evidenti) — non "scintille" fini a sé stesse.
- Hai già il design system pronto (o lo abbiamo fatto insieme nel servizio UI/UX) e ti serve implementarlo con animazioni coerenti.
- La performance è un vincolo: niente librerie pesanti se non servono, ogni animazione deve rispettare prefers-reduced-motion.
- Vuoi essere editabile in autonomia: micro-interazioni gestite con classi CSS o attributi data-, niente shader/canvas custom difficili da mantenere.
- Vuoi aggiungere movimento perché lo usano i competitor: capiamo prima quale azione utente deve aiutare.
- Servono Lottie, Three.js o WebGL complessi: posso collaborare con figure specializzate e curare l’handoff.
- L’effetto è soprattutto scenografico: valutiamo se porta valore o se appesantisce l’esperienza.
- Il sito ha già animazioni lente o fragili: prima ottimizziamo, poi aggiungiamo movimento utile.
- Le animazioni richieste sono lunghe o difficili da disattivare: le adattiamo a performance e accessibilità.
Deliverable Animazioni
Cosa consegno.
Analizzo pagine, CTA, form e stati interattivi per capire dove manca feedback visivo.
Le sezioni appaiono con un ritmo coerente man mano che scrolli: opacity + translate, easing morbido (cubic-bezier), stagger se ci sono card/liste. Implementato con IntersectionObserver (no scroll listener, no librerie pesanti). Rispetta prefers-reduced-motion: niente se l'utente l'ha disattivato.
Bottone, link, card, input: tutti hanno uno stato hover evidente e uno stato focus visibile. Niente "si vede solo quando ci passi sopra col mouse": anche da tastiera deve essere chiaro cosa è cliccabile, come richiesto da una buona accessibilità WCAG.
Uso transizioni leggere solo se migliorano continuità e orientamento.
Form, caricamenti ed errori devono comunicare chiaramente cosa sta succedendo.
Uso soprattutto transform e opacity, rispetto prefers-reduced-motion e controllo il peso delle librerie, così il motion non danneggia le performance web.
Process
Quattro fasi. Niente sorprese.
Pacchetti
Vuoi un preventivo?
Se vuoi capire costi, tempi e soluzione più adatta, scrivimi dal form contatti. Ti rispondo con una prima valutazione e, se ha senso, una proposta su misura.
- Struttura della pagina e contenuti principali
- Design responsive per desktop e mobile
- Form, CTA e tracciamenti essenziali
- Setup SEO tecnico di base
- Pubblicazione e controllo finale
- Architettura pagine e navigazione
- WordPress, builder o tema custom secondo progetto
- Gestione contenuti, prodotti o servizi
- Performance, SEO tecnico e sicurezza di base
- Handoff per gestire il sito in autonomia
- Audit tecnico e UX del sito esistente
- Migliorie su performance, contenuti o layout
- Ottimizzazione builder, tema o plugin già presenti
- Nuove sezioni, pagine o componenti
- Priorità chiare prima di intervenire
FAQ Animazioni
Domande frequenti.
Quando un'animazione è "troppo"?
Quando distrae, rallenta, si ripete senza motivo o rende meno chiaro il contenuto. Ogni animazione deve avere uno scopo percepibile.
Le animazioni rallentano il sito?
Se sono fatte male, sì. Per questo uso proprietà come transform e opacity, controllo il peso delle librerie e rispetto prefers-reduced-motion, con la stessa attenzione usata negli audit di performance.
Usi GSAP o basta CSS?
Spesso bastano CSS e IntersectionObserver. Uso GSAP solo per timeline, scroll animation o casi in cui CSS non è sufficiente.
Funziona con prefers-reduced-motion?
Sì. Chi ha riduzione movimento attiva deve poter usare il sito senza animazioni invasive: è parte del lavoro su accessibilità e usabilità.
Posso disabilitare un'animazione senza toccare il codice?
Sì. Uso classi CSS (es. .has-anim-reveal, .has-anim-hover) o attributi data- (es. data-animate="reveal") — basta rimuovere la classe o l'attributo dal markup per disabilitare una specifica animazione. Ti consegno anche una cheat sheet PDF con tutte le opzioni disponibili: tu o il tuo team potete attivare/disattivare senza chiamarmi.
Cosa succede se aggiungo contenuti nuovi dopo?
Le animazioni sono template-driven: scrivi il contenuto normalmente (articolo, pagina, prodotto) e le animazioni si applicano in automatico via CSS/JS. Niente "dev ricordarsi di aggiungere la classe". Se hai contenuti legacy che non hanno le classi, ti consegno una piccola utility jQuery-free per aggiungerle in bulk — ma nella maggior parte dei casi è già coperto dal CSS.
CTA strip
Aggiungiamo movimento utile.
Diamo ritmo dove crea valore.
Mandami l'URL del sito e due righe su cosa vuoi migliorare. Ti rispondo con una prima valutazione concreta.