TUTO Animation Javascript avec GSAP de chez Greensock sur Tuto.com

Animation Javascript avec GSAP de chez Greensock

Problème de lecture

Cette vidéo ne semble pas disponible

00:00

00:00

Sous-titres non disponibles

Un cours de

7,99€

3,0

1h12

Débutant

QCM

Certificat de compétences

Fichiers sources

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Présentation
Contenu

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

Chapitre 2

Chapitre 3

Chapitre 4

Chapitre 5

Plan détaillé du cours

Chapitre 1 : Introduction

22

Leçon 1Présentation de GreenSock et de GSAP

Chapitre 2 : Structure HTML et CSS

10m17

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

24m53

Leçon 1Sélecteurs jQuery et TweenMax

Leçon 2Méthodes from et staggerFrom

Chapitre 5 : Scénario et TimelineMax

31m41

Leçon 1Créer une TimelineMax

Leçon 2Contrôler la TimelineMax

Aperçus

Avis des apprenants

Détail des avis

94

Apprenants

2

Commentaires

3/5

Note moyenne

5/5

0

4/5

0

3/5

2

2/5

0

1/5

0

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

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

Formateur

4,5

Voir ses cours

Prérequis

Débutant

Accessibilité

Sous-titres non disponibles

Ressources téléchargeables

Fichiers sources (57.96 Ko)

Catégories

Programmation JavaScript Animation

Cours publié le 11/04/2016
Langue : Français
ID : 59721

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...