[{"data":1,"prerenderedAt":1520},["ShallowReactive",2],{"authors":3,"article-2022-01-11-lottie-animation":331},[4,23,35,48,61,73,85,98,111,124,136,148,161,173,185,197,209,221,233,245,258,270,282,295,307,319],{"id":5,"title":6,"body":7,"description":11,"extension":14,"meta":15,"name":16,"navigation":17,"path":18,"readingTime":19,"seo":20,"stem":21,"__hash__":22},"authors\u002Fauthors\u002Falexandre-guillon.md","Software Engineer",{"type":8,"value":9,"toc":10},"minimark",[],{"title":11,"searchDepth":12,"depth":12,"links":13},"",2,[],"md",{},"Alexandre Guillon",true,"\u002Fauthors\u002Falexandre-guillon",1,{"title":6,"description":11},"authors\u002Falexandre-guillon","4tf48mjyjFNqItOHaulICbrjeCyMag1o6801uHeTz98",{"id":24,"title":6,"body":25,"description":11,"extension":14,"meta":29,"name":30,"navigation":17,"path":31,"readingTime":19,"seo":32,"stem":33,"__hash__":34},"authors\u002Fauthors\u002Falexis-ablain.md",{"type":8,"value":26,"toc":27},[],{"title":11,"searchDepth":12,"depth":12,"links":28},[],{},"Alexis Ablain","\u002Fauthors\u002Falexis-ablain",{"title":6,"description":11},"authors\u002Falexis-ablain","_SIAtB7f-39e5t3GiJof81NP47s6MGo2n4gaHkTy1uQ",{"id":36,"title":37,"body":38,"description":11,"extension":14,"meta":42,"name":43,"navigation":17,"path":44,"readingTime":19,"seo":45,"stem":46,"__hash__":47},"authors\u002Fauthors\u002Faxel-shaita.md","Engineering Manager",{"type":8,"value":39,"toc":40},[],{"title":11,"searchDepth":12,"depth":12,"links":41},[],{},"Axel Shaïta","\u002Fauthors\u002Faxel-shaita",{"title":37,"description":11},"authors\u002Faxel-shaita","fK0argUhsBkWLjpTAhY13oYLVzQthcEYkCEdtHWmIgE",{"id":49,"title":50,"body":51,"description":11,"extension":14,"meta":55,"name":56,"navigation":17,"path":57,"readingTime":19,"seo":58,"stem":59,"__hash__":60},"authors\u002Fauthors\u002Fbaptiste-faure.md","Head of Talent Acquisition",{"type":8,"value":52,"toc":53},[],{"title":11,"searchDepth":12,"depth":12,"links":54},[],{},"Baptiste Faure","\u002Fauthors\u002Fbaptiste-faure",{"title":50,"description":11},"authors\u002Fbaptiste-faure","ELisToYtcgHmgdVWZkCclTPV6exZtfyXqhpx1jjbJHs",{"id":62,"title":6,"body":63,"description":11,"extension":14,"meta":67,"name":68,"navigation":17,"path":69,"readingTime":19,"seo":70,"stem":71,"__hash__":72},"authors\u002Fauthors\u002Fbenjamin-bouillot.md",{"type":8,"value":64,"toc":65},[],{"title":11,"searchDepth":12,"depth":12,"links":66},[],{},"Benjamin Bouillot","\u002Fauthors\u002Fbenjamin-bouillot",{"title":6,"description":11},"authors\u002Fbenjamin-bouillot","tbhCFZyfTt7ZM5b5YgqQ2nhgnSTl8BweaQQryc87fHo",{"id":74,"title":37,"body":75,"description":11,"extension":14,"meta":79,"name":80,"navigation":17,"path":81,"readingTime":19,"seo":82,"stem":83,"__hash__":84},"authors\u002Fauthors\u002Fcedric-nicoloso.md",{"type":8,"value":76,"toc":77},[],{"title":11,"searchDepth":12,"depth":12,"links":78},[],{},"Cédric Nicoloso","\u002Fauthors\u002Fcedric-nicoloso",{"title":37,"description":11},"authors\u002Fcedric-nicoloso","ibSoh4VZYiWYTuLOnZTedaAfcnvet1Q9H7ogW0LgorY",{"id":86,"title":87,"body":88,"description":11,"extension":14,"meta":92,"name":93,"navigation":17,"path":94,"readingTime":19,"seo":95,"stem":96,"__hash__":97},"authors\u002Fauthors\u002Fdavid-touzet.md","Staff Engineer",{"type":8,"value":89,"toc":90},[],{"title":11,"searchDepth":12,"depth":12,"links":91},[],{},"David Touzet","\u002Fauthors\u002Fdavid-touzet",{"title":87,"description":11},"authors\u002Fdavid-touzet","dHWwnQxb1Ubt-WwXWEODGEo9AFoq1cJUhfg3kdnYSBM",{"id":99,"title":100,"body":101,"description":11,"extension":14,"meta":105,"name":106,"navigation":17,"path":107,"readingTime":19,"seo":108,"stem":109,"__hash__":110},"authors\u002Fauthors\u002Feloise-chizat.md","Data Engineer",{"type":8,"value":102,"toc":103},[],{"title":11,"searchDepth":12,"depth":12,"links":104},[],{},"Eloïse Chizat","\u002Fauthors\u002Feloise-chizat",{"title":100,"description":11},"authors\u002Feloise-chizat","Utd72Vm9qT4hh2ZbFi6a2_nXw5Wb494Ed_HL1ra5yw8",{"id":112,"title":113,"body":114,"description":11,"extension":14,"meta":118,"name":119,"navigation":17,"path":120,"readingTime":19,"seo":121,"stem":122,"__hash__":123},"authors\u002Fauthors\u002Femmanuel-auclair.md","Staff engineer",{"type":8,"value":115,"toc":116},[],{"title":11,"searchDepth":12,"depth":12,"links":117},[],{},"Emmanuel Auclair","\u002Fauthors\u002Femmanuel-auclair",{"title":113,"description":11},"authors\u002Femmanuel-auclair","MtsA8THNLEn0dTtYEIQaGwDuf7MjQL55IOeei5gugEg",{"id":125,"title":6,"body":126,"description":11,"extension":14,"meta":130,"name":131,"navigation":17,"path":132,"readingTime":19,"seo":133,"stem":134,"__hash__":135},"authors\u002Fauthors\u002Fhoreb-parraud.md",{"type":8,"value":127,"toc":128},[],{"title":11,"searchDepth":12,"depth":12,"links":129},[],{},"Horeb Parraud","\u002Fauthors\u002Fhoreb-parraud",{"title":6,"description":11},"authors\u002Fhoreb-parraud","ajjsnUX4ohZI-ghMdbb92q_taWDkKXVZSLZXoAeLQtg",{"id":137,"title":37,"body":138,"description":11,"extension":14,"meta":142,"name":143,"navigation":17,"path":144,"readingTime":19,"seo":145,"stem":146,"__hash__":147},"authors\u002Fauthors\u002Fhugo-contreras.md",{"type":8,"value":139,"toc":140},[],{"title":11,"searchDepth":12,"depth":12,"links":141},[],{},"Hugo Contreras","\u002Fauthors\u002Fhugo-contreras",{"title":37,"description":11},"authors\u002Fhugo-contreras","2nc3VMu9ASq9Z6Pwx2-7-Ye991Pww4p-UEDBQFfjF-Q",{"id":149,"title":150,"body":151,"description":11,"extension":14,"meta":155,"name":156,"navigation":17,"path":157,"readingTime":19,"seo":158,"stem":159,"__hash__":160},"authors\u002Fauthors\u002Fjulien-tassin.md","Head of Engineering",{"type":8,"value":152,"toc":153},[],{"title":11,"searchDepth":12,"depth":12,"links":154},[],{},"Julien Tassin","\u002Fauthors\u002Fjulien-tassin",{"title":150,"description":11},"authors\u002Fjulien-tassin","iUIHI7SITje38Jh9X9uvYs4-VsHx4eCdt6hAlyLFG_o",{"id":162,"title":6,"body":163,"description":11,"extension":14,"meta":167,"name":168,"navigation":17,"path":169,"readingTime":19,"seo":170,"stem":171,"__hash__":172},"authors\u002Fauthors\u002Flaurent-renard.md",{"type":8,"value":164,"toc":165},[],{"title":11,"searchDepth":12,"depth":12,"links":166},[],{},"Laurent Renard","\u002Fauthors\u002Flaurent-renard",{"title":6,"description":11},"authors\u002Flaurent-renard","5BP7Ed-pt1SQHjh0UJ1XUrlLTcdlFaDoKBCP4deHq8A",{"id":174,"title":6,"body":175,"description":11,"extension":14,"meta":179,"name":180,"navigation":17,"path":181,"readingTime":19,"seo":182,"stem":183,"__hash__":184},"authors\u002Fauthors\u002Fleo-martin.md",{"type":8,"value":176,"toc":177},[],{"title":11,"searchDepth":12,"depth":12,"links":178},[],{},"Léo Martin","\u002Fauthors\u002Fleo-martin",{"title":6,"description":11},"authors\u002Fleo-martin","eYxCHkRgbGDV7shKdTA9s7Tu0zGV4yDGFoKR5MHQntY",{"id":186,"title":6,"body":187,"description":11,"extension":14,"meta":191,"name":192,"navigation":17,"path":193,"readingTime":19,"seo":194,"stem":195,"__hash__":196},"authors\u002Fauthors\u002Floic-bousquet.md",{"type":8,"value":188,"toc":189},[],{"title":11,"searchDepth":12,"depth":12,"links":190},[],{},"Loïc Bousquet","\u002Fauthors\u002Floic-bousquet",{"title":6,"description":11},"authors\u002Floic-bousquet","ko12qZwiGL8XNjAoy9oWypPkIjr29Pbq7vhdtgldqeQ",{"id":198,"title":6,"body":199,"description":11,"extension":14,"meta":203,"name":204,"navigation":17,"path":205,"readingTime":19,"seo":206,"stem":207,"__hash__":208},"authors\u002Fauthors\u002Floic-poullain.md",{"type":8,"value":200,"toc":201},[],{"title":11,"searchDepth":12,"depth":12,"links":202},[],{},"Loïc Poullain","\u002Fauthors\u002Floic-poullain",{"title":6,"description":11},"authors\u002Floic-poullain","oRIyJhFRTqxy5dLCYQ2OnYZ1DB-gLDUM-85vTSYuTF0",{"id":210,"title":100,"body":211,"description":11,"extension":14,"meta":215,"name":216,"navigation":17,"path":217,"readingTime":19,"seo":218,"stem":219,"__hash__":220},"authors\u002Fauthors\u002Fmaud-lelu.md",{"type":8,"value":212,"toc":213},[],{"title":11,"searchDepth":12,"depth":12,"links":214},[],{},"Maud Lélu","\u002Fauthors\u002Fmaud-lelu",{"title":100,"description":11},"authors\u002Fmaud-lelu","MMbsCKuE41OMHusrl12FIEsI-Trx7l8Nn_ANhvj2_y4",{"id":222,"title":37,"body":223,"description":11,"extension":14,"meta":227,"name":228,"navigation":17,"path":229,"readingTime":19,"seo":230,"stem":231,"__hash__":232},"authors\u002Fauthors\u002Fnicolas-poirier.md",{"type":8,"value":224,"toc":225},[],{"title":11,"searchDepth":12,"depth":12,"links":226},[],{},"Nicolas Poirier","\u002Fauthors\u002Fnicolas-poirier",{"title":37,"description":11},"authors\u002Fnicolas-poirier","dXrJkYo8az4SN_D23aYc3fQ7z8s1dR2a0lt1ogjAjJs",{"id":234,"title":37,"body":235,"description":11,"extension":14,"meta":239,"name":240,"navigation":17,"path":241,"readingTime":19,"seo":242,"stem":243,"__hash__":244},"authors\u002Fauthors\u002Fraphael-sauget.md",{"type":8,"value":236,"toc":237},[],{"title":11,"searchDepth":12,"depth":12,"links":238},[],{},"Raphaël Sauget","\u002Fauthors\u002Fraphael-sauget",{"title":37,"description":11},"authors\u002Fraphael-sauget","Uri9bcq0QDuxRA0PbBoNtu7p_5L3dALu4kzcXVW0xyM",{"id":246,"title":247,"body":248,"description":11,"extension":14,"meta":252,"name":253,"navigation":17,"path":254,"readingTime":19,"seo":255,"stem":256,"__hash__":257},"authors\u002Fauthors\u002Fromain-koenig.md","Co-funder & Head of innovation",{"type":8,"value":249,"toc":250},[],{"title":11,"searchDepth":12,"depth":12,"links":251},[],{},"Romain Koenig","\u002Fauthors\u002Fromain-koenig",{"title":247,"description":11},"authors\u002Fromain-koenig","uyS8--eG2_ezyqRABcJnMJmQKKuSArhPWd14aUvFeEw",{"id":259,"title":37,"body":260,"description":11,"extension":14,"meta":264,"name":265,"navigation":17,"path":266,"readingTime":19,"seo":267,"stem":268,"__hash__":269},"authors\u002Fauthors\u002Fromaric-juniet.md",{"type":8,"value":261,"toc":262},[],{"title":11,"searchDepth":12,"depth":12,"links":263},[],{},"Romaric Juniet","\u002Fauthors\u002Fromaric-juniet",{"title":37,"description":11},"authors\u002Fromaric-juniet","4Zb2artgT-eo-PHLXi3xi4d5t7s6PfhUxeSfXIikSUY",{"id":271,"title":6,"body":272,"description":11,"extension":14,"meta":276,"name":277,"navigation":17,"path":278,"readingTime":19,"seo":279,"stem":280,"__hash__":281},"authors\u002Fauthors\u002Fstanyslas-bres.md",{"type":8,"value":273,"toc":274},[],{"title":11,"searchDepth":12,"depth":12,"links":275},[],{},"Stanyslas Bres","\u002Fauthors\u002Fstanyslas-bres",{"title":6,"description":11},"authors\u002Fstanyslas-bres","Xa0SahETuiN4q1jrmR2ych3moAqcZ2LbU7vSfEt2RuU",{"id":283,"title":284,"body":285,"description":11,"extension":14,"meta":289,"name":290,"navigation":17,"path":291,"readingTime":19,"seo":292,"stem":293,"__hash__":294},"authors\u002Fauthors\u002Ftalent-acquisition.md","Talent Acquisition",{"type":8,"value":286,"toc":287},[],{"title":11,"searchDepth":12,"depth":12,"links":288},[],{},"Équipe Talent Acquisition","\u002Fauthors\u002Ftalent-acquisition",{"description":11},"authors\u002Ftalent-acquisition","doDfE76txftQ4wIiKjJoDmSpyzSKk0tzlgVAp6-opAY",{"id":296,"title":6,"body":297,"description":11,"extension":14,"meta":301,"name":302,"navigation":17,"path":303,"readingTime":19,"seo":304,"stem":305,"__hash__":306},"authors\u002Fauthors\u002Fvictor-borg.md",{"type":8,"value":298,"toc":299},[],{"title":11,"searchDepth":12,"depth":12,"links":300},[],{},"Victor Borg","\u002Fauthors\u002Fvictor-borg",{"title":6,"description":11},"authors\u002Fvictor-borg","-Za-JweoiP6hyclue_WkxMXdRUDTczPGlJf6AZckjUc",{"id":308,"title":6,"body":309,"description":11,"extension":14,"meta":313,"name":314,"navigation":17,"path":315,"readingTime":19,"seo":316,"stem":317,"__hash__":318},"authors\u002Fauthors\u002Fvirgil-roger.md",{"type":8,"value":310,"toc":311},[],{"title":11,"searchDepth":12,"depth":12,"links":312},[],{},"Virgil Roger","\u002Fauthors\u002Fvirgil-roger",{"title":6,"description":11},"authors\u002Fvirgil-roger","DfVFe5j0bCgXeEr381ZYOM5DP4m-pWb93J9-m_muKJ0",{"id":320,"title":6,"body":321,"description":11,"extension":14,"meta":325,"name":326,"navigation":17,"path":327,"readingTime":19,"seo":328,"stem":329,"__hash__":330},"authors\u002Fauthors\u002Fyukan-zhao.md",{"type":8,"value":322,"toc":323},[],{"title":11,"searchDepth":12,"depth":12,"links":324},[],{},"Yukan Zhao","\u002Fauthors\u002Fyukan-zhao",{"title":6,"description":11},"authors\u002Fyukan-zhao","LRPHugtAJnWHsmHxy9_SR5Zas_C5p-GR_uHEs1Fhk_E",{"id":332,"title":333,"author":334,"body":335,"date":1510,"description":1511,"extension":14,"lang":1512,"meta":1513,"navigation":17,"path":1514,"published":17,"readingTime":565,"seo":1515,"stem":1516,"tags":1517,"__hash__":1519},"articles\u002Farticles\u002F2022-01-11-lottie-animation.md","Lottie Animation","alexandre-guillon",{"type":8,"value":336,"toc":1501},[337,342,359,362,371,380,383,396,407,416,424,428,431,434,438,443,455,458,478,487,490,900,910,914,917,920,928,931,938,1034,1044,1048,1497],[338,339,341],"h2",{"id":340},"quest-ce-que-lottie","Qu'est-ce que Lottie ? 🧠",[343,344,345,352,353,358],"p",{},[346,347,351],"a",{"href":348,"rel":349},"http:\u002F\u002Fairbnb.io\u002Flottie\u002F",[350],"nofollow","Lottie"," est un format d'animation vectorielle se basant sur des données\nau format JSON. Il a été créé en 2015 par la société\naméricaine ",[346,354,357],{"href":355,"rel":356},"https:\u002F\u002Ffr.wikipedia.org\u002Fwiki\u002FAirbnb",[350],"Airbnb",".",[343,360,361],{},"Airbnb utilise beaucoup d'animations dans son parcours utilisateur et il était souvent problématique\npour les développeurs d'intégrer correctement les animations faites par les designers. Les GIFs\nfournis étaient difficilement adaptables à la résolution d’écran de l’utilisateur et mettait parfois\ndu temps à se charger.",[343,363,364,365,370],{},"Partant de ce constat, Airbnb a développé un plugin sur le logiciel Adobe After Effects baptisé\n",[346,366,369],{"href":367,"rel":368},"https:\u002F\u002Faescripts.com\u002Fbodymovin\u002F",[350],"Bodymovin",". Ce plugin permet d'exporter des animations dans un\nfichier au format JSON.",[343,372,373,374,379],{},"Le fichier au format JSON peut ensuite être interprété par les\n",[346,375,378],{"href":376,"rel":377},"https:\u002F\u002Fgithub.com\u002Fairbnb\u002Flottie#official-libraries",[350],"différentes librairies proposées"," par Lottie :\nsur un navigateur web, sur une application téléphone native ou encore sur une application Windows.",[343,381,382],{},"Les avantages de Lottie sont nombreux :",[384,385,386,390,393],"ul",{},[387,388,389],"li",{},"Le format est multi-plateforme. Le fichier JSON reste inchangé entre les différentes plateformes\ncibles.",[387,391,392],{},"La résolution des images s'adapte en fonction de la taille de l'écran de l'utilisateur puisque les\nanimations sont au format vectoriel.",[387,394,395],{},"Une animation Lottie est beaucoup plus légère qu'une séquence d'images PNG ou encore un GIF.",[397,398,400,401],"div",{"style":399},"display: flex; justify-content: center;","\n  ",[402,403],"img",{"src":404,"style":405,"alt":406},"\u002Fimages\u002Frex-elephant-dog.png","width: 400px; object-fit: contain;","Comparaison Lottie Rex Elephant Dog",[408,409,410],"blockquote",{},[343,411,412],{},[413,414,415],"em",{},"\"If a PNG is a T-Rex, and a GIF is an elephant, then a Lottie is a puppy.\"",[384,417,418,421],{},[387,419,420],{},"Le format Lottie est beaucoup plus portable que des fichiers SVG animés en CSS.",[387,422,423],{},"Lottie offre également une interface web de modification des animations. Il est donc possible de\nchanger un élément graphique de l'animation puis de réexporter le fichier JSON associé.",[338,425,427],{"id":426},"notre-besoin-chez-indy","Notre besoin chez Indy 💻",[343,429,430],{},"Chez Indy, nous souhaitons proposer à nos utilisateurs une expérience moderne et intuitive afin de\nfaciliter leur compréhension de la comptabilité, une notion parfois difficile à appréhender.",[343,432,433],{},"Le but était d'annoncer une nouvelle fonctionnalité dans l'application via une animation Lottie.",[338,435,437],{"id":436},"réalisation-technique-de-lintégration-de-lanimation-️","Réalisation technique de l'intégration de l'animation 🛠️",[439,440,442],"h3",{"id":441},"création-dun-composant-vue-générique-️","Création d'un composant Vue générique 🖌️",[343,444,445,446,450,451,454],{},"Nous avons créé un composant générique responsable du chargement de l'animation via la méthode\n",[447,448,449],"code",{},"loadAnimation"," de la bibliothèque ",[447,452,453],{},"lottie-web",". L'utilisation d'animation Lottie dans l'application\npasse obligatoirement par ce composant.",[343,456,457],{},"Ce composant prend en compte 3 props :",[384,459,460,466,472],{},[387,461,462,465],{},[447,463,464],{},"lottieJsonPath"," : le chemin vers la source de données JSON. Ce paramètre est évidemment\nobligatoire.",[387,467,468,471],{},[447,469,470],{},"loopAnimation"," : l'animation doit-elle être jouée en boucle ? Paramètre optionnel.",[387,473,474,477],{},[447,475,476],{},"autoPlayAnimation"," : l'animation doit-elle être jouée à l'initialisation du composant ? Paramètre\noptionnel.",[343,479,480,481,486],{},"La méthode loadAnimation peut également prendre en compte d'autres paramètres (cf.\n",[346,482,485],{"href":483,"rel":484},"https:\u002F\u002Fairbnb.io\u002Flottie\u002F#\u002Fweb?id=usage",[350],"la documentation","), mais nous jugions que ceux-ci étaient\ninutiles dans notre utilisation. En effet chez Indy, nous respectons le principe YAGNI (« You ain't\ngonna need it », qui peut se traduire par « vous n'en aurez pas besoin »). Nous évitons au maximum\nl’importation de librairies inutiles et l’implémentation de code non utilisés dans l’application.",[343,488,489],{},"Voici ce à quoi ressemble le composant LottieAnimation :",[491,492,496],"pre",{"className":493,"code":494,"language":495,"meta":11,"style":11},"language-vue shiki shiki-themes github-light github-dark","\u003Ctemplate>\n  \u003Cdiv ref=\"animationContainer\" \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nexport default {\n  name: 'LottieAnimation',\n  props: {\n    lottieJsonPath: {\n      \u002F\u002F the JSON path linked to the animation\n      type: String,\n      required: true,\n    },\n    loopAnimation: {\n      \u002F\u002F Do we want the animation to loop?\n      type: Boolean,\n      required: false,\n      default: true,\n    },\n    autoPlayAnimation: {\n      \u002F\u002F Do we want to play the animation on initialization?\n      type: Boolean,\n      required: false,\n      default: true,\n    },\n  },\n  data: () => ({\n    rendererSettings: {\n      scaleMode: 'centerCrop',\n      clearCanvas: true,\n      progressiveLoad: false,\n      hideOnTransparent: true,\n    },\n    lottieAnimation: undefined,\n  }),\n  async mounted() {\n    await this.init();\n  },\n  beforeDestroy() {\n    this.lottieAnimation?.destroy();\n  },\n  methods: {\n    [...]\n  },\n};\n\u003C\u002Fscript>\n","vue",[447,497,498,513,537,547,553,563,576,588,594,600,607,613,625,631,637,643,649,659,669,674,680,686,691,700,709,714,720,735,741,752,762,772,782,787,798,804,816,833,838,846,860,865,871,883,888,894],{"__ignoreMap":11},[499,500,502,506,510],"span",{"class":501,"line":19},"line",[499,503,505],{"class":504},"sVt8B","\u003C",[499,507,509],{"class":508},"s9eBZ","template",[499,511,512],{"class":504},">\n",[499,514,515,518,520,524,527,531,535],{"class":501,"line":12},[499,516,517],{"class":504},"  \u003C",[499,519,397],{"class":508},[499,521,523],{"class":522},"sScJk"," ref",[499,525,526],{"class":504},"=",[499,528,530],{"class":529},"sZZnC","\"animationContainer\"",[499,532,534],{"class":533},"s7hpK"," \u002F",[499,536,512],{"class":504},[499,538,540,543,545],{"class":501,"line":539},3,[499,541,542],{"class":504},"\u003C\u002F",[499,544,509],{"class":508},[499,546,512],{"class":504},[499,548,550],{"class":501,"line":549},4,[499,551,552],{"emptyLinePlaceholder":17},"\n",[499,554,556,558,561],{"class":501,"line":555},5,[499,557,505],{"class":504},[499,559,560],{"class":508},"script",[499,562,512],{"class":504},[499,564,566,570,573],{"class":501,"line":565},6,[499,567,569],{"class":568},"szBVR","export",[499,571,572],{"class":568}," default",[499,574,575],{"class":504}," {\n",[499,577,579,582,585],{"class":501,"line":578},7,[499,580,581],{"class":504},"  name: ",[499,583,584],{"class":529},"'LottieAnimation'",[499,586,587],{"class":504},",\n",[499,589,591],{"class":501,"line":590},8,[499,592,593],{"class":504},"  props: {\n",[499,595,597],{"class":501,"line":596},9,[499,598,599],{"class":504},"    lottieJsonPath: {\n",[499,601,603],{"class":501,"line":602},10,[499,604,606],{"class":605},"sJ8bj","      \u002F\u002F the JSON path linked to the animation\n",[499,608,610],{"class":501,"line":609},11,[499,611,612],{"class":504},"      type: String,\n",[499,614,616,619,623],{"class":501,"line":615},12,[499,617,618],{"class":504},"      required: ",[499,620,622],{"class":621},"sj4cs","true",[499,624,587],{"class":504},[499,626,628],{"class":501,"line":627},13,[499,629,630],{"class":504},"    },\n",[499,632,634],{"class":501,"line":633},14,[499,635,636],{"class":504},"    loopAnimation: {\n",[499,638,640],{"class":501,"line":639},15,[499,641,642],{"class":605},"      \u002F\u002F Do we want the animation to loop?\n",[499,644,646],{"class":501,"line":645},16,[499,647,648],{"class":504},"      type: Boolean,\n",[499,650,652,654,657],{"class":501,"line":651},17,[499,653,618],{"class":504},[499,655,656],{"class":621},"false",[499,658,587],{"class":504},[499,660,662,665,667],{"class":501,"line":661},18,[499,663,664],{"class":504},"      default: ",[499,666,622],{"class":621},[499,668,587],{"class":504},[499,670,672],{"class":501,"line":671},19,[499,673,630],{"class":504},[499,675,677],{"class":501,"line":676},20,[499,678,679],{"class":504},"    autoPlayAnimation: {\n",[499,681,683],{"class":501,"line":682},21,[499,684,685],{"class":605},"      \u002F\u002F Do we want to play the animation on initialization?\n",[499,687,689],{"class":501,"line":688},22,[499,690,648],{"class":504},[499,692,694,696,698],{"class":501,"line":693},23,[499,695,618],{"class":504},[499,697,656],{"class":621},[499,699,587],{"class":504},[499,701,703,705,707],{"class":501,"line":702},24,[499,704,664],{"class":504},[499,706,622],{"class":621},[499,708,587],{"class":504},[499,710,712],{"class":501,"line":711},25,[499,713,630],{"class":504},[499,715,717],{"class":501,"line":716},26,[499,718,719],{"class":504},"  },\n",[499,721,723,726,729,732],{"class":501,"line":722},27,[499,724,725],{"class":522},"  data",[499,727,728],{"class":504},": () ",[499,730,731],{"class":568},"=>",[499,733,734],{"class":504}," ({\n",[499,736,738],{"class":501,"line":737},28,[499,739,740],{"class":504},"    rendererSettings: {\n",[499,742,744,747,750],{"class":501,"line":743},29,[499,745,746],{"class":504},"      scaleMode: ",[499,748,749],{"class":529},"'centerCrop'",[499,751,587],{"class":504},[499,753,755,758,760],{"class":501,"line":754},30,[499,756,757],{"class":504},"      clearCanvas: ",[499,759,622],{"class":621},[499,761,587],{"class":504},[499,763,765,768,770],{"class":501,"line":764},31,[499,766,767],{"class":504},"      progressiveLoad: ",[499,769,656],{"class":621},[499,771,587],{"class":504},[499,773,775,778,780],{"class":501,"line":774},32,[499,776,777],{"class":504},"      hideOnTransparent: ",[499,779,622],{"class":621},[499,781,587],{"class":504},[499,783,785],{"class":501,"line":784},33,[499,786,630],{"class":504},[499,788,790,793,796],{"class":501,"line":789},34,[499,791,792],{"class":504},"    lottieAnimation: ",[499,794,795],{"class":621},"undefined",[499,797,587],{"class":504},[499,799,801],{"class":501,"line":800},35,[499,802,803],{"class":504},"  }),\n",[499,805,807,810,813],{"class":501,"line":806},36,[499,808,809],{"class":568},"  async",[499,811,812],{"class":522}," mounted",[499,814,815],{"class":504},"() {\n",[499,817,819,822,825,827,830],{"class":501,"line":818},37,[499,820,821],{"class":568},"    await",[499,823,824],{"class":621}," this",[499,826,358],{"class":504},[499,828,829],{"class":522},"init",[499,831,832],{"class":504},"();\n",[499,834,836],{"class":501,"line":835},38,[499,837,719],{"class":504},[499,839,841,844],{"class":501,"line":840},39,[499,842,843],{"class":522},"  beforeDestroy",[499,845,815],{"class":504},[499,847,849,852,855,858],{"class":501,"line":848},40,[499,850,851],{"class":621},"    this",[499,853,854],{"class":504},".lottieAnimation?.",[499,856,857],{"class":522},"destroy",[499,859,832],{"class":504},[499,861,863],{"class":501,"line":862},41,[499,864,719],{"class":504},[499,866,868],{"class":501,"line":867},42,[499,869,870],{"class":504},"  methods: {\n",[499,872,874,877,880],{"class":501,"line":873},43,[499,875,876],{"class":504},"    [",[499,878,879],{"class":568},"...",[499,881,882],{"class":504},"]\n",[499,884,886],{"class":501,"line":885},44,[499,887,719],{"class":504},[499,889,891],{"class":501,"line":890},45,[499,892,893],{"class":504},"};\n",[499,895,897],{"class":501,"line":896},46,[499,898,899],{"class":504},"\u003C\u002Fscript>\n",[343,901,902,903,905,906,909],{},"⚠️ Il est important d'appeler la méthode ",[447,904,857],{}," sur l'objet contenant l'animation dans le hook\n",[447,907,908],{},"beforeDestroy"," de Vue pour éviter les fuites de mémoire.",[439,911,913],{"id":912},"lazy-loading-de-la-bibliothèque-lottie-web-️","Lazy loading de la bibliothèque lottie-web ⚙️",[343,915,916],{},"La bibliothèque lottie-web est une bibliothèque plutôt lourde (taille gzipped à 67.3 Ko). Ceci est\nparticulièrement impactant si la bibliothèque est située dans le chunk principal lors du build.",[343,918,919],{},"Le chargement de la page principale pour un utilisateur n'ayant pas une bonne connexion prendrait un\ntemps beaucoup plus long dans ce cas. La bibliothèque serait quand même chargée, même si des pages\nn'affichent pas d'animation Lottie.",[343,921,922,923,927],{},"Dans notre cas d'utilisation chez Indy, nous utilisons Lottie pour l'instant qu'à un seul endroit.\nNous avons souhaité ",[924,925,926],"strong",{},"lazy loader"," la bibliothèque pour qu'elle ne soit chargée que quand\nl'utilisateur ouvre la page contenant l'animation. Dans sa navigation sur les autres pages, la\nbibliothèque n'est pas chargée.",[343,929,930],{},"Pour lazy loader lottie, nous avons créé un chunk contenant seulement la bibliothèque. La\nbibliothèque est en mode prefetch, c'est à dire qu'elle ne se charge que quand le navigateur est\ndisponible pour effectuer le chargement.",[343,932,933,934,937],{},"Voici à quoi ressemble la méthode ",[447,935,936],{},"init()"," de notre composant LottieAnimation. Elle s’occupe de lazy\nloader la bibliothèque Lottie puis de configurer l’animation Lottie.",[491,939,943],{"className":940,"code":941,"language":942,"meta":11,"style":11},"language-js shiki shiki-themes github-light github-dark","methods: {\n  async init() {\n    const lottie = await import(\n      \u002F* webpackChunkName: \"lottie\" *\u002F\n      \u002F* webpackMode: \"lazy\" *\u002F\n      \u002F* webpackPrefetch: true *\u002F\n      'lottie-web'\n    );\n    this.lottieAnimation = lottie.loadAnimation({\n      container: this.$refs.animationContainer,\n      renderer: 'svg',\n      loop: this.loopAnimation,\n      autoplay: this.autoPlayAnimation,\n      path: this.lottieJsonPath,\n      rendererSettings: this.rendererSettings,\n    });\n  },\n},\n\n","js",[447,944,945,950,955,960,965,970,975,980,985,990,995,1000,1005,1010,1015,1020,1025,1029],{"__ignoreMap":11},[499,946,947],{"class":501,"line":19},[499,948,949],{},"methods: {\n",[499,951,952],{"class":501,"line":12},[499,953,954],{},"  async init() {\n",[499,956,957],{"class":501,"line":539},[499,958,959],{},"    const lottie = await import(\n",[499,961,962],{"class":501,"line":549},[499,963,964],{},"      \u002F* webpackChunkName: \"lottie\" *\u002F\n",[499,966,967],{"class":501,"line":555},[499,968,969],{},"      \u002F* webpackMode: \"lazy\" *\u002F\n",[499,971,972],{"class":501,"line":565},[499,973,974],{},"      \u002F* webpackPrefetch: true *\u002F\n",[499,976,977],{"class":501,"line":578},[499,978,979],{},"      'lottie-web'\n",[499,981,982],{"class":501,"line":590},[499,983,984],{},"    );\n",[499,986,987],{"class":501,"line":596},[499,988,989],{},"    this.lottieAnimation = lottie.loadAnimation({\n",[499,991,992],{"class":501,"line":602},[499,993,994],{},"      container: this.$refs.animationContainer,\n",[499,996,997],{"class":501,"line":609},[499,998,999],{},"      renderer: 'svg',\n",[499,1001,1002],{"class":501,"line":615},[499,1003,1004],{},"      loop: this.loopAnimation,\n",[499,1006,1007],{"class":501,"line":627},[499,1008,1009],{},"      autoplay: this.autoPlayAnimation,\n",[499,1011,1012],{"class":501,"line":633},[499,1013,1014],{},"      path: this.lottieJsonPath,\n",[499,1016,1017],{"class":501,"line":639},[499,1018,1019],{},"      rendererSettings: this.rendererSettings,\n",[499,1021,1022],{"class":501,"line":645},[499,1023,1024],{},"    });\n",[499,1026,1027],{"class":501,"line":651},[499,1028,719],{},[499,1030,1031],{"class":501,"line":661},[499,1032,1033],{},"},\n",[343,1035,1036,1037,1039,1040,1043],{},"⚠️ La référence au container dans la méthode ",[447,1038,449],{}," ne doit pas pointer sur un élément HTML\ncontenant des directives Vue telles que ",[447,1041,1042],{},"v-if",". Autrement, le mapping ne peut pas se faire.",[439,1045,1047],{"id":1046},"code-complet-du-composant-lottieanimation","Code complet du composant LottieAnimation 👨🏽‍💻",[491,1049,1051],{"className":493,"code":1050,"language":495,"meta":11,"style":11},"\u003Ctemplate>\n  \u003Cdiv ref=\"animationContainer\" \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nexport default {\n  name: \"LottieAnimation\",\n  props: {\n    lottieJsonPath: {\n      \u002F\u002F the JSON path linked to the animation\n      type: String,\n      required: true,\n    },\n    loopAnimation: {\n      \u002F\u002F Do we want the animation to loop ?\n      type: Boolean,\n      required: false,\n      default: true,\n    },\n    autoPlayAnimation: {\n      \u002F\u002F Do we want to play the animation on initialization ?\n      type: Boolean,\n      required: false,\n      default: true,\n    },\n  },\n  data: () => ({\n    rendererSettings: {\n      scaleMode: \"centerCrop\",\n      clearCanvas: true,\n      progressiveLoad: false,\n      hideOnTransparent: true,\n    },\n    lottieAnimation: undefined,\n  }),\n  async mounted() {\n    await this.init();\n  },\n  beforeDestroy() {\n    this.lottieAnimation?.destroy();\n  },\n  methods: {\n    async init() {\n      const lottie = await import(\n        \u002F* webpackChunkName: \"lottie\" *\u002F\n        \u002F* webpackMode: \"lazy\" *\u002F\n        \u002F* webpackPrefetch: true *\u002F\n        \"lottie-web\"\n      );\n      this.lottieAnimation = lottie.loadAnimation({\n        container: this.$refs.animationContainer,\n        renderer: \"svg\",\n        loop: this.loopAnimation,\n        autoplay: this.autoPlayAnimation,\n        path: this.lottieJsonPath,\n        rendererSettings: this.rendererSettings,\n      });\n    },\n  },\n};\n\u003C\u002Fscript>\n",[447,1052,1053,1061,1077,1085,1089,1097,1105,1114,1118,1122,1126,1130,1138,1142,1146,1151,1155,1163,1171,1175,1179,1184,1188,1196,1204,1208,1212,1222,1226,1235,1243,1251,1259,1263,1271,1275,1283,1295,1299,1305,1315,1319,1323,1333,1353,1358,1363,1369,1375,1381,1400,1412,1423,1434,1445,1456,1467,1473,1478,1483,1488],{"__ignoreMap":11},[499,1054,1055,1057,1059],{"class":501,"line":19},[499,1056,505],{"class":504},[499,1058,509],{"class":508},[499,1060,512],{"class":504},[499,1062,1063,1065,1067,1069,1071,1073,1075],{"class":501,"line":12},[499,1064,517],{"class":504},[499,1066,397],{"class":508},[499,1068,523],{"class":522},[499,1070,526],{"class":504},[499,1072,530],{"class":529},[499,1074,534],{"class":533},[499,1076,512],{"class":504},[499,1078,1079,1081,1083],{"class":501,"line":539},[499,1080,542],{"class":504},[499,1082,509],{"class":508},[499,1084,512],{"class":504},[499,1086,1087],{"class":501,"line":549},[499,1088,552],{"emptyLinePlaceholder":17},[499,1090,1091,1093,1095],{"class":501,"line":555},[499,1092,505],{"class":504},[499,1094,560],{"class":508},[499,1096,512],{"class":504},[499,1098,1099,1101,1103],{"class":501,"line":565},[499,1100,569],{"class":568},[499,1102,572],{"class":568},[499,1104,575],{"class":504},[499,1106,1107,1109,1112],{"class":501,"line":578},[499,1108,581],{"class":504},[499,1110,1111],{"class":529},"\"LottieAnimation\"",[499,1113,587],{"class":504},[499,1115,1116],{"class":501,"line":590},[499,1117,593],{"class":504},[499,1119,1120],{"class":501,"line":596},[499,1121,599],{"class":504},[499,1123,1124],{"class":501,"line":602},[499,1125,606],{"class":605},[499,1127,1128],{"class":501,"line":609},[499,1129,612],{"class":504},[499,1131,1132,1134,1136],{"class":501,"line":615},[499,1133,618],{"class":504},[499,1135,622],{"class":621},[499,1137,587],{"class":504},[499,1139,1140],{"class":501,"line":627},[499,1141,630],{"class":504},[499,1143,1144],{"class":501,"line":633},[499,1145,636],{"class":504},[499,1147,1148],{"class":501,"line":639},[499,1149,1150],{"class":605},"      \u002F\u002F Do we want the animation to loop ?\n",[499,1152,1153],{"class":501,"line":645},[499,1154,648],{"class":504},[499,1156,1157,1159,1161],{"class":501,"line":651},[499,1158,618],{"class":504},[499,1160,656],{"class":621},[499,1162,587],{"class":504},[499,1164,1165,1167,1169],{"class":501,"line":661},[499,1166,664],{"class":504},[499,1168,622],{"class":621},[499,1170,587],{"class":504},[499,1172,1173],{"class":501,"line":671},[499,1174,630],{"class":504},[499,1176,1177],{"class":501,"line":676},[499,1178,679],{"class":504},[499,1180,1181],{"class":501,"line":682},[499,1182,1183],{"class":605},"      \u002F\u002F Do we want to play the animation on initialization ?\n",[499,1185,1186],{"class":501,"line":688},[499,1187,648],{"class":504},[499,1189,1190,1192,1194],{"class":501,"line":693},[499,1191,618],{"class":504},[499,1193,656],{"class":621},[499,1195,587],{"class":504},[499,1197,1198,1200,1202],{"class":501,"line":702},[499,1199,664],{"class":504},[499,1201,622],{"class":621},[499,1203,587],{"class":504},[499,1205,1206],{"class":501,"line":711},[499,1207,630],{"class":504},[499,1209,1210],{"class":501,"line":716},[499,1211,719],{"class":504},[499,1213,1214,1216,1218,1220],{"class":501,"line":722},[499,1215,725],{"class":522},[499,1217,728],{"class":504},[499,1219,731],{"class":568},[499,1221,734],{"class":504},[499,1223,1224],{"class":501,"line":737},[499,1225,740],{"class":504},[499,1227,1228,1230,1233],{"class":501,"line":743},[499,1229,746],{"class":504},[499,1231,1232],{"class":529},"\"centerCrop\"",[499,1234,587],{"class":504},[499,1236,1237,1239,1241],{"class":501,"line":754},[499,1238,757],{"class":504},[499,1240,622],{"class":621},[499,1242,587],{"class":504},[499,1244,1245,1247,1249],{"class":501,"line":764},[499,1246,767],{"class":504},[499,1248,656],{"class":621},[499,1250,587],{"class":504},[499,1252,1253,1255,1257],{"class":501,"line":774},[499,1254,777],{"class":504},[499,1256,622],{"class":621},[499,1258,587],{"class":504},[499,1260,1261],{"class":501,"line":784},[499,1262,630],{"class":504},[499,1264,1265,1267,1269],{"class":501,"line":789},[499,1266,792],{"class":504},[499,1268,795],{"class":621},[499,1270,587],{"class":504},[499,1272,1273],{"class":501,"line":800},[499,1274,803],{"class":504},[499,1276,1277,1279,1281],{"class":501,"line":806},[499,1278,809],{"class":568},[499,1280,812],{"class":522},[499,1282,815],{"class":504},[499,1284,1285,1287,1289,1291,1293],{"class":501,"line":818},[499,1286,821],{"class":568},[499,1288,824],{"class":621},[499,1290,358],{"class":504},[499,1292,829],{"class":522},[499,1294,832],{"class":504},[499,1296,1297],{"class":501,"line":835},[499,1298,719],{"class":504},[499,1300,1301,1303],{"class":501,"line":840},[499,1302,843],{"class":522},[499,1304,815],{"class":504},[499,1306,1307,1309,1311,1313],{"class":501,"line":848},[499,1308,851],{"class":621},[499,1310,854],{"class":504},[499,1312,857],{"class":522},[499,1314,832],{"class":504},[499,1316,1317],{"class":501,"line":862},[499,1318,719],{"class":504},[499,1320,1321],{"class":501,"line":867},[499,1322,870],{"class":504},[499,1324,1325,1328,1331],{"class":501,"line":873},[499,1326,1327],{"class":568},"    async",[499,1329,1330],{"class":522}," init",[499,1332,815],{"class":504},[499,1334,1335,1338,1341,1344,1347,1350],{"class":501,"line":885},[499,1336,1337],{"class":568},"      const",[499,1339,1340],{"class":621}," lottie",[499,1342,1343],{"class":568}," =",[499,1345,1346],{"class":568}," await",[499,1348,1349],{"class":522}," import",[499,1351,1352],{"class":504},"(\n",[499,1354,1355],{"class":501,"line":890},[499,1356,1357],{"class":605},"        \u002F* webpackChunkName: \"lottie\" *\u002F\n",[499,1359,1360],{"class":501,"line":896},[499,1361,1362],{"class":605},"        \u002F* webpackMode: \"lazy\" *\u002F\n",[499,1364,1366],{"class":501,"line":1365},47,[499,1367,1368],{"class":605},"        \u002F* webpackPrefetch: true *\u002F\n",[499,1370,1372],{"class":501,"line":1371},48,[499,1373,1374],{"class":529},"        \"lottie-web\"\n",[499,1376,1378],{"class":501,"line":1377},49,[499,1379,1380],{"class":504},"      );\n",[499,1382,1384,1387,1390,1392,1395,1397],{"class":501,"line":1383},50,[499,1385,1386],{"class":621},"      this",[499,1388,1389],{"class":504},".lottieAnimation ",[499,1391,526],{"class":568},[499,1393,1394],{"class":504}," lottie.",[499,1396,449],{"class":522},[499,1398,1399],{"class":504},"({\n",[499,1401,1403,1406,1409],{"class":501,"line":1402},51,[499,1404,1405],{"class":504},"        container: ",[499,1407,1408],{"class":621},"this",[499,1410,1411],{"class":504},".$refs.animationContainer,\n",[499,1413,1415,1418,1421],{"class":501,"line":1414},52,[499,1416,1417],{"class":504},"        renderer: ",[499,1419,1420],{"class":529},"\"svg\"",[499,1422,587],{"class":504},[499,1424,1426,1429,1431],{"class":501,"line":1425},53,[499,1427,1428],{"class":504},"        loop: ",[499,1430,1408],{"class":621},[499,1432,1433],{"class":504},".loopAnimation,\n",[499,1435,1437,1440,1442],{"class":501,"line":1436},54,[499,1438,1439],{"class":504},"        autoplay: ",[499,1441,1408],{"class":621},[499,1443,1444],{"class":504},".autoPlayAnimation,\n",[499,1446,1448,1451,1453],{"class":501,"line":1447},55,[499,1449,1450],{"class":504},"        path: ",[499,1452,1408],{"class":621},[499,1454,1455],{"class":504},".lottieJsonPath,\n",[499,1457,1459,1462,1464],{"class":501,"line":1458},56,[499,1460,1461],{"class":504},"        rendererSettings: ",[499,1463,1408],{"class":621},[499,1465,1466],{"class":504},".rendererSettings,\n",[499,1468,1470],{"class":501,"line":1469},57,[499,1471,1472],{"class":504},"      });\n",[499,1474,1476],{"class":501,"line":1475},58,[499,1477,630],{"class":504},[499,1479,1481],{"class":501,"line":1480},59,[499,1482,719],{"class":504},[499,1484,1486],{"class":501,"line":1485},60,[499,1487,893],{"class":504},[499,1489,1491,1493,1495],{"class":501,"line":1490},61,[499,1492,542],{"class":504},[499,1494,560],{"class":508},[499,1496,512],{"class":504},[1498,1499,1500],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":11,"searchDepth":12,"depth":12,"links":1502},[1503,1504,1505],{"id":340,"depth":12,"text":341},{"id":426,"depth":12,"text":427},{"id":436,"depth":12,"text":437,"children":1506},[1507,1508,1509],{"id":441,"depth":539,"text":442},{"id":912,"depth":539,"text":913},{"id":1046,"depth":539,"text":1047},"2022-01-11","Airbnb utilise beaucoup d’animations dans son parcours utilisateur et il était souvent problématique pour les développeurs d’intégrer correctement les animations faites par les designers.","fr",{},"\u002Farticles\u002F2022-01-11-lottie-animation",{"title":333,"description":1511},"articles\u002F2022-01-11-lottie-animation",[1518],"Tech","E-sRIMzGbURVAl0PHLuaUhm8cWCMJL_N8CtRrdo78DA",1778159244310]