Animation Javascript avec GSAP de chez Greensock
ERROR
00:00
00:00

TUTO Animation Javascript avec GSAP de chez Greensock

Graphoeil
8,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Introduction
Chapitre 2
Structure HTML et CSS
Chapitre 3
Intégrer les bibliothèques
Chapitre 4
Animations simples et multiples
Chapitre 5
Scénario et TimelineMax

Plan détaillé du cours

Chapitre 1 : Introduction
22s
 
Leçon 1Présentation de GreenSock et de GSAP
Chapitre 2 : Structure HTML et CSS
10m17s
 
Leçon 1Structure de la page HTML et du fichier CSS
Leçon 2Ajouter le soleil
Chapitre 3 : Intégrer les bibliothèques
05m
 
Leçon 1Ajouter jQuery et GSAP à la page HTML, et création du fichier main.js
Chapitre 4 : Animations simples et multiples
24m53s
 
Leçon 1Sélecteurs jQuery et TweenMax
Leçon 2Méthodes from et staggerFrom
Chapitre 5 : Scénario et TimelineMax
31m41s
 
Leçon 1Créer une TimelineMax
Leçon 2Contrôler la TimelineMax

Aperçus

Avis des apprenants

Détail des avis
42
Apprenants
3
Commentaires
3,7/5
Note moyenne
5/5
1
4/5
0
3/5
2
2/5
0
1/5
0
Catherine Coulmy
Catherine Coulmy
Publié le 25/10/2018
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 ????
Jb Couton
Jb Couton
Publié le 03/08/2016
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...
Lionel Gibaudan
Lionel Gibaudan
Publié le 12/04/2016
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.
Graphoeil
Bonjour doctor-pixel, merci pour votre commentaire, il est vrai que ma voix est très lente, je vais essayer d'améliorer cela pour les prochains tutos (pas gagné mais on va essayer...) et je suis bien d'accord avec vous sur la perte de temps du début avec la lecture du code html et du css (là aussi je ne le ferai plus comme ça). J'espère quand même que vous avez appris de nouvelles techniques et merci pour les 3 étoiles, après discussion avec ma femme elle n'en aurait mis qu'une ! Cordialement Frédéric

Vos questions sur le cours

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 Dreamweaver

Bien sûr, utilisez votre éditeur préféré : Sublimetext, Koda, Aptana...

Attendez ! 🤗

Accédez à plus de 1330 tutos gratuits

Notre politique de protection des données