Formation Greensock GSAP : design interactif

1/ Introduction

• Les librairies Greensock

• Installation de l'extension

2/ Configuration d'un espace 3D via GSAP

• Déformation 3D par défaut

• Positionnement 3D par défaut

• La 3D des éléments imbriqués

3/ Animation des propriétés

• Position et rotation 3D

• Echelle, torsion, opacité

4/ Gestion du temps

• Invocation d'une action avant, pendant et après la transition

• Temporisation de la transition à l'aide d'un délai

5/ Animation à partir d'effets

• Les filtres

• Les trajectoires

• Les clips (masques)

6/ Animation des propriétés vectorielles SVG

• Animation d'un tracé vectoriel

• Animation d'une interpolation de formes SVG, importées d’Illustrator

7/ Gestion du glisser-déposer

• Organisation des éléments d’un dispositif de glisser-déposer

• Gestion du type de déplacement (translation, rotation)

• Gestion de l’inertie et les limites du déplacement

• Les collisions

8/ Animation des caractères typographiques

• L’animation par bloc, ligne ou caractère

• Les effets de physique sur le texte animé

• Animation de l’affichage des caractères

9/ Travaux pratiques

• Mur d'images flat 3D

• Cube animé

• Coverflow flat 3D

• Palette flottante

• Curseurs et effet parallaxe

• Dataviz basée sur un graphique vectoriel SVG