<

Animazioni

Nel wordpress Gpci framework le animazioni di tipo semplice sono realizzate con combinazioni da configurare nel modo più facile possibile di blocchi, css, javascript e attributi senza l'utilizzo di librerie esterne. Le animazioni più complesse invece vengono realizzate scrivendo codice javascript con gsap.

Animazioni comuni

Nel file js-head.js è inserita la funzione AnimateElements che serve ad eseguire semplici animazioni su un elemento singolo, un gruppo di elementi o un gruppo di gruppi di elementi. La funzione è utilizzata nei pattern slideshow (gruppo di immagini) e slider(gruppo di gruppi di immagini, titoli, paragrafi e pulsanti) ed è descritta qui di seguito insieme a semplici esempi. Tenere presente che il flusso di lavoro più semplice è:

  1. inserire il blocco/blocchi o l'html da animare
  2. impostare gli attributi speciali
  3. definire il css in stato iniziale, ossia da elemento non ancora animato(ad esempio se l'animazione prevede di renderlo visibile con opacità: definire il css iniziale come opacity:0)
  4. usare la funzione javascript AnimateElements come da esempi

I pattern sono preconfigurati con attributi, css, css e javascript, quindi in quel caso(ossia la maggior parte dei casi) è sufficiente modificare gli attributi correnti per visualizzare l'animazione.

Funzione AnimateElements

Anima un elemento, un gruppo di elementi o un gruppo di gruppi di elementi. E' pensata anche per essere associata alle Dynamicvars e alla funzione MonitorElementPosition. Vari parametri di questa funzione hanno come fallback un attributo; questo significa che i parametri della funzione possono non essere specificati esplicitamente ma al loro posto possono essere utilizzati gli attributi speciali (che verranno automaticamente ricercati dalla funzione). Questo ci consente di configurare le animazioni semplicemente utilizzando css e attributi, poi la funzione sarà avviata direttamente nel blocco gutenberg con un'inizializzazione base. Probabilmente in futuro includerò una funzione da utilizzare nei template a livello globale/post type/pagina per avviare automaticamente le animazioni con attributi speciali.

Parametri

  • element - false/elemento js - opzionale (attributo fallback:nessuno) - default:elemento corrente
    elemento singolo oppure contenitore di blocchi a cui verrà applicata l'animazione
  • type - false/stringa - opzionale (attributo fallback:data-animate-type) - default:single
    tipo di elemento/i a cui l'animazione sarà applicata. 'single' per elemento singolo, 'group' per un gruppo di elementi(come slideshow)
  • active - false/numero intero- opzionale (attributo fallback:data-animate-active) - default:false
    indice corrente (su base 0) da applicare all'animazione. Usata nelle freccie avanti/indietro e nei dots. Per le animazioni di tipo single sarà sempre 1. Per le animazioni di tipo group può essere usato per selezionare l'elemento di partenza
  • animation - false/stringa - opzionale (attributo fallback:data-animate-animation)
    animazione da applicare, se non specificata la funzione ritorna senza fare nulla. Le animazioni disponibili sono: 'opacity', 'translateX', 'translateY', 'rotateX', 'rotateY'.
  • value - false/numero intero - opzionale (attributo fallback:data-animate-value)
    valore che verrà moltiplicato per l'indice corrente(di solito active), in vari casi può essere anche negativo pere specificare una direzione
  • unit - false/stringa - opzionale (attributo fallback:data-animate-unit)
    unità di misura che sarà associata al value, es: %, px, rem, em. Nel caso di animazione opacity e rotate lasciare su false (in quanto verrà ignorato)
  • WaitFor - false/stringa - opzionale (attributo fallback:data-animate-waitfor)
    se specificato l'animazione aspetterà a partire. Valori di attesa consentiti: documentready o monitorposition. Non usare insieme ad autoforward
  • Autoforward - false/oggetto - opzionale (attributo fallback:data-animate-autoforward)
    se usato configura l'autoforward. Le proprietà dell'oggetto sono:
    number - numero - numero di spostamenti nella transizione - default:1
    delay - numero - tempo tra una transizione e l'altra - default:3000
    monitor - numero - percentuale di visibilità dell'elemento per iniziare/continuare la transizione automatica - default:100

Esempi

vedi sotto

Return

Nulla.

Note

Per alcune animazioni, se non specificati value e unit verranno applicati dei valori predefiniti.

  • opacity: unit sarà sempre ignorato
  • translateX: il value sarà 100 e unit sarà %
  • rotateX e rotateY: unit, anche se specificato, sarà sempre 'deg'

Funzione ScrollToElementId

Anima la transizione verso un'ancora interna nella pagina. La funzione è un contenitore del metodo window.scrollTo con alcune condizioni aggiunte ed è utilizzata nel pattern icona to top. Solitamente sarà usata insieme all'attributo html onclick su un'icona, un pulsante o un elemento inline. Si usa in uno di questi 2 contesti (sempre all'interno di un attributo onclick):

  1. si ha un elemento con attributo href (esempio se si setta un'ancora da gutenberg): l'id verrà copiato dall'attributo href
  2. non si ha un elemento con attributo href quindi il bersaglio si specifica manualmente

Parametri

  • id - stringa oppure keyword this- obbligatorio
    keyword this di un elemento con attributo href oppure id dell'elemento bersaglio
  • behavior - stringa - opzionale - default:smooth
    tipo di animazione. I valori possibili sono: smooth, instant o auto

Esempi

I 2 esempi fanno la stessa identica cosa sono nei due modi sopraindicati:

//Contesto 1
<a href="#header-primary" onclick="ScrollToElementId( this );">...</a>

//Contesto 2
<button onclick="ScrollToElementId( id='header-primary' );">

Return

Nulla.

Animare elemento singolo

Per animare un elemento singolo è sufficiente puntare direttamente all'elemento senza necessità di contenitori aggiuntivi. Per questo non ho preparato nessun pattern in quanto è veramente basilare.

Esempio 1

Rende visibile un paragrafo, partendo da un id, appena caricata la pagina, utilizzando javascript.

Html

<p id="elemento-singolo-esempio1-">Esempio 1</p>
<!--alternativamente è possibile usare un blocco gutenberg e assegnargli l'id-->

Css iniziale

#elemento-singolo-esempio1{
  opacity:0;
  transition:3s;
}

Javascript

AnimateElements( element=document.getElementById('elemento-singolo-esempio1'), type='single', active=false, animation='opacity', value=1, unit=false, WaitFor='documentready' );

Risultato

Esempio 1(ricarica la pagina ora)

Esempio 2

Rende visibile un paragrafo, appena caricata la pagina, utilizzando javascript.

Html

<p style="opacity:0; transition:3s;">Esempio 2</p>

Javascript

AnimateElements( element=GetCurrentBlockFromCurrentScript(), type='single', active=false, animation='opacity', value=1, unit=false, WaitFor='documentready' );

Risultato

Esempio 2(ricarica la pagina ora)

Stesso risultato ma utilizzando gli attributi

<p style="opacity:0; transition:3s;" data-animate-type="single" data-animate-type="opacity" data-animate-value="1" data-animate-waitfor="documentready">Esempio 2</p>
AnimateElements();

Esempio 3

Sposta di 200px verso destra un paragrafo appena entra per la prima volta per il 100% nel viewport.

Html

<p style="transition:3s;">Esempio 3</p>

Javascript

AnimateElements( element=GetCurrentBlockFromCurrentScript(), type='single', active=false, animation='translateX', value='200', unit='px', WaitFor='monitorposition,100' );
//nel parametro WaitFor specificare: monitorposition e la percentuale di quanto l'elemento è visibile nel viewport

Risultato

Esempio 3

Esempio 4

Sposta di 200px verso sinistra un paragrafo appena entra per la prima volta per il 100% nel viewport, ma quando esce da viewport ritorna in posizione originale.

Html

<p style="transition:3s; line-height:200px; background:#ebeff2;">Esempio 4</p>

Javascript

AnimateElements( element=GetCurrentBlockFromCurrentScript(), type='single', active=false, animation='translateX', value='-200', unit='px', WaitFor='monitorposition,100,reset,0,px' );
//nel parametro WaitFor specificare: monitorposition, la percentuale di quanto l'elemento è visibile nel viewport, reset, value e unit(riferiti all'elemento non visibile)
//notare anche che il value è negativo per spostare a sinistra

Risultato

Esempio 4

Esempio 5

Prima di andare avanti rivediamo una piccola differenza per l'animazione opacity monitorando la posizione.

Html

<p style="transition:3s; line-height:200px; background:#ebeff2; opacity:0;">Esempio 5</p>

Javascript

AnimateElements( element=GetCurrentBlockFromCurrentScript(), type='single', active=false, animation='opacity', value='1', unit=false, WaitFor='monitorposition,100,reset,0' );
//ricordarsi che con opacity l'unità di misura(parametro unit) non serve, neanche all'interno del parametro Waitfor

Risultato

Esempio 5

Esempio 6

Ora vediamo le altre animazioni monitorandone la posizione ma senza reset: è il momento di translateY. Il paragrafo verrà spostato in alto.

Html

<p style="transition:3s;">Esempio 6</p>

Javascript

AnimateElements( element=GetCurrentBlockFromCurrentScript(), type='single', active=false, animation='translateY', value='-75', unit='px', WaitFor='monitorposition,100' );

Risultato

Esempio 6

Esempio 7

RotateX: per questa animazione userò un pulsante con il suo codice html copiato dal blocco gutenberg.

Html

<div class="wp-block-button" style="perspective: 800px; perspective-origin: 50% 100px; transform-style: preserve-3d; transition: all 3s ease 0s; transform: rotateX(5deg);"><a class="wp-block-button__link wp-element-button">Esempio 7</a></div>

Javascript

AnimateElements( element=GetCurrentBlockFromCurrentScript(), type='single', active=false, animation='rotateX', value=180, unit=false, WaitFor='monitorposition,100' );

Risultato

Esempio 8

rotateY

Html

<div class="wp-block-button" style="perspective: 800px; perspective-origin: 50% 100px; transform-style: preserve-3d; transition: all 3s ease 0s; transform: rotateX(5deg);"><a class="wp-block-button__link wp-element-button">Esempio 7</a></div>

Javascript

AnimateElements( element=GetCurrentBlockFromCurrentScript(), type='single', active=false, animation='rotateY', value=180, unit=false, WaitFor='monitorposition,100' );

Risultato

Le animazioni al momento sono tutte qui, probabilmente in futuro ne inserirò altre e una 'custom' per averne una da definire al momento.

Animare gruppo di elementi

Animare elementi multipli in contenitori univoci

Per animare elementi multipli in contenitori univoci ogni contenitore dovrà avere assegnato un id, per poterlo bersagliare con css ed elemento js. Questo va bene se ci sono pochi elementi da animare nella pagina ma è più scomodo(anche se comunque fattibile) nei query loop e se ci sono da animare un numero indefinito di elementi.

Esempio 1

Html

<p id="single-p">paragrafo singolo</p>

Css iniziale

#single-p{ opacity:0; transition:var(--wp--custom--transition); }

Javascript

document.addEventListener( 'DOMContentLoaded', function(){
  AnimateElements( element=document.getElementById('single-p'), animation='opacity', value='0.5' );
} );