Animation avec AOS

Ce plugin permet d’ajouter des animations, sur des éléments HTML, qui se déclenchent suivant la position du scroll. Il permet l’utilisation de la librairie AOS (Animate On Scroll) dans SPIP.

Crédit et documentation complémentaire : https://github.com/michalsnik/aos
MIT LICENCE AOS : https://github.com/michalsnik/aos?tab=MIT-1-ov-file

Installation

Le plugin n’ a pas de dépendance. L’utilisation du plugin inserer_modele est recommandée pour une saisie d’animations dans le texte des articles ou des rubriques

Activation

Activé, le plugin installe la librairie AOS et les CSS associées. Il initialise AOS avec

 AOS.init( {
	  offset: 0,         
	  delay: 0,          
	  duration:1200,     
          easing: 'ease',    
          once: false,      
          mirror: true,     
	 });

L’animation n’est pas chargée dans l’espace privé

Utilisation dans les squelettes

Le nom de l’animation en valeur de l’attribut data-aos suffit pour réaliser une animation . Par exemple, pour avoir un zoom, il suffit d’encadrer votre élément par data-aos='zoom'

<div  data-aos='zoom' >
     .. objet de l'animation ..
</div>

Une animation sans paramètre, prendra les valeurs par défaut du plugin et de AOS.init.

Ici, c’est une animation zoom avec un déclenchement , dés que le scrooll atteint la position de déclenchement ( par defaut: top-bottom), de l’objet de l’animation, sans délai de déclenchement et la durée de l’animation est 1200ms. De plus, l’animation est visible sur tous les écrans .

Vous pouvez ajouter des paramètres sous la forme data-aos-nomduparametre="valeur"

<div data-aos='nomanimation'  data-aos-nomduparametre="valeur">
     ..objet de l'animation..
</div> 

Exemple

<div  class="aoshidden-phone" data-aos='fade'  data-aos-offset="-300"   data-aos-delay="0"   data-aos-duration="1500" > 
....................
</div>

Ici, c’est une animation fade avec un déclenchement décalé de 300px par rapport a la position de déclenchement, par defaut: top-bottom, sans délai de déclenchement et la durée de l’animation est 1500ms. De plus, l’animation n’est pas visible sur mobile.

Sur la page sommaire de la dist, par exemple, on met une animation sur le descriptif du site par

<div class="content" id="content">
	<div  class="aoshidden-phone" data-aos='fade'  data-aos-offset= "0" data-aos-duration="2000" data-aos-anchor-placement="center-center" data-aos-once="false"  data-aos-mirror="true" 
  data-aos-easing="ease"> 
		[<div class="chapo">(#DESCRIPTIF_SITE_SPIP)</div>]
	</div>
	<INCLURE{fond=inclure/recents,env,ajax} />
</div><!--.content-->

Attention : ne pas mettre dans le div d’autres éléments que ceux de l’animation.

Utilisation dans le corps d’un texte d’article, rubrique ..

Dans le texte d’un article, une rubrique, le modèle permet de créer une animation sur un élément du texte et de modifier ses paramètres d’animation. La saisie simplifiée du modèle est possible avec le plugin inserer_modele.

<anim|debut|animation=nomanimation|nomduparametre=valeur>
...element de l'animation..
<anim|fin>

donnera :

<div data-aos='nomanimation'  data-aos-nomduparametre="valeur">
...element de l'animation..
</div> 

Exemples

<anim|debut|animation=zoom|once=non|delay=50>  <doc1|center> <anim|fin>

génèrera

 <div data-aos="zoom"  data-aos-once="false" datat-aos-delay="50"> <doc1|center> </div>

<anim|debut|animation=fade-down|once=non|mirror=oui|easing=ease-in-out|offset=100|anchor-placement=center-center|delay=50>
...
<anim|fin>

générera

<div data-aos="fade-down" data-aos-once="non" data-aos-mirror="oui" data-aos-easing="ease-in-out" data-aos-offset="100" data-aos-anchor-placement="center-center" data-aos-delay="50">
....
</div>

L’animation s’exécute à chaque passage aller ou retour à la position du scroll au centre de l’objet + 100px, avec un délai de 50 ms et avec la courbe ease-in-out.

Paramètrages

Animations disponibles

Fade animations:
fade
fade-up
fade-down
fade-left
fade-right
fade-up-right
fade-up-left
fade-down-right
fade-down-left

Flip animations:
flip-up
flip-down
flip-left
flip-right

Slide animations:
slide-up
slide-down
slide-left
slide-right

Zoom animations:
zoom-in
zoom-in-up
zoom-in-down
zoom-in-left
zoom-in-right
zoom-out
zoom-out-up
zoom-out-down
zoom-out-left
zoom-out-right

Animations rajoutée par le plugin
rotate-round
rotate-complet
translate-y

Vous pouvez rajouter des animations par css.

Répétition de l’animation

once —> oui animation une seule fois
once —> non animation a chaque passage du scroll

Position de déclenchement

Les paramètres offset et anchor-placement permettent de déterminer à quel endroit se déclenche l’animation. Par défaut, l’animation se lancera quand le scroll aura atteint le top-bottom.

Par exemple avec : data-aos-offset="100"  data-aos-anchor-placement="center-center"
l’animation se déclenchera 100px après que le scroll ait atteint le centre de l’objet animer.

Ces paramètres sont a affiner si vous désirez qu’une animation placée tout en haut de la page puisse être joué plusieurs fois ( pb de scroll) .

Anchor placements:
top-bottom
top-center
top-top
center-bottom
center-center
center-top
bottom-bottom
bottom-center
bottom-top

Déchenchement par une ancre

On peut choisir de déclencher l’animation sur une ancre en plaçant une ancre (id ="#NomDeLAncre") sur l’élément déclencheur.

<div data-aos="zoom " data-aos-anchor="#NomDeLAncre">
..
 </div>

Délai avant le déclenchement de l’animation

data-aos-delay de 0 et 3000ms, par pas de 50ms utilisable pour des animations décalées (exemples plus haut)

Durée de l’animation

data-aos-duration de 0 et 3000ms, par pas de 50ms : plus la valeur est élevée plus l’animation est lente.

Easing

La courbes d’accélérations (easing functions) décrit la vitesse à laquelle l’animation change en fonction du temps. Pour plus d’explication sur ce paramètre, voir https://easings.net

Easing functions :

linear
ease
ease-in
ease-out
ease-in-out
ease-in-back
ease-out-back
ease-in-out-back
ease-in-sine
ease-out-sine
ease-in-out-sine
ease-in-quad
ease-out-quad
ease-in-out-quad
ease-in-cubic
ease-out-cubic
ease-in-out-cubic
ease-in-quart
ease-out-quart
ease-in-out-quart

Désactivation de l’animation sur une certaine taille de l’écran

Classes ajoutées pour spip dans animation/css/aosparam.css :
class="{aoshidden-phone}" l’animation ne s’exécute pas sur mobile ( moins de 480ixel)
class="{aoshidden-tablet }" l’animation ne s’exécute pas sur mobile et tablette ( moins de 768 pixel)
class="{aoshidden-desktop}" l’animation ne s’exécute pas sur desktop ( au dela de 768px)

Le paramètre desactiver-anim du modèle génère la classe correspondante.

<anim|debut|animation=rotate-round|desactiver-anim=aoshidden-tablet>
<doc1|center>
<anim|fin>

donnera

<div class="aoshidden-tablet  aos-animate" data-aos="rotate-round">
<doc1|center>
</div>

Ici, l’animation rotate-round s’exécute avec les paramètres par défaut et n’est visible que sur un desktop.