Documentation du plugin Gutenberg Animations

Exemple

Fading

Fade in

Fade in left

Fade in right

Fade in top

Fade in bottom

Fade in left big

Fade in right big

Fade in top big

Fade in bottom big

Fade in top left

Fade in top right

Fade in bottom left

Fade in bottom right

Zoom

Zoom in

Zoom in Down

Zoom in Left

Zoom in Right

Zoom in Up

Bounce

Bounce in

Bounce in Down

Bounce in Left

Bounce in Right

Bounce in Up

Rotate

Rotate in

Rotate in down left

Rotate in down right

Rotate in up left

Rotate in up right

Attention seekers

Bounce

Flash

Pulse

Rubber band

Shake X

Shake Y

Head shake

Swing

Tada

Wobble

Jello

Heart beat

Special

Jack in the box

Roll in

Light speed in right

Light speed in left

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

Fading

Zoom

Bounce

Rotate

Attention seekers

Special

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