Documentation du plugin Gutenberg Animations

Exemple

Estompage

Fondu progressive

Fondu à gauche

Fondu à droite

Fondu depuis le haut

Fondu depuis le bas

Fondu à gauche en grand

Fondu à droite en grand

Fondu en haut en grand

Fondu en bas en grand

Fondu en haut à gauche

Fondu en haut à droite

Fondu en bas à gauche

Fondu en bas à droite

Zoom

Zoom avant

Zoom avant vers le bas

Zoom avant vers la gauche

Zoom avant vers la droite

Zoom avant vers le haut

Rebond

Bounce in

Rebond vers le bas

Rebond vers la gauche

Rebond vers la droite

Rebond vers le haut

Rotation

Rotation depuis le bas à gauche

Rotation depuis le bas à droite

Rotation depuis le haut à gauche

Rotation depuis le haut à droite

Effets pour attirer l’attention

Rebond

Flash

Pulsation

Bande élastique

Secouer horizontalement

Secouer verticalement

Secouer la tête

Balancer

Tada

Oscillation

Gélatine

Battement de cœur

Spécial

Diable sortant de sa boîte

Rouler

Vitesse lumière à droite

Vitesse lumière à gauche

Personnalisation

Blocs

Par défaut, les animations sont disponibles sur tous les blocs, il est possible d'exclure des blocs avec le code PHP suivant à mettre dans le fichier functions.php de votre thème:

PHP

add_filter( "habefast_gutenberg_animations_get_excludes_blocks",function($array){
	$exludesBlocks = ["core/heading"]; //array with excluded blocks name
   	return array_merge($exludesBlocks,$array);
},11);

Valeurs par défaut

Groupes par défaut

PHP

[
	"fadein" => ["label" => __("Fading", "habefast-gutenberg-animations")],
    "zoom" => ["label" => __("Zoom", "habefast-gutenberg-animations")],
    "bounce" => ["label" => __("Bounce", "habefast-gutenberg-animations")],
    "rotate" => ["label" => __("Rotate", "habefast-gutenberg-animations")],
    "attention" => ["label" => __("Attention seekers", "habefast-gutenberg-animations")],
    "special" => ["label" => __("Special", "habefast-gutenberg-animations")]
]

Animations par défaut

PHP

"animationsList" => [
	"none" => ["label" => __('None', "habefast-gutenberg-animations")],
    "fade_in" => ["label" => __('Fade in', "habefast-gutenberg-animations"), "group" => "fadein"],
    "fade_left" => ["label" => __('Fade in left', "habefast-gutenberg-animations"), "group" => "fadein"],
    "fade_right" => ["label" => __('Fade in right', "habefast-gutenberg-animations"), "group" => "fadein"],
    "fade_top" => ["label" => __('Fade in top', "habefast-gutenberg-animations"), "group" => "fadein"],
    "fade_bottom" => ["label" => __('Fade in bottom', "habefast-gutenberg-animations"), "group" => "fadein"],
    "fade_left_big" => ["label" => __('Fade in left big', "habefast-gutenberg-animations"), "group" => "fadein"],
    "fade_right_big" => ["label" => __('Fade in right big', "habefast-gutenberg-animations"), "group" => "fadein"],
    "fade_top_big" => ["label" => __('Fade in top big', "habefast-gutenberg-animations"), "group" => "fadein"],
    "fade_bottom_big" => ["label" => __('Fade in bottom big', "habefast-gutenberg-animations"), "group" => "fadein"],
    "fade_top_left" => ["label" => __('Fade in top left', "habefast-gutenberg-animations"), "group" => "fadein"],
    "fade_top_right" => ["label" => __('Fade in top right', "habefast-gutenberg-animations"), "group" => "fadein"],
    "fade_bottom_left" => ["label" => __('Fade in bottom left', "habefast-gutenberg-animations"), "group" => "fadein"],
    "fade_bottom_right" => ["label" => __('Fade in bottom right', "habefast-gutenberg-animations"), "group" => "fadein"],
    "zoom_in" => ["label" => __('Zoom in', "habefast-gutenberg-animations"), "group" => "zoom"],
    "zoom_in_down" => ["label" => __('Zoom in Down', "habefast-gutenberg-animations"), "group" => "zoom"],
    "zoom_in_left" => ["label" => __('Zoom in Left', "habefast-gutenberg-animations"), "group" => "zoom"],
    "zoom_in_right" => ["label" => __('Zoom in Right', "habefast-gutenberg-animations"), "group" => "zoom"],
    "zoom_in_up" => ["label" => __('Zoom in Up', "habefast-gutenberg-animations"), "group" => "zoom"],
    "bouncein" => ["label" => __('Bounce in', "habefast-gutenberg-animations"), "group" => "bounce"],
    "bounceindown" => ["label" => __('Bounce in Down', "habefast-gutenberg-animations"), "group" => "bounce"],
    "bounceinleft" => ["label" => __('Bounce in Left', "habefast-gutenberg-animations"), "group" => "bounce"],
    "bounceinright" => ["label" => __('Bounce in Right', "habefast-gutenberg-animations"), "group" => "bounce"],
    "bounceinup" => ["label" => __('Bounce in Up', "habefast-gutenberg-animations"), "group" => "bounce"],
    "rotatein" => ["label" => __('Rotate in', "habefast-gutenberg-animations"), "group" => "rotate"],
    "rotateindownleft" => ["label" => __('Rotate in down left', "habefast-gutenberg-animations"), "group" => "rotate"],
    "rotateindownright" => ["label" => __('Rotate in down right', "habefast-gutenberg-animations"), "group" => "rotate"],
    "rotateinupleft" => ["label" => __('Rotate in up left', "habefast-gutenberg-animations"), "group" => "rotate"],
    "rotateinupright" => ["label" => __('Rotate in up right', "habefast-gutenberg-animations"), "group" => "rotate"],
    "bounce" => ["label" => __('Bounce', "habefast-gutenberg-animations"), "group" => "attention"],
    "flash" => ["label" => __('Flash', "habefast-gutenberg-animations"), "group" => "attention"],
    "pulse" => ["label" => __('Pulse', "habefast-gutenberg-animations"), "group" => "attention"],
    "rubberband" => ["label" => __('Rubber band', "habefast-gutenberg-animations"), "group" => "attention"],
    "shakex" => ["label" => __('Shake X', "habefast-gutenberg-animations"), "group" => "attention"],
    "shakey" => ["label" => __('Shake Y', "habefast-gutenberg-animations"), "group" => "attention"],
    "headshake" => ["label" => __('Head shake', "habefast-gutenberg-animations"), "group" => "attention"],
    "swing" => ["label" => __('Swing', "habefast-gutenberg-animations"), "group" => "attention"],
    "tada" => ["label" => __('Tada', "habefast-gutenberg-animations"), "group" => "attention"],
    "wobble" => ["label" => __('Wobble', "habefast-gutenberg-animations"), "group" => "attention"],
    "jello" => ["label" => __('Jello', "habefast-gutenberg-animations"), "group" => "attention"],
    "heartbeat" => ["label" => __('Heart beat', "habefast-gutenberg-animations"), "group" => "attention"],
    "jackinthebox" => ["label" => __('Jack in the box', "habefast-gutenberg-animations"), "group" => "special"],
    "rollin" => ["label" => __('Roll in', "habefast-gutenberg-animations"), "group" => "special"],
    "lightspeedinright " => ["label" => __('Light speed in right', "habefast-gutenberg-animations"), "group" => "special"],
    "lightspeedinleft" => ["label" => __('Light speed in left', "habefast-gutenberg-animations"), "group" => "special"],
],

Délais par défaut

PHP

"delayList" => [
	"none" => ["label" => __('None', "habefast-gutenberg-animations")],
    "d-100ms" => ["label" => __('100 Milliseconds', "habefast-gutenberg-animations")],
    "d-200ms" => ["label" => __('200 Milliseconds', "habefast-gutenberg-animations")],
    "d-500ms" => ["label" => __('500 Milliseconds', "habefast-gutenberg-animations")],
    "d-1s" => ["label" => __('One Second', "habefast-gutenberg-animations")],
    "d-2s" => ["label" => __('Two Seconds', "habefast-gutenberg-animations")],
	"d-3s" => ["label" => __('Three Seconds', "habefast-gutenberg-animations")],
],

Vitesse par défaut

PHP

"speedList" => [
	"none" => ["label" => __('None', "habefast-gutenberg-animations")],
    "slow" => ["label" => __('Slow', "habefast-gutenberg-animations")],
    "slower" => ["label" => __('Slower', "habefast-gutenberg-animations")],
    "default" => ["label" => __('Default', "habefast-gutenberg-animations")],
    "fast" => ["label" => __('Fast', "habefast-gutenberg-animations")],
	"faster" => ["label" => __('Faster', "habefast-gutenberg-animations")],
]

Ajouter une animation

Pour ajouter une nouvelle animation, vous devez ajouter cette animation dans les réglages de bloc et ajouter le CSS associé.

Ajouter l'animation à l'éditeur Gutenberg

Pour ajouter l'animation à l'éditeur Gutenberg, vous pouvez utiliser le code PHP suivant en le collant dans le fichier functions.php de votre thème enfant.

PHP

add_filter("habefast_gutenberg_animations_get_animations_datas",function($array){
  	if(isset($array["animationsList"])){
    	$array["animationsList"]["custom_rotate"] = ["label"=>"Custom Rotate", "group"=>"rotate"];
  	}
  	return $array;
},11);

Ajouter le style associé à la nouvelle animation

Dans le fichier style.css de votre thème enfant, vous pouvez ajouter le code CSS associé, voici un exemple:

CSS

.hf_animated.custom_rotate{
	transform: rotateX(720deg);
    transform-origin: center bottom;
    opacity: 0;
    -webkit-transition: all 1500ms cubic-bezier(0.23, 1, 0.32, 1);
    -moz-transition: all 1500ms cubic-bezier(0.23, 1, 0.32, 1);
    -o-transition: all 1500ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: all 1500ms cubic-bezier(0.23,1,0.32,1);
    transform-style: preserve-3d;
}
.hf_animated.custom_rotate.active{
 	transform: rotateX(0);
 	opacity: 1;
}

Supprimer une animation

Pour supprimer une animation, vous pouvez utilisez le code exemple suivant dans le fichier functions.php de votre thème enfant:

PHP

add_filter("habefast_gutenberg_animations_get_animations_datas",function($array){
  	if(isset($array["animationsList"])){
    	if(isset($array["animationsList"]["zoom_in"])){
      		unset($array["animationsList"]["zoom_in"]);
		}
	}
 	return $array;
},11);

Ajouter un délai

Pour ajouter un nouveau délai, vous devez ajouter ce délai dans les réglages de bloc et ajouter le CSS associé.

Ajouter le délai à l'éditeur Gutenberg

Pour ajouter le délai à l'éditeur Gutenberg, vous pouvez utiliser le code PHP suivant en le collant dans le fichier functions.php de votre thème enfant.

PHP

add_filter("habefast_gutenberg_animations_get_animations_datas",function($array){
	if(isset($array["delayList"])){
		$array["delayList"]["delay-custom"] = ["label"=>"Custom delay"];
	}
	return $array;
},11);

Ajouter le style associé au nouveau délai

Dans le fichier style.css de votre thème enfant, vous pouvez ajouter le code CSS associé, voici un exemple:

CSS

.hf_animated.delay-custom{
	transition-delay: 1.800s !important;
}

Supprimer un délai

Pour supprimer un délai, vous pouvez utilisez le code exemple suivant dans le fichier functions.php de votre thème enfant:

PHP

add_filter("habefast_gutenberg_animations_get_animations_datas",function($array){
  	if(isset($array["animationsList"])){
    	if(isset($array["animationsList"]["zoom_in"])){
      		unset($array["animationsList"]["zoom_in"]);
		}
	}
 	return $array;
},11);

Ajouter une vitesse

Pour ajouter une nouvelle vitesse, vous devez ajouter ce délai dans les réglages de bloc et ajouter le CSS associé.

Ajouter la vitesse à l'éditeur Gutenberg

Pour ajouter la vitesse à l'éditeur Gutenberg, vous pouvez utiliser le code PHP suivant en le collant dans le fichier functions.php de votre thème enfant.

PHP

add_filter("habefast_gutenberg_animations_get_animations_datas",function($array){
	if(isset($array["speedList"])){
		$array["speedList"]["custom-speed"] = ["label"=>"Custom speed"];
	}
	return $array;
},11);

Ajouter le style associé à la nouvelle vitesse

Dans le fichier style.css de votre thème enfant, vous pouvez ajouter le code CSS associé, voici un exemple:

CSS

.hf_animated.custom-speed{
	transition-duration: 1.750s !important;
}

Supprimer une vitesse

Pour supprimer une vitesse, vous pouvez utilisez le code exemple suivant dans le fichier functions.php de votre thème enfant:

PHP

add_filter("habefast_gutenberg_animations_get_animations_datas",function($array){
	if(isset($array["speedList"])){
		if(isset($array["speedList"]["slow"])){
        	unset($array["speedList"]["slow"]);
		}
	}
 	return $array;
},11);

Gutenberg Animations

Prérequis

Installation

Exemple

Estompage

Zoom

Rebond

Rotation

Effets pour attirer l’attention

Spécial

Personnalisation

Blocs

Valeurs par défaut

Groupes par défaut

Animations par défaut

Délais par défaut

Vitesse par défaut

Ajouter une animation

Ajouter l'animation à l'éditeur Gutenberg

Ajouter le style associé à la nouvelle animation

Supprimer une animation

Ajouter un délai

Ajouter le délai à l'éditeur Gutenberg

Ajouter le style associé au nouveau délai

Supprimer un délai

Ajouter une vitesse

Ajouter la vitesse à l'éditeur Gutenberg

Ajouter le style associé à la nouvelle vitesse

Supprimer une vitesse