This document is an agenda for a webinar on web animations in WordPress presented by Damien. The agenda includes: an introduction of Damien; discussions of the advantages and disadvantages of web animations, the composition of web animations, and examples of simple 2D, advanced 2D, and complex 3D animations; platforms for showcasing aesthetic websites; sources of inspiration and tools/libraries; and the team needed for animation projects. Live demos of animations will be included.

1. Les animations Web
sur WordPress
- avec Damien

2. ©2020
Hissez Haut vos projets digitaux
SOM-MER
1. Qui est Damien ?
2. Les avantages et inconvénients des animations web ?
3. Quelle est la composition d’une animation web ?
4. Animations simples 2D (CSS) + démo en live (sans bug 🤞)
5. Animations avancées 2D (CSS & JS, SVG) + démo en live (sans bug 🤞)
6. Animations complexes 3D (Canvas, WebGL, JS) + démo en live (sans bug 🤞)
7. Les plateformes de récompense des sites esthétiques
8. Les sources d’inspirations et outils / librairies
9. Les profils nécessaires pour vos projets d’animations
10. Liens complémentaires

3. Hissez-haut vos projets digitaux !
Le web repousse toujours plus loin et plus vite
les barrières technologiques.
https://eyes.nasa.gov/apps/mars2020

4. Hissez-haut vos projets digitaux !
Qui est Damien ?
INTERVENANT

5. Hissez-haut vos projets digitaux !
Damien Chantelouve
● Lead web developer chez Pilot’in, fan incontesté de WordPress - depuis 2017
● Cursus communication / design avant de devenir développeur
● Awwwards - Mention honorable - site Caelis
● MyGoodBarber - Beautiful App - App The Albion Public House
● French Design Index - Mention Site - Site The Albion Public House
● A l’initiative du Pilo’Press, une extension WP permettant l’intégration d’un site
avec une haute personnalisation associé à un Design System adaptable à chaque projet.
TOP 30 FRANCE de 2015 à 2020
des agences digitales

6. Hissez-haut vos projets digitaux !
Les avantages
et inconvénients
des animations web
ANIMATIONS

7. Hissez-haut vos projets digitaux !
Les avantages et inconvénients des animations web
1. Capter l’attention de sa cible
(Le saint-graal des publicitaires)
- Cela permet de mieux guider le parcours utilisateur et également
de motiver l’utilisateur à atteindre le but qu’on lui a fixé.
AVANTAGE MAJEUR :
Le
Determann
:
Kebab,
double
cheddar,
mayonnaise
maison
&
oignons
rouges

8. Hissez-haut vos projets digitaux !
Les avantages et inconvénients des animations web
AVANTAGE MAJEUR :
Ce but peut être :
● De la conversion 🖱
via la mise en avant d’un bouton pour conclure une vente.
● Marquer son esprit ✨
avec un site expérientiel ou simplement avec un effet marquant
en jouant sur ses émotions pour qu’il se rappelle de votre marque / site / entreprise.
● Une meilleure lecture de l’information 🔍
via un scénario d’animations qui se déclenche en chaînes dans un ordre donné
pour rendre l’information plus digeste et hiérarchisée.
● Embellir votre image de marque 💄
pour vous démarquer de la concurrence et avoir un vrai storytelling.
Motiver l’utilisateur à atteindre le but qu’on lui a fixé
🖱
✨
🔍
💄

9. Hissez-haut vos projets digitaux !
Ça a l’air parfait ! 😍
Alors pourquoi on n’en met pas partout et tout le temps ?

10. Hissez-haut vos projets digitaux !
Les avantages et inconvénients des animations web
1. L’animation web est un paradox :
- elle peut également nuire à l’expérience utilisateur qui était pourtant le but inverse recherché.
DÉSAVANTAGE MAJEUR :
Cela peut nuire dans certains cas :
1. Une cible non adaptée 󰞾 qui n’est pas assez sensible au monde du web de par son âge, son
secteur d’activité, son environnement… et qui peut donc se retrouver perdue ou frustrée de ne
pas comprendre ce qu’il se passe sous ses yeux.
2. Mauvaises performances ⚓ qui ralentissent le temps de chargement & d’interaction du site
si mal pensées en amont et qui peuvent donc faire fuire un utilisateur.
3. L’excès ⚓ d’animations qui rend l’expérience encore plus confusante qu’initialement.
Trop d’animations tue l’animation. C’est important de garder un certain contraste par rapport
au reste du site, il faut savoir trouver un juste milieu.
��🌾
⚓
Peut nuire à l’expérience utilisateur

11. Hissez-haut vos projets digitaux !
Quelle est la composition
d’une animation web ?
ANIMATIONS

12. Hissez-haut vos projets digitaux !
Quelle est la composition d’une animation web ?
● L’élément 🔴 Ca peut être un élément html ou un objet JavaScript.
Exemple : Un élément html “button”
● La propriété 🔝 qui peut-être une propriété CSS, la valeur d’un objet JavaScript ou autre.
Exemple : La propriété CSS couleur de fond (background-color)
● La durée ⌚ qui va être le temps que met notre animation entre l’état A et l’état B.
Exemple : 0.3s
● Une courbe de vitesse 💨 (appelé easing) qui va définir si on veut que notre animation soit
linéaire ou qu’elle s’accélère au début et/ou à la fin.
Exemple : linéaire
● Un déclencheur 💥(appelé event) qui peut être un clic, un survol, un défilement du scroll,
la visibilité à l’écran, un “custom event”… Il en existe beaucoup.
Exemple : au clic
��
��
Les différentes caractéristiques d’une animation web :
��
⌚
��

13. Hissez-haut vos projets digitaux !
Quelle est la composition d’une animation web ?
�� ��
ÉTAT INITIAL ÉTAT D’ARRIVÉ
ÉTAT DE TRANSITION
● Élément : bouton
● Propriété : couleur de fond rouge
● Durée : 0.3s
● Courbe de vitesse : linéaire
● Élément : bouton
● Propriété : couleur de fond verte
● Déclencheur : au clic

14. Hissez-haut vos projets digitaux !
Quelle est la composition d’une animation web ?
● transition - CSS :
Feuilles de style en cascade | MDN
● animation - CSS :
Feuilles de style en cascade | MDN
● @keyframes - CSS :
Feuilles de style en cascade | MDN
Documentation sur les propriétés CSS
qui vont nous intéresser pour de l’animation web :

15. Hissez-haut vos projets digitaux !
Animations simples
(CSS)
NIVEAU 1

16. Hissez-haut vos projets digitaux !
Démo
Changer le visuel des différents états d’un élément web (bouton)
avec du CSS
● WP Customizer (Code CSS) :
http://webinar-anim.pilot-in.net/wp-admin/customize.php?return=%2F
wp-admin%2Fadmin.php%3Fpage%3Dedit-snippet%26id%3D2
● Aperçu :
http://webinar-anim.pilot-in.net/animation-simple
● Autres idées d’exemples à intégrer :
Ideas for CSS Button Hover Animations

17. Hissez-haut vos projets digitaux !
Exemples (estimation temps de réalisation)
1h
30 min
1h

18. Hissez-haut vos projets digitaux !
Animations avancées
(CSS & JS, 2D, SVG)
NIVEAU 2

19. Hissez-haut vos projets digitaux !
Démo
Changer la position et mettre en place un fondu au blanc sur les contenus texte du
site lorsque l’on scroll à leur niveau avec du CSS et du JS :
● Code Snippets (Extension WP pour injecter code CSS & JS) :
http://webinar-anim.pilot-in.net/wp-admin/admin.php?page=edit-snippet&id=2
&result=updated
● Contenu code (à importer dans Code Snippets) :
http://webinar-anim.pilot-in.net/animation-avancee.code-snippets.json
● Aperçu :
http://webinar-anim.pilot-in.net/animation-avancee-scroll
● Autres d’idées d’exemples à intégrer :
On-Scroll Letter Animations

20. Hissez-haut vos projets digitaux !
Exemples (estimation temps de réalisation)
1 jour 1/2 jour
1/2 jour

21. Hissez-haut vos projets digitaux !
Animations complexes
(3D, Canvas, WebGL, Shaders...)
NIVEAU 3

22. Hissez-haut vos projets digitaux !
Démo
Intégrer une animation 3D dans un site WordPress sur lequel on peut bouger
l’angle de la scène avec la souris et zoomer dans la scène avec du JS :
● Code Snippets (Extension WP pour injecter code CSS & JS) :
http://webinar-anim.pilot-in.net/wp-admin/admin.php?page=edit-snippet&id=2
&result=updated
● Contenu code (à importer dans Code Snippets) :
http://webinar-anim.pilot-in.net/animation-complexe.code-snippets.json
● Aperçu :
http://webinar-anim.pilot-in.net/animation-avancee-scroll
● Autres idées d’exemples à intégrer :
Codrops WebGL Video Transitions with Curtains.js

23. Hissez-haut vos projets digitaux !
Exemples (estimation temps de réalisation)
Plusieurs
jours /
semaines
Plusieurs jours
/ semaines
Plusieurs jours /
semaines

24. Hissez-haut vos projets digitaux !
Les plateformes de
récompense des sites
esthétiques
ANIMATIONS

25. Hissez-haut vos projets digitaux !
www.awwwards.com
60€/site
www.frenchdesignindex.com
gratuit
www.webbyawards.com
435€/site
www.thefwa.com
100€/site
www.csswinner.com
9$/site
www.cssdesignawards.com
50€/site
Les plateformes de récompense des sites esthétiques
PRIX DE SOUMISSION
D’UN SITE SUR DIFFÉRENTES PLATEFORMES :

26. Hissez-haut vos projets digitaux !
Les sources d’inspirations
et outils / librairies
ANIMATIONS

27. Hissez-haut vos projets digitaux !
Les sources d’inspirations et outils / librairies
Sources d’inspirations, veille :
Dribbble - Discover the World's Top
Designers & Creative Professionals
Sources d’inspirations, veille :
Awwwards - Sites Of The Day
Sources d’inspirations, veille
& codes d’exemple :
Codrops Collective Archive
Ma bible
personnelle ❤

28. Hissez-haut vos projets digitaux !
Les sources d’inspirations et outils / librairies
Librairie pour gérer des séquences
d’animations complexes :
GSAP
Librairie pour gérer des séquences
d’animations avancées :
AnimXYZ
Librairie pour gérer des
séquences d’animations simples :
AOS - Animate on scroll library

29. Hissez-haut vos projets digitaux !
Three.js – JavaScript 3D library
Librairie pour animer de la 3D :
Les sources d’inspirations et outils / librairies
Librairie pour animer des éléments au
scroll de manière fluide & avancée :
Locomotive Scroll | Detection of
elements in viewport & smooth
scrolling with parallax effects.
Librairie pour animer des
illustrations vectorielles :
Lottie by AirBnb

30. Hissez-haut vos projets digitaux !
L’équipe nécessaire pour vos
projets d’animations
ANIMATIONS

31. Hissez-haut vos projets digitaux !
L’équipe nécessaire pour vos projets d’animations
Développeur front-end
Motion Designer Creative Developer
Web Designer

32. Pour aller plus loin

33. Voir le replay Voir le replay Voir le replay
Prospection e-mail Prospection LinkedIn Réaliser son CDC
Voir le replay
Voir la présentation Voir la présentation
Outils :
Prospectin
Kapsr
Lempod
Outils :
Prospectin
Dropcontact
Woodpecker
Hunter
Kapsr
Emaillistverify
ActiveCampaign
Voir la présentation
Outils :
Mindmeister
o2switch
Monday
Cahier des charges
prêt à l’emploi
Voir la présentation
Outils :
o2switch
Monday
Cahier des charges
prêt à l’emploi
Combien coûte un site ?

34. Tous nos outils magiques & astuces
󰨹
https://www.pilot-in.com/nos-outils-magiques/
Retrouvez tous les liens avec les versions gratuites et offres négociées
🎥
Tous nos prochains webinars : https://app.livestorm.co/pilot-in
Toutes nos vidéos en ligne : https://bit.ly/youtube-pilotin
📩
Soyez au courant de tous nos prochains contenus premiums gratuits :
https://www.pilot-in.com/nos-webinars/ (remplir le formulaire)

35. Agence de prospection digitale
Experte WordPress

36. Croissance continue
13 ans d’histoire
2008
Julien Dereumaux lance
son activité webmarketing
#optimiste
2013
Lancement de la
SAS Pilot’in
#pilotine
2017
Rachat de Lyon
Entreprises
#cargo
2021
21 personnes
dans l’équipage
#vedette

37. 21 marins spécialistes !
Actuellement en plein coeur de Lyon (Place des Terreaux)
󰗔 Nos prochains locaux : 370m2 + terrasses et BBQ à 5 min de Bellecour & 100m de la piscine du rhône 󰝢
Associés Pilotes de clientèle Stratégie digitale
Webdesign Développement WordPress
Consulter les CVs des matelots
Création de contenu vidéo et SEO Conseil avant-vente

39. Nos labels de qualité et récompenses
Certifié agence Partner Certifié fournisseur solutions Partenaire France
Certifié Facebook Ads Certifié Google Ads
Récompense webdesign
TOP 30 FRANCE de 2015 à 2020
des agences digitales

40. Ces organismes soutiennent Pilot’in au quotidien, au niveau de la RSE, de l’amélioration
continue, du recrutement et de sa R&D.
Nos partenaires & engagements

41. Innovation
6 ans de R&D sur WordPress
Et de nombreux projets en cours et en prévision
WordPress Pro Pilo’board Pilo’Press
Contributeur actif WordPress
Nos équipes contribuent à l’amélioration continue de WordPress. Nous
publions en Open Source différents plugins et participons aux
meetups et grands événements

42. Chiffres clés
Plus de 250 clients heureux !

43. Notre offre

44. Création et refonte de
sites
WordPress &
WooCommerce
Maintenance de sites et
TMA
Accompagnement
stratégie digitale et
prospection digitale
Création de contenu
Articles
Communiqués de presse
Etudes de cas
Interviews vidéo
Formations
en
Entreprise
Ecole
Test utilisateur
UX