Des ressources Javascript pour animer le HTML et les SVG de votre site

C'est officiel depuis début décembre, la technologie Flash, en mort lente depuis plusieurs années est abandonnée par son créateur au profit du HTML5. En effet, le logiciel Flash Professional quitte la suite d'Adobe pour etre remplacé par Animate CC.

Si vous faites parti des retardataires qui n'avaient pas encore fait sa transition vers HTML5, je vous propose de découvrir cette série de 5 ressources Javascript qui vous permettra d'animer votre site avec les technologies CSS3, HTML5 et Javascript !

Popmotion

Popmotion est un moteur de rendu permettant d'animer toutes les propriétés CSS de vos objets. De la taille a la couleur, tout y passe ! Pour être clair, tout ce que vous pouvez faire avec des animations CSS est faisable de manière plus simple et plus fluide avec cette ressource.

Les rendues sont extrêmement fluides, la syntaxe concise, claire, et réutilisable. Un peu plus complexe que les autres, elle vous demandera un peu de connaissances en Javascript pour en tirer pleinement partie.

Cette ressource est pour moi la plus intéressante de la liste.

Sequence

Sequence est un moteur d'animations par étapes, un genre de créateur de diapositives powerpoints sous stéroïdes.

Ne vous laissez pas abuser par mon analogie, il reste de très bonne qualité et permet de créer des rendus saisissant pour tout ce qui est slider ou bannières pub, par exemple.

Vivus

Vivus est un moteur permettant de simplifier l'animation des SVG. Créez vos SVG depuis Illustrator, puis animez-les sans aucune connaissance en Javascript !

Il peut évidemment créer des animations par défaut mais son intérêt se révèle dans les animations manuelles. Pour cela, précisez simplement les steps de début et de fin d'animation directement dans le code de votre SVG.

Ramjet

Cette ressource permet simplement de transformer visuellement un element HTML en un autre. L'intérêt réside dans la grande souplesse : l'emplacement (sur l'écran ou dans le dom) de l'element de départ ou d'arrivée n'importe pas, pas plus que le type de tag.

Transformer un input en gif ? Possible !

Velocity

Si vous utilisez déjà les animations jQuery, Velocity devrait vous plaire ! Il s'agit d'un moteur d'animations compatibles avec les animations jQuery, à la seule différence qu'il est plus rapide. Accélérer ses animations simplement en changeant une ressource, n'est-ce pas le rêve ?