#

> Les easing pour assouplir vos animations

Les easing, ce sont des équations mathématiques qui…
bon ça va surtout vous permettre de bouger des trucs à l’écran, oui mais avec un mouvement élastique du bel effet !

On retrouve les mêmes équations d’un langage à l’autre, et les plus utilisées sont illustrées ici : http://easings.net/fr
Ca devrait vous aider à choisir celle qui vous convient…

Celles que j’utilise couramment :

  • easeOutQuart
  • easeInOutQuart
  • easeOutBack
  • easeOutElastic (en fait non, mais j’aimerais bien, des fois)

Pour vous en servir avec les animations CSS3 par exemple (le plugin Transit vu dans un précédent post-it), il faut comme toujours importer un plugin.
Celui-là est très léger (juste des maths dedans), et on le trouve ici : http://gsgd.co.uk/sandbox/jquery/easing/

Une fois le plugin installé (dans votre dossier de projet et le header de votre page HTML…), il faut souvent l’ajouter en paramètre de la fonction d’animation :

$('header').transition(
	{'x':'0', 'rotate':'0deg'}, 
	600, // durée
	'easeOutBack' // easing (optionnel)
);

Les easing peuvent servir sur TOUTES les fonctions jQuery qui ont un paramètre de durée…

Sur le scroll par exemple, avec le plugin scrollTo :

$(window).scrollTo( $('#references') , 1000 , {easing:'easeOutQuart'});

ou sur la fonction d’animation native de jQuery (qui est moins performante et complète que Transit) :

$( "#book" ).animate(
	{width: 200px, height: 100px}, 
	5000, 
	"easeOutElastic"
);