Librairie Greensock

Si vous êtes webdesigner, vous connaissez surement le site www.awwwards.com et vous avez bavez devant cette vitrine qui présente tous les savoirs-faire graphiques et techniques actuelles (CSS3, CSS animations, Javascript, SVG…)
Dans le détail :

  • 93% utilisent CSS animations
  • 91% -> Javascript animations
  • 83% -> SVG
  • 70% -> jQuery
  • 69% -> Scrolling animations
  • 65% -> Greensock
  • 50% -> HTML5 Canvas

Source : ihatetomatoes.net/awwwards

Dans l’expérience utilisateur on peut donner plus a voir qu’un simple page figée toute responsive qu’elle soit dans sa conception. On peut dynamiser tout un site ou renforcer simplement certaine action avec du javascript afin de rendre l’expérience plus plaisante à l’utilisateur. Sans être développeurs front-End on peut et on doit être sensibilisé à ce genre de chose dans la conception du webdesign et pouvoir imaginer une série d’animation des éléments constitutif du site.
Un élément plus particulièrement m’intéresse ici, ce sont les bibliothèques d’animation jQuery et plus précisément Greensock. Une bibliothèque qui reprend les principes que l’on connait bien en flash en version Javascript, il s’agit de la librairie d’animation Greensock (TweenLite et TweenMax). Cette librairie va vous permettre de créer une série d’animation complète avec une gestion du temps / déroulement assez poussée.
Cette librairie devient un must-have puis que comme indiqué précédemment 65% des sites présentés sur www.awwwards.com proposent cette solution pour animer leurs interfaces en complément de jQuery.
Son avantage, c’est sa grande agilité et de penser l’animation comme une timeline, dans laquelle on pourra déclencher une série d’animation à des moments défini et de pouvoir jouer l’animation en avant ou en arrière , son autre avantage c’est d’être universel et de pouvoir s’exécuter sur tous les navigateurs
Aujourd’hui, elle reste la meilleure réponse face à CSS3 animation qui n’est pas encore bien implémenté sur tous les navigateurs et ne permet pas autant de choses. Quant à jQuery, il n’a pas le même portée et ne peut pas enchaîner une série d’animation dans une timeline et contrôler la lecture de ces animations dans le temps. On retrouve ici des concepts proches de ceux que l’on pouvaient avoir dans Flash.

Découvrir Greensock
greensock



Laissez un commentaire