Recensione dell'animatore: plug-in di animazione WordPress point-and-click (senza codice)

Vuoi aggiungere animazioni accattivanti e animazioni basate sul tempo al tuo sito WordPress?

Se sei un esperto di CSS, puoi impostare tu stesso queste animazioni. Ma per il resto di noi, WordPress non offre alcun modo semplice per aggiungere animazioni ai contenuti.

Animator è un nuovo plug-in autonomo del team CSS Hero che lo cambia, dandoti accesso a una semplice interfaccia punta e clicca per impostare tutti i diversi tipi di animazioni sul tuo sito WordPress, sia che tu stia utilizzando l'editor nativo o un plug-in per la creazione di pagine.

Se non sei una persona tecnica, questo ti dà la possibilità di impostare ancora animazioni sul tuo sito. E anche se sei in grado di scrivere il tuo CSS, Animator può comunque velocizzare i tuoi flussi di lavoro con la sua interfaccia.

Nella nostra recensione pratica di Animator, daremo uno sguardo più approfondito a ciò che offre questo plugin e ti mostreremo come usarlo per impostare le animazioni di WordPress.

Recensione dell'animatore: cosa offre il plug-in?

Il vantaggio di alto livello di Animator è che ti consente di aggiungere tantissime animazioni diverse al tuo sito senza bisogno di CSS, JS o altre conoscenze tecniche approfondite.

Invece, puoi fare tutto da un'interfaccia punta e clicca, completa di una sequenza temporale dell'animazione per aiutarti a controllare le tue animazioni.

Animator proviene dallo stesso team del popolare plug-in CSS Hero, se lo conosci. In poche parole, Animator è per le animazioni ciò che CSS Hero è per lo stile CSS generale.

Esaminiamo alcune delle funzionalità più importanti in modo un po' più dettagliato.

Interfaccia punta e clicca

Per aiutarti a gestire le tue animazioni, Animator offre una semplice interfaccia punta e clicca.

Ci sono due parti principali:

1. Un'anteprima visiva a tutta larghezza del tuo sito : man mano che aggiungi animazioni, puoi vedere immediatamente come appaiono nell'anteprima dal vivo. Questo è davvero utile in modo da poter apportare piccole modifiche senza dover ricaricare costantemente un'anteprima separata.
2. Una sequenza temporale dell'animazione : puoi utilizzare la sequenza temporale per impostare una o più animazioni in base al comportamento o al tempo di scorrimento dell'utente. Puoi trascinare le cose e regolare le impostazioni per ottenere l'effetto perfetto.

Avrai uno sguardo molto più dettagliato a questa interfaccia nella sezione pratica... ma nel complesso, è molto facile da usare.

3+ modalità di animazione di alto livello con tantissime proprietà di animazione

Per aiutarti a configurare le tue animazioni, Animator offre tre modalità di alto livello:

• Parallasse : animazioni "interpolate" basate sulla posizione percentuale dell'elemento nel viewport. Tween è l'abbreviazione di inbetween: l'idea di base qui è che ti consente di creare effetti di scorrimento parallasse.
• Scorri : attiva stili o animazioni CSS specifici dopo che l'utente ha fatto scorrere un numero specifico di pixel. Ad esempio, puoi applicare stili specifici dello stato all'intestazione quando l'utente scorre la pagina verso il basso.
• A tempo : crea animazioni basate sul tempo che si verificano in base a una pianificazione prestabilita. Ad esempio, aggiungendo un'animazione float a un elemento per farlo risaltare.

Ecco alcuni esempi generici di Animator che mostrano le diverse modalità di animazione:

Oltre alle modalità di animazione di alto livello, hai anche la possibilità di animare una vasta gamma di proprietà CSS, incluse le seguenti:

• Colore di sfondo
• Posizione di sfondo
• Ombra della scatola
• Dimensione del font
• Spaziatura del carattere
• Opacità
• Prospettiva
• Ruota X, Y o Z
• Scala
• Inclina X o Y
• Larghezza
• …molto di più

Per semplificare le cose, Animator include preset per molti di questi:

Tuttavia, hai anche la possibilità di creare la tua animazione, che ti consente di andare oltre questi preset, se necessario.

Funziona con editor nativo, temi e creatori di pagine

Oltre a lavorare con l'editor nativo di WordPress, Animator funziona anche con temi di terze parti e plug-in per la creazione di pagine.

Ciò include, ma non è limitato a, i seguenti strumenti:

• Elementor
• Costruttore di castori
• Div
• Costruttore di pagine WPBakery
• Avada
• Astra
• Ossigeno

Fondamentalmente, Animator dovrebbe funzionare su qualsiasi elemento del tuo sito, indipendentemente da dove provenga quell'elemento.

Ad esempio, forse ti piace Beaver Builder per il design, ma ritieni che le opzioni di animazione di Beaver Builder siano troppo limitate per le tue esigenze.

Installando Animator insieme a Beaver Builder, otterrai la possibilità di aggiungere animazioni più avanzate ai tuoi progetti di Beaver Builder.

Modifica o esportazione manuale di animazioni (per utenti più avanzati)

Sebbene Animator sia progettato in modo che gli utenti non tecnici possano creare animazioni utilizzando l'interfaccia punta e clicca, gli utenti più avanzati potrebbero apprezzare il fatto che Animator ti dia comunque accesso al codice sottostante se desideri apportare modifiche direttamente.

Puoi anche esportare i dati dell'app, se necessario.

Plugin completamente autonomo

Sebbene Animator provenga dal team di CSS Hero, non è necessario che CSS Hero sia installato per utilizzare Animator.

Cioè, Animator è un plug-in completamente autonomo.

Detto questo, Animator funzionerà comunque bene con CSS Hero, quindi sei totalmente libero di utilizzare entrambi se desideri un controllo senza codice sullo stile del tuo sito.

Come creare animazioni WordPress utilizzando il plug-in Animator

Ora che hai capito cosa offre Animator, esaminiamo com'è effettivamente utilizzare Animator sul tuo sito.

Di seguito, ti mostrerò passo dopo passo come configurare le animazioni di WordPress utilizzando Animator e un sito demo che ho creato con il tema Astra e l'editor nativo di WordPress.

1. Apri l'interfaccia di Animator sulla pagina che desideri animare

Per iniziare, ti consigliamo di aprire l'interfaccia di Animator sulla pagina che contiene il contenuto che desideri animare.

Se desideri animare un elemento a livello di sito ( come la tua intestazione ), puoi semplicemente aprire qualsiasi pagina che includa la tua intestazione. Tutte le animazioni impostate verranno applicate automaticamente a tutte le istanze di tale intestazione.

Per avviare l'interfaccia di Animator, devi solo fare clic sull'opzione Hero Animator sulla barra degli strumenti di WordPress mentre visualizzi la relativa pagina.

2. Selezionare l'elemento che si desidera animare

Dopo aver aperto l'interfaccia di Animator, dovresti vedere un'anteprima visiva della tua pagina, insieme all'interfaccia di Animator in basso.

Per iniziare, ti consigliamo di selezionare l'elemento da animare facendo clic su di esso nell'anteprima dal vivo.

Passando il mouse sopra l'anteprima dal vivo, Animator mostrerà alcune informazioni aggiuntive su ciascun elemento, che ti aiuteranno a scegliere quello giusto.

Ad esempio, per animare l'immagine nel mio progetto di prova, devo solo selezionarla:

Puoi anche inserire manualmente una classe CSS o un ID, che potrebbe essere necessario per alcune immagini di sfondo.

Ad esempio, ho faticato a utilizzare l'approccio punta e clicca per selezionare l'immagine dell'eroe sul mio sito di prova. Sembra essere qualcosa con il modo in cui il sito demo di Astra ha impostato l'immagine come sfondo del contenitore nel suo speciale blocco Contenitore, perché non ho riscontrato problemi utilizzando il punta e fai clic per selezionare qualsiasi altra immagine.

3. Scegli la tua modalità di animazione

Dopo aver selezionato l'elemento da animare, selezionare la modalità di animazione utilizzando la casella Relativo a .

Ancora una volta, hai tre opzioni:

1. Altezza della finestra (AKA parallasse)
2. Pixel a scorrimento
3. Tempo

In pratica stai facendo un'affermazione dichiarativa, ad esempio "Voglio animare [questo elemento] in relazione a [questa modalità di animazione]".

Per questo esempio, l'ho impostato in modo da animare l'immagine del mio sito rispetto a un timer in loop.

Nota : puoi aggiungere più tipi di animazioni a un singolo elemento. Ad esempio, puoi aggiungere sia un'animazione basata sul tempo che un'animazione di parallasse (altezza della finestra).

4. Imposta la tua animazione usando la linea temporale

Ora che hai scelto ciò che stai animando, sei pronto per impostare effettivamente la tua animazione utilizzando la sequenza temporale.

Per farlo, fai clic sull'icona più per aggiungere animazione :

Questo aprirà un popup che contiene i diversi tipi di animazioni che puoi usare con quella modalità di animazione.

Ad esempio, per un'animazione basata sul tempo, alcune delle opzioni preimpostate includono quanto segue:

• Rimbalzo
• Cadente
• Galleggiante
• Sfocatura dello spazio delle lettere
• Tendone
• Polso d'ombra
• Salto ridotto
• Giro semplice

Puoi vedere anteprime animate di come potrebbe apparire quell'animazione, il che è davvero bello per scegliere l'animazione giusta.

Se desideri creare un tipo di animazione diverso che non sia nell'elenco predefinito, puoi anche creare il tuo tipo di animazione.

Quando scegli un'animazione, questa verrà visualizzata sulla sequenza temporale. L'animazione si applicherà anche all'anteprima dal vivo, così puoi vedere esattamente come apparirà sul tuo sito.

Per un'animazione basata sul tempo, vedrai apparire una linea mentre ti muovi attraverso la barra della sequenza temporale al completamento dell'animazione, il che è davvero utile.

Se vuoi rendere l'animazione più lunga o più corta, puoi semplicemente trascinare la barra sulla timeline.

Puoi anche fare clic sull'icona a tre punti per accedere a impostazioni più avanzate, ad esempio se eseguire o meno il ciclo dell'animazione (e in tal caso, per quanto tempo).

Se desideri aggiungere più animazioni, puoi ripetere i passaggi per aggiungere un'altra animazione.

Potresti quindi organizzare quelle animazioni sulla sequenza temporale per ottenere l'effetto desiderato.

Assicurati di disattivare il loop infinito se desideri utilizzare più animazioni basate sul tempo.

Non sei nemmeno limitato a creare lo stesso tipo di animazione. Ad esempio, potresti tecnicamente aggiungere allo stesso elemento sia animazioni temporali che animazioni basate sullo scorrimento.

Per gli elementi con scorrimento parallasse, Animator consente inoltre di controllare LERP (interpolazione lineare) per uniformare i comportamenti di scorrimento dell'elemento.

Per regolarlo, puoi utilizzare il menu a discesa Lerp sul lato sinistro dell'interfaccia.

5. Pubblica le tue animazioni

Quando sei soddisfatto delle tue animazioni, tutto ciò che devi fare è fare clic sul pulsante Salva per pubblicarle sul tuo sito.

C'è anche una comoda opzione che ti consente di scegliere se pubblicare o meno le tue animazioni nella versione mobile del tuo sito.

Esplorare alcune altre modalità di animazione

Diverse modalità di animazione avranno interfacce leggermente diverse sulla timeline.

Ad esempio, se scegli un'animazione Viewport Height, la sequenza temporale cambierà da secondi a percentuale relativa di altezza viewport.

Ad esempio, puoi vedere che inizia al 150% e arriva fino al -50%.

Se stai animando qualcosa come il colore di sfondo, puoi scegliere colori diversi in base alla relativa profondità di scorrimento:

Per un'animazione di pixel di scorrimento, vedrai numeri di pixel specifici anziché percentuali relative.

Ad esempio, se imposti il ​​passo dell'animazione a 600 pixel, l'animazione avverrà quando l'utente avrà fatto scorrere esattamente 600 pixel.

Come modificare, esportare o manipolare direttamente il codice

Per gli utenti più avanzati, Animator ti consente anche di visualizzare i dati JSON grezzi delle tue animazioni. Puoi usarlo per modificare nuovamente le tue animazioni o copiarlo/incollarlo in un file di testo per avere un'istantanea completa delle animazioni correnti.

C'è anche un pannello Operazioni , rivolto a utenti più tecnici, che ti consente di manipolare in modo programmatico l'oggetto JSON di dati del plug-in aggiungendo il tuo codice javascript. Non sono uno sviluppatore, quindi non sono del tutto sicuro di quali opportunità questo aggiunga, ma immagino che gli sviluppatori apprezzeranno questo livello di controllo.

Puoi accedere a queste opzioni facendo clic sull'icona dei tre puntini accanto al pulsante Salva e scegliendo Esporta dati .

Prezzo dell'animatore

Animator è disponibile solo in una versione premium, ma ha un prezzo conveniente per quello che offre.

Al prezzo normale, ti costerà $ 49 per l'utilizzo su siti illimitati e un anno di supporto e aggiornamenti.

Tuttavia, per celebrare il suo lancio, il plug-in ha attualmente un prezzo di soli $ 29 nel momento in cui stiamo scrivendo la nostra recensione del plug-in Animator.

Se lo acquisti a questo prezzo di $ 29, puoi bloccare quel prezzo per i rinnovi se desideri continuare a ricevere supporto e aggiornamenti dopo il primo anno.

Se desideri testare il plug-in prima di effettuare l'acquisto, Animator ti consente di avviare una demo completamente funzionante dell'interfaccia di animazione. Puoi accedervi da questa pagina o facendo clic sul pulsante Prova demo nella home page di Animator.

C'è anche una garanzia di rimborso di 30 giorni, quindi puoi provarla sui tuoi siti senza alcun rischio per il tuo portafoglio.

Considerazioni finali sull'animatore

Nel complesso, Animator mantiene la sua promessa di offrire semplici animazioni punta e clicca.

Non sono certamente uno sviluppatore, ma sono stato in grado di mettermi in funzione molto rapidamente.

L'interfaccia basata sulla sequenza temporale semplifica l'organizzazione delle animazioni e la gestione delle relative impostazioni. È anche molto utile poter vedere immediatamente come appaiono queste animazioni nell'anteprima visiva, senza dover aggiornare la pagina.

Sebbene Animator sia abbastanza semplice per gli utenti non tecnici, penso che gli utenti avanzati potrebbero comunque trarne vantaggio solo perché può velocizzare le cose. Quindi, anche se sei in grado di scrivere il tuo CSS, potresti comunque preferire l'utilizzo di Animator per risparmiare tempo.

Se vuoi provare Animator tu stesso, puoi utilizzare i pulsanti qui sotto per iniziare: