Animation CSS et JS

— Retour d'expérience —

Qui suis-je ?

Thierry Le Moulec

Développeur Front-End (freelance-ish)

et Kettlebell enthusiast

État des lieux

  1. Ça bouge beaucoup et vite 
  2. Outils de prototyping
  3. CSS, JS, SVG, WebGL : Il faut encore faire attention aux perfs
  4. Librairies : Best bang for your buck!

La place du dev front dans tout ça

Avant d'aller plus loin

  • Les 12 principes de l'animation
  • Ce qu'on en retient principalement pour le web

Qu'est-ce qu'on anime ? Et comment ?

  1. Opacité
  2. Transform soit : 
    1. translate
    2. scale
    3. rotate
    4. skew
  1. CSS Keyframes
  2. Librairies JS :
    1. minimaliste : animateplus
    2. complète : gsap
    3. puissante : velocityjs
  3. WebGL / SVG / Sprite

Exemple

Merci