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 librerie esterne come 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 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
  keyword this di un elemento con attributo href oppure id dell'elemento bersaglio
• behavior - stringa - 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' );">

Torna alla header

Return

Nulla.

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. Quasi tutti i 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 in assenza del parametro corrispondente). 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 - default:false - attributo fallback:nessuno
  elemento singolo oppure contenitore di blocchi a cui verrà applicata l'animazione, se false verrà applicata al blocco corrente
• type - false/stringa - default:single - attributo fallback:data-animate-type
  tipo di elemento/i a cui l'animazione sarà applicata. I valori possibili sono:
  • single - per elemento singolo
  • group - per un gruppo di elementi (esempio uno slideshow)
  • groups - per un gruppo di gruppi di elementi (esempio uno slider)
• active - false/numero intero- default:false - attributo fallback:data-animate-active
  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 - default:nulla - 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 - default:in base all'animazione - attributo fallback:data-animate-value
  valore che verrà moltiplicato per l'indice corrente (di solito active), in vari casi può essere anche negativo per specificare una direzione
• unit - false/stringa - default:in base all'animazione - 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 - 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 - default:false - 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

Ho aggiunto delle transizioni piuttosto lunghe in quasi tutti gli esempi per dare la possibilità di verificare l'animazione in tempi utili.

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'
• l'attributo data-animate-animation-container serve al codice javascript definito nel contenitore dei dots come punto di partenza da cui ricavare gli elementi interni. Inoltre è necessario nel pattern slider per gestire i gruppi di animazioni interne

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

In questo esempio userò un elemento con id per capire meglio le differenze successive.

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

Stesso risultato dell'esempio 1 ma senza utilizzare l'id.

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 un gruppo di elementi è piuttosto semplice, bisogna aggiungere 2 blocchi gutenberg contenitori agli elementi da animare e adattare seguendo la stessa logica utilizzata nel pattern slideshow. Da questo punto in poi le animazioni di esempio utilizzeranno gli attributi al posto dei parametri javascript così dovrebbe diventare tutto più facile:

Esempio 1

Animiamo un gruppo di titoli con animazione translateX verso sinistra, iniziamo preparando gli elementi:

• inseriamo nella pagina un contenitore con classe animation-container
• inseriamo al suo interno un altro contenitore con classe animation-group-container
• inseriamo al suo interno 3 titoli h2

Ora scriviamo il css utilizzando il controllo css nel primo contenitore come di consueto (così è più semplice da ritrovare):

.animation-container{
	width:100%;
	overflow:hidden;
	position:relative;
}

.animation-group-container{
	display:flex;
	transition:var(--wp--custom--transition);
	flex-wrap:nowrap;
	margin-bottom:5px;
}

.animation-container h2{
	min-width: 100%;
	transition: var(--wp--custom--transition);
}

Ora aggiungiamo gli attributi di animazione al secondo contenitore:

• data-animate-animation: translateX
• data-animate-type: group
• data-animate-autoforward: {"number":1,"delay":1000,"monitor":100} - questo serve ad animarlo automaticamente quando al 100% nel viewport

Infine avviamo l'animazione utilizzando il controllo js nel secondo contenitore:

AnimateElements();

Nota

In realtà il primo contenitore non sarebbe obbligatorio per l'animazione ma utilizzandolo dovremmo poter aggiungere al suo interno icone avanti/indietro e icone dots proprio come nel pattern slideshow (quindi aggiungendo anche colonne), inoltre se rispettata la stessa struttura il css sarà praticamente già scritto.

Risultato

Esempio 2

Ora animiamo un gruppo di icone con animazione rotateX e aggiungiamo i pulsanti avanti e indietro. Per fare questo nel minor tempo possibile copiamo la stessa struttura dal pattern slideshow ma:

• la classe del il contenitore principale è icons-animation-container
• al posto del blocco galleria ci sarà un blocco contenitore con classe icons-container
• al posto delle immagini singole ci saranno blocchi gutenberg icone
• ho rimosso per questo esempio il contenitore dei dots
• il resto della strutture del pattern, comprese le colonne e le icone avanti/indietro, rimane invariata

Il css applicato al contenitore principale, ottenuto semplicemente mantenendo il css dell'animazione rotateX e sostituendo le classi è:

:root { --icons-height:6rem; }

.icons-animation-container{
	width:100%;
	overflow:hidden;
	position:relative;
	height:var(--icons-height);
}

.icons-animation-container .icons-container{
	display:flex;
	transition:var(--wp--custom--transition);
	flex-wrap:nowrap;	
	margin-bottom:5px;
	height:var(--icons-height);
}

.icons-animation-container .icons-container .wp-block-gpci-icon{
	height:var(--icons-height);
	min-width: 100%;
	box-sizing: border-box;		
	transition: var(--wp--custom--transition);
	width: 100%;
}

/*rotateX*/
.icons-animation-container .icons-container[data-animate-animation="rotateX"]{	
	perspective: 800px;
	perspective-origin: 50% 100px;
	transform-style: preserve-3d;	
}
.icons-animation-container .icons-container[data-animate-animation="rotateX"] .wp-block-gpci-icon{ position:absolute; }
.icons-animation-container .icons-container[data-animate-animation="rotateX"][data-animate-current-state="notactive"] .wp-block-gpci-icon{ opacity:0; }
.icons-animation-container .icons-container[data-animate-animation="rotateX"][data-animate-current-state="active"] .wp-block-gpci-icon{ opacity:1; }

L'impostazione degli attributi al contenitore delle icone da animare è:

• data-animate-animation: rotateX
• data-animate-autoforward: {"number":1,"delay":5000,"monitor":100} - questa volta ho allungato il tempo di forward automatico a 5 secondi
• data-animate-type: group
• data-animate-value: 180

Risultato

Animare gruppo di gruppi di elementi

Animare un gruppo di gruppi di elementi è come animare un gruppo di elementi ma è necessario utilizzare un contenitore (che racchiude il tutto) con attributi:

• data-animate-animation-container = true
• data-animate-type = groups
• data-animate-autoforward (opzionale)

Per ora questo tipo di animazione è da configurare solo con attributi e la funzione AnimateElements è chiamata soltanto dal blocco contenitore. L'esempio ideale è il pattern slider.