Animation SVG avec jQuery et GreenSock

Ce tuto vidéo, va vous permettre de comprendre les techniques d'animations d'un logo SVG créé dans Illustrator en .eps puis intégré en SVG directement dans notre fichier .html pour animer chacun de ses éléments.

Avec cette technique, chaque élément du logo devient un élément du DOM manipulable à souhait avec jQuery et Greensock. Vous avez besoin de placer un logo animé sur une page web, et que ce dernier soit super léger en poids, et retina ? Optez pour ce tuto !

Au programme de ce tuto Animation d'un logo SVG

• Comment préparer notre logo dans Illusrtaor en vue de l'animer par la suite
• Comment exporter le logo en SVG
• Comment optimiser le fichier SVG en utilisation SVG Editor (de Peter Collingridge)
• Comment importer un logo SVG dans une page HTML
• Comment faire en sorte que l'image SVG soit responsive (s'adapte à la taille de votre écran, dans une logique de mobile first) en fonction de nos mediaqueries
• Comment créer des classes qui seront appliquées au SVG
• Comment animer les différents éléments qui constituent le logo avec jQuery et Greensock

Pour ce tuto, j'ai utilisé Dreamweaver mais vous pouvez bien entendu utiliser l'éditeur HTML de votre choix. Je joins avec le cours, les fichiers sources finaux avec le svg optimisé au cas où vous n'auriez pas Illustrator. Je reste disponible dans le salon d'entraide de ce tutoriel pour répondre à vos éventuelles questions.

Bonne formation !