Motion for WP

Lors de mon utilisation courante de Gutenberg et mon expérience dans la conception de projets WordPress je me suis aperçu, qu’il manquait, dans l’écosystème Gutenberg, un plugin « d’animation » léger, qui n’emporte pas avec lui tout un écosystème énorme et avec une interface de personnalisation facile à prendre en main.

Alors je me suis relevé les manches et je me suis lancé dans la conception de mon premier plugin pour WordPress !
Le but de MotionForWP est donc d’apporter une aide sur la dynamisation de votre interface via l’editeur de WordPress, Gutenberg.

Blocks Gutenberg

Avec le plugin Motion for WP, vous bénéficiez aussi de blocks Gutenberg proposant des animations plus complexes, actuellement seulement 1 block est proposé depuis la version 0.9.4.

Il s’agit du bloc « Counter », qui permet d’effectuer une animation de compteur à l’apparition du bloc sur la page.

Personnaliser les animations

Vous êtes développeur, occupé de développer un thème et vous voudriez pourvoir rajouter vos propres animations ou courbes d’accélération ? C’est tout à fait possible avec MotionForWP !

Pour cela il vous suffit de créer un dossier « animations » à la racine de votre thème actif et d’y ajouter un fichier animations.json ou easings.json. Vous pouvez utiliser comme exemple les fichiers situés dans le dossier du plugin: « motion-for-wp/ressources/animations ». Si cette façon de faire ne convient pas à votre besoin, il y a également des hooks disponibles.

Voici un exemple de fichier situé dans montheme/animations/animations.json

{
	"custom": {
		"name": "Custom",
		"properties": {
			"opacity": [0,1],
			"transform": ["translateX(-100px) rotate(-45deg)", "none"]
		}
	}
}

Hooks

add_filter('motion_for_wp/get_options', function(array $options){
    // Put your magic
    return $options;
};

add_filter('motion_for_wp/get_easings', function(array $easings){
    // Put your magic
    return $easings;
};

add_filter('motion_for_wp/get_animations', function(array $animations){
    // Put your magic
    return $animations;
};

Usage hors Gutenberg

Il est également possible d’utiliser les animations motion sur vos templates personnalisés via l’ajout de simple attributs data.

data-motion= »true » ➡️ permet d’activer la recherche d’animation sur l’élément. ^(requis)

data-motion-animation= »slug_de_votre_animation » ➡️ permet d’assigner une animation sur l’élément via son slug. ^(requis)

data-motion-easing= »type_d_easing » ➡️ permet d’assigner un type d’easing pour votre animation.

data-motion-duration= »durée » ➡️ permet de spécifier la durée pour votre animation (en secondes)

data-motion-easing= »type_d_easing » ➡️ permet d’assigner un type d’easing pour votre animation

data-motion-margin= »margin » ➡️ permet d’assigner une marge prise en compte lors du déclanchement de l’animation.