Ce tuto Javascript, vous permettra d'acquérir des compétences d'animations sur la librairie JS : GSAP de chez Greensock.
GSAP est un peu le "couteau suisse" de l'animation Javascript. 20 fois plus rapide que jQuery, GSAP se veut flexible et est recommandé par Google pour la création d'animations Javascript. GSAP permet d'animer tous les éléments du DOM accessibles par Javascript.
Tuto : Premiers pas avec Greensock et GSAP.
Ce tuto vous donnera les bases de la librairie GSAP. Nous aborderons des animations simples et multiples, la timeline et le scénario. Nous verrons également comment utiliser la fonction callback et le contrôle de la timeline.
Le fichier projet est fourni avec ce tuto. Un salon d'entraide est également à disposition si vous êtes restez bloqués lors d'une étape de ce cours.
Si vous souhaitez animer vos interfaces en passant par Javascript, alors ce tutoriel est fait pour vous.
Table des matières de cette formation JavaScript (durée : 1h12m)
-
Introduction
- Présentation de GreenSock et de GSAP 00:00:22
-
Structure HTML et CSS
- Structure de la page HTML et du fichier CSS 00:06:01
- Ajouter le soleil 00:04:16
-
Intégrer les bibliothèques
- Ajouter jQuery et GSAP à la page HTML, et création du fichier main.js 00:05:00
-
Animations simples et multiples
- Sélecteurs jQuery et TweenMax 00:16:01
- Méthodes from et staggerFrom 00:08:52
-
Scénario et TimelineMax
- Créer une TimelineMax 00:20:58
- Contrôler la TimelineMax 00:10:43
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Graphoeil
-
Très bien expliqué... Si le rythme est lent, il suffit de mettre en vitesse suprérieure ( x2 dans notre cas) ! Quant à moi, j'utilise Greensock dans Hype ????
-
Rythme de voix assez lent... C'est dommage j'aurais aimé avoir plus de détails sur les animations que sur les fichiers CSS/HTML...
-
Assez moyen, le rythme est très lent, la voix presque soporifique, on pert beaucoup de temps au début à entendre l'auteur lire la feuille de style CSS. C'est plus un reportage qui montre quelqu'un en train d'effectuer une animation sur GSAP qu'un tutoriel, à mon point de vue.
-
Avec quelle version de logiciel ce tuto est-il compatible ?JavaScript
-
Quel est le niveau requis pour suivre ce tuto ?débutant
-
Puis-je utiliser un autre éditeur que DreamweaverBien sûr, utilisez votre éditeur préféré : Sublimetext, Koda, Aptana...
note moyenne
avis laissés