Formation Greensock GSAP : Design Interactif

Cette formation Greensock GSAP vous apprendra à utiliser la librairie Greensock GSAP pour étendre les propriétés d'animation et d'interactivité du logiciel Hype Pro. Hype pro est utilisé pour la création d'animation vectorielles ou typographiques, des glisser-déposer avancés, du flat 3D.

Objectif opérationnel : 

Savoir appréhender la laibrairie Greensock GSAP.

• Animer les objets vectoriels SVG  
• Réaliser des glisser-déposer avancés  
• Spatialiser l’affichage des éléments de la scène.

Public :

Ce stage Greensock s'adresse aux utilisateurs de Hype Pro.

Prérequis :

Etre familier de l’environnement de Hype Pro et du langage HTML est recommandé pour suivre ce cours.

Introduction à Greensock

Présentation des options disponibles à travers les librairies GreensockInstaller l'extension dans l'environnement de Hype Pro

Configurer un espace 3D via GSAP

Gérer la déformation 3D par défaut
Gérer le positionnement 3D par défaut
Gérer la 3D des éléments imbriqués

Animer les propriétés

Position et rotation 3D
Echelle, torsion, opacité  

Gérer le temps

Apprendre à invoquer une action avant, pendant et après la transition
Temporiser la transition à l'aide d'un délai

Animer à partir d'effets

Les filtres
Les trajectoires
Les clips (masques)

Animer les propriétés vectorielles SVG

Animer un tracé vectoriel
Animer une interpolation de formes SVG, importées d’Illustrator

Gérer le glisser-déposer

Organiser les éléments d’un dispositif de glisser-déposer
Gérer le type de déplacement (translation, rotation)
Gérer l’inertie et les limites du déplacement
Gérer les collisions

Animer les caractères typographiques

Gérer l’animation par bloc, ligne ou caractère
Gérer les effets de physique sur le texte animé
Animer l’affichage des caractères (façon panneau d’affichage d’un hall de gare)  

Mettre en pratique l'animation à travers différentes études de cas, au choix

Mur d'images flat 3D
Cube animé
Coverflow flat 3D
Palette flottante
Curseurs et effet parallaxe
Dataviz basée sur un graphique vectoriel SVG.

Cette formation alterne exercices pratiques et théorie pour une meilleure validation des acquis.