picto Web - Digital

Formation Greensock GSAP : Design Interactif

Référence

IGGD

Durée

5 JOURS

Tarif

2350 € HT

NIVEAU

Intermédiaire

Cours à distance

Oui

Objectifs de la formation Greensock GSAP : Design Interactif

Cette formation Greensock 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.

Concrètement, à l'issue de ce cours, vous aurez acquis les compétences et connaissances nécessaires pour:

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

Pré-Requis

Cette formation Greensock 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.

Concrètement, à l'issue de ce cours, vous aurez acquis les compétences et connaissances nécessaires pour:

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

Contenu du cours Greensock GSAP : Design Interactif

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.