lottie-example

Le format Lottie est un format ouvert d’animation vectorielle.
Il permet d’afficher des animations légères en très bonne qualité pour vos sites web et applications.
Ce format permet donc de créer des animations flexibles, légères, multiplateformes avec également de l’interactivité. C’est la solution idéale pour remplacer les images et animations au format gif.

taille du fichier LOTTIE : 13 ko

les fichiers Lottie peuvent être 10 à 30 fois plus léger que les fichier Gif, et comme ils sont vectoriels, ils s’adaptent à toutes les tailles. Une seule animation peut vous servir pour vos sites et vos applications (web, iOS, Android, windows, QT, Tizen, …) .

taille du fichier GIF : 167 ko

Branding

Branding
les animations Lottie peuvent attirer l’attention sur votre logo, pour dynamiser votre site internet ou pour servir d’attente pendant le chargement de votre application.

Pour l’histoire :
En 2015, Hernan Torrisi créa le premier plugin pour transformer les animations After Effects en animation vectorielle au format .json.

Micro interactions

Envoi de mail, ajout ou validation d’un panier de commande, … les animations Lottie viennent améliorer l’expérience utilisateur. Ces animations permettent par exemple de visualiser l’action qui a été faite par l’utilisateur (acheter, envoyer, partager, supprimer). Ainsi, ces animations peuvent accompagner l’utilisateur, et leur rôle pédagogique fait pleinement partie de l’ergonomie de votre site.
Vous pouvez le tester ici, à gauche avec un survol puis clic (taille du fichier Lottie : 49 ko), ou sur les liens vers les réseaux sociaux en haut de cette page.

Vous avez des idées d’animations Lottie ? Contactez-nous pour nous en parler. 06 82 91 72 90

Pour l’histoire :
En 2017, la branche design d’AirBnB ajouta les librairies pour les applications, le format Lottie était né.
Lien vers la page lottie Airbnb

Micro formation

Le format Lottie est idéal pour faire de la micro-formation, par exemple pour vous apprendre que 80% de l’énergie dépensé dans la vie d’un ordinateur, l’est à sa fabrication, et ce parce qu’il est jeté en moyenne au bout de 4 ans. (taille du fichier Lottie : 107 ko)
cf. nos animations pour l’Ademe sur le sujet

une animation courte accompagnée de texte peut ainsi préciser une partie spécifique d’une animation en vidéo.
Et plusieurs animations explicatives dans une page peuvent être une alternative moins onéreuse mais tout aussi efficace à une animation vidéo.

Pour l’histoire :
Le nom Lottie vient de Lotte Reiniger, réalisatrice pionnière de film d’animation.
lien wikipédia

Interactivité

On peut rajouter de l’interactivité aux animations Lottie. Des interactions simples comme un clic, un appui long, un déplacement, … permettront d’engager le visiteur et faciliteront l’apprentissage.

Cela peut aider par exemple à comprendre comment déconstruire les représentation sexistes. (taille du fichier Lottie : 49 ko)
cf. notre animation pour le centre Hubertine Auclert

Ou pour se rendre compte du pourcentage des handicaps qui ne sont pas visible. (taille du fichier Lottie : 154 ko)
cf. notre animation pour le Ministère de l’enseignement supérieur de la recherche et de l’innovation

On peut pousser le processus un peu plus loin en présentant une animation plus complexe avec plusieurs interactions. Le ludique de l’animation et l’interaction peuvent se mettre au service de l’apprentissage.
Voici un exemple ci-dessous. (taille du fichier Lottie : 444 ko).
les interactions seront légèrement différentes entre ordinateurs et smartphones/tablettes : un appui long sur ces derniers correspondra à un survol avec la souris.

Vous avez des idées d’animations Lottie ? Contactez-nous pour nous en parler. 06 82 91 72 90

 {
        state: 'autoplay',
        transition: 'onComplete',
        frames: [0, 35],
      },
      {
        state: 'hold',
        transition: 'hold',
        frames: [35, 130],
      },
      {
        state: 'autoplay',
        transition: 'onComplete',
        frames: [130, 491],
      }, {
        state: 'pauseHold',
        transition: 'pauseHold',
        frames: [491, 612]
      },
      {
        state: 'autoplay',
        transition: 'onComplete',
        frames: [612, 1074],
      },
      {
        state: 'none',
        transition: 'click',
        reset: true
      }
    ]

Test replace pauseHold by Cursor

 {
        state: 'autoplay',
        transition: 'onComplete',
        frames: [0, 35],
      },
      {
        state: 'hold',
        transition: 'hold',
        frames: [35, 130],
      },
      {
        state: 'autoplay',
        transition: 'onComplete',
        frames: [130, 491],
      }, {
        state: 'none',
        position: { x: [-1, 2], y: [0, 1] },
        transition: 'seek',
        frames: [491, 612]
      },
      {
        state: 'autoplay',
        transition: 'onComplete',
        frames: [612, 1074],
      },
      {
        state: 'none',
        transition: 'click',
        reset: true
      }
    ]