Salut, moi c'est Gabriel, étudiant en design web. Aujourd’hui, je vais te faire découvrir la conférence “Animer l’Impossible” présentée par Cassie Evans lors du Beyond Tellerrand. De quoi te montrer qu’au final, en code quelque chose peut être complexe à mettre en place, mais pas totalement impossible. Ensemble, découvrons l'art de repousser les limites créatives.
Lui, c'est moi
Le Beyond Tellerrand ? Un rendez-vous incontournable pour les créatifs, qu'on soit vétéran ou débutant. C’est ici que les limites créatives sont repoussées grâce à toutes les nouvelles innovations présentées.
Lors de cet événement sont évoqués différents sujets tous plus passionnants les uns des autres pour les passionnés de créativité et de tech. Les participants bénéficient de conférenciers de renom, d'ateliers interactifs et d'opportunités de networking dynamiques.
Salle de conférence du Beyond Tellerrand - © Florian Ziegler
Cassie Evans est une web designer qui a commencé à l’époque où MySpace était encore de ce monde. Avec un solide bagage en graphisme et en motion design, elle s'est fixé pour objectif de réenchanter l'Internet. Actuellement, en tant que responsable des relations avec les développeurs chez GreenSock, elle jongle entre expérimentations, enseignements et enthousiasme pour promouvoir l'animation sur le web
Elle, c'est Cassie Evans. C'est elle qui fait de la magie
Lorsqu’on fait de l’animation plus traditionnelle, on dessine toutes les étapes de l’animation. Avec du code, on a juste à mettre quand l’animation est censée commencer et quand elle est censée se terminer. On peut également ajouter un certain comportement à cette animation (un ease-in/out par exemple).
Processus d'animation d'une balle, en animation classique - © Cassie Evans
Pour faire de l’animation en web, il existe un principe nommé le “FLIP” (First Last, Invert, Play). D'abord, on détermine la position initiale de l'élément à animer, puis la position finale. Ensuite, en inversant ces positions, on anime l'objet de façon fluide.
Le principe du FLIP - © Cassie Evans
Ceci dit, c’est vraiment fastidieux de faire ça manuellement en JavaScript. C’est là qu’un outil dénommé GSAP entre en jeu. GSAP est une bibliothèque JavaScript permettant de pousser les animations web encore plus loin, mais également de se simplifier la vie au moyen de fonctions intégrées au plugin.
Il est très important de ne pas en faire trop. En effet, s’il y a trop d’animations sur un site, l’utilisateur peut vite être perdu.
Finalement, il existe en effet des animations plus faciles à réaliser que d’autres. Mais lorsqu’on regarde certains sites qui en mettent plein la vue avec énormément d’animations en 2D ou en 3D, notre œil a vite fait de ne plus savoir où se mettre. Le tout est, selon moi, de bien doser ses animations pour ne pas perdre l’utilisateur, même si on veut montrer de quoi on est capable.