[{"data":1,"prerenderedAt":320},["ShallowReactive",2],{"DefaultLayouten":3,"language-blog-slug-web-animation-api-effective-animations-are-finally-here-i18n-slugs":134,"language-blog-slug-en-web-animation-api-effective-animations-are-finally-here":138},{"app":4,"menu":31,"footer":66},{"githubUrl":5,"youtubeUrl":6,"linkedinUrl":7,"phoneNumber":8,"emailAddress":9,"legal":10,"addresses":20},"https:\u002F\u002Fgithub.com\u002Fvoorhoede\u002F","https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCzHuhQVYFRixtQN2-swcuGg","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fde-voorhoede","+31 20 2610 954","post@voorhoede.nl",[11,14,17],{"title":12,"value":13},"KvK","56017235",{"title":15,"value":16},"BTW","NL851944620B01",{"title":18,"value":19},"IBAN","NL14TRIO0320142078",[21,26],{"address":22,"city":23,"googleMapsLink":24,"postalCode":25},"Koivistokade 70","Amsterdam","https:\u002F\u002Fwww.google.com\u002Fmaps\u002Fplace\u002FDe+Voorhoede+%7C+Front-end+Development\u002F@52.396847,4.8700823,17z\u002Fdata=!3m1!4b1!4m5!3m4!1s0x47c5e21d502d2d59:0xbf570944a96ebf45!8m2!3d52.347647!4d4.8502154","1013 BB",{"address":27,"city":28,"googleMapsLink":29,"postalCode":30},"Koornmarkt 22","Delft","https:\u002F\u002Fwww.google.nl\u002Fmaps\u002Fplace\u002FKoornmarkt+22,+2611+EG+Delft\u002F@52.0093477,4.3573054,17z\u002F","2611 EG",{"title":32,"callToActions":33,"links":39},"Site Menu",[34],{"id":35,"title":36,"link":37},"163140902","Contact",{"__typename":38},"ContactRecord",[40,46,51,56,61],{"id":41,"title":42,"link":43},"163140904","Impact",{"__typename":44,"slug":45},"PageRecord","impact",{"id":47,"title":48,"link":49},"163140905","Services",{"__typename":50},"ServiceOverviewRecord",{"id":52,"title":53,"link":54},"163140906","Cases",{"__typename":55},"CaseOverviewRecord",{"id":57,"title":58,"link":59},"163140908","About us",{"__typename":44,"slug":60},"about-us",{"id":62,"title":63,"link":64},"d6WdFJq2SOuc3dWtpibbXQ","Work at",{"__typename":44,"slug":65},"work-at",{"links":67,"copyrightTitle":93,"copyrightLabel":94,"copyrightLink":95,"privacyTitle":96,"privacyLabel":97,"privacyLink":98,"certificatesGrid":99},[68,71,74,77,82,85,88],{"id":69,"title":42,"link":70},"144185264",{"__typename":44,"slug":45},{"id":72,"title":48,"link":73},"144185265",{"__typename":50},{"id":75,"title":53,"link":76},"144185266",{"__typename":55},{"id":78,"title":79,"link":80},"144185267","Blog",{"__typename":81},"BlogPostOverviewRecord",{"id":83,"title":58,"link":84},"144185268",{"__typename":44,"slug":60},{"id":86,"title":36,"link":87},"144185269",{"__typename":38},{"id":89,"title":90,"link":91},"144185270","FAQ",{"__typename":44,"slug":92},"faq","Creative Commons licence and disclaimer","CC BY 4.0","https:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby\u002F4.0\u002F","De Voorhoede privacy statement (pdf)","Privacy statement","https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1763455455-vh-isms-006-privacy-statement-de-voorhoede-en.pdf",[100,112,123],{"id":101,"image":102,"link":107},"Xq4bBfg_TZ6Fkjax9mkbLQ",{"url":103,"alt":104,"width":105,"height":106},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353463-b-corp-logo-black-rgb.png","B Corp logo",404,680,{"__typename":108,"id":109,"title":110,"url":111},"ExternalLinkRecord","fGW1ak8XQYaYDLkBSyncog","B Corp","https:\u002F\u002Fwww.bcorporation.net\u002Fen-us\u002Ffind-a-b-corp\u002Fcompany\u002Fde-voorhoede\u002F",{"id":113,"image":114,"link":119},"c5mCXRTiSraRIB25fw1p7Q",{"url":115,"alt":116,"width":117,"height":118},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353461-dda-boxlogo-black.png","Dutch Digital Agencies logo",627,480,{"__typename":108,"id":120,"title":121,"url":122},"P6Jh7B0cTv2cKyNEeKVWVQ","Dutch Digital Agencies","https:\u002F\u002Fdutchdigitalagencies.com\u002Fleden\u002Fde-voorhoede\u002F",{"id":124,"image":125,"link":129},"MT5SCyNxSTSr_v5eeATMZw",{"url":126,"alt":127,"width":128,"height":128},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1775730283-dnv.png","DNV logo",518,{"id":130,"title":131,"link":132},"BRtNB5HnT5i-7HkA8IYzBw","DIV",{"__typename":44,"slug":133},"impact\u002Fdigitale-producten-privacy-by-design",[135],{"locale":136,"value":137},"en","web-animation-api-effective-animations-are-finally-here",{"page":139},{"slug":137,"i18nSlugs":140,"social":142,"title":143,"subtitle":79,"isArchived":147,"headerIllustration":148,"date":149,"authors":150,"introTitle":159,"items":160,"pivots":300,"relatedBlogPosts":318,"tags":319,"onMountedScript":153,"onUnmountedScript":153},[141],{"locale":136,"value":137},{"title":143,"description":144,"image":145},"Web Animation API: effective animations are finally here","The WAAPI landed in all modern browsers. In this blog we provide you with the insights you need for creating effective animations. Read more.",{"url":146},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1661504099-waapi.png",false,null,"2022-08-30T02:00:00.000+02:00",[151],{"name":152,"lastName":153,"slug":154,"image":155},"Ben","","ben",{"url":156,"alt":148,"width":157,"height":158},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534636-placeholder.jpg",1235,1646,"We’ve come a long way in terms of animation on the web. The first animations on the web were GIFs. Then jQuery.animate() came along to create custom animations. The current state of animation uses animation libraries, like GreenSock Animation Platform and Velocity. Ofcourse, CSS has had @keyframe animation for a while, but there hasn’t been a good interface to connect that to JavaScript. This has finally changed! ",[161,165,169,173,184,190,197,201,205,209,214,217,221,224,227,235,239,242,246,249,252,255,263,266,269,272,279,283,286,293,297],{"__typename":162,"id":163,"title":153,"body":164},"TextSectionRecord","123893410","\u003Cp>\u003Cspan style=\"font-weight: 400;\">The Web Animations API (or WAAPI) landed in all modern browsers. What does this imply for you as a front-end developer? We played around with this feature. In this blog we provide you with the insights you need for creating effective animations.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":162,"id":166,"title":167,"body":168},"123893411","The footprint of animation libraries","\u003Cp>\u003Cspan style=\"font-weight: 400;\">The modern-day web is mobile-first. So, we want to send as little data as possible. But at the same time we want a better interface with animations. For example: have a checkout where selected items fly into a shopping basket. Is putting a JS animation library into your project worth it? To give you a hint, check out the footprint of commonly used libraries down below\u003C\u002Fspan>\u003Cspan style=\"background-color: transparent; font-family: inherit; font-size: inherit; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; letter-spacing: 0px;\">\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n  \u003Cli>\u003Cspan style=\"background-color: transparent; font-family: inherit; font-size: inherit; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; letter-spacing: 0px;\">Anime.js: 6.9 kb\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli>\u003Cspan style=\"background-color: transparent; font-family: inherit; font-size: inherit; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; letter-spacing: 0px;\">GSAP: 23.2 kb\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli>\u003Cspan style=\"background-color: transparent; font-family: inherit; font-size: inherit; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; letter-spacing: 0px;\">Mo.js: 35.4 kb\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli>\u003Cspan style=\"background-color: transparent; font-family: inherit; font-size: inherit; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; letter-spacing: 0px;\">Velocity-animate: 15.5 kb\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli>\u003Cspan style=\"background-color: transparent; font-family: inherit; font-size: inherit; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; letter-spacing: 0px;\">Popmotion: 7.1kb\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>",{"__typename":162,"id":170,"title":171,"body":172},"123893412","Native animation implementation","\u003Cp>\u003Cspan style=\"font-weight: 400;\">We ran stress-tests for both the WAAPI and GSAP. The result? The stress-test for GSAP runs more slowly than the WAAPI one. Why? \u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">Because updating DOM nodes is cost-intensive for the browser in terms of painting and rendering.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":174,"id":175,"mute":147,"loop":147,"autoplay":147,"caption":153,"video":176,"gif":148},"ResponsiveVideoRecord","123893413",{"url":177,"title":178,"height":179,"width":180,"provider":181,"providerUid":182,"thumbnailUrl":183},"https:\u002F\u002Fvimeo.com\u002F679753574","Stress-test WAAPI",204,426,"vimeo","679753574","https:\u002F\u002Fi.vimeocdn.com\u002Fvideo\u002F1377766123-e90f43bacfdc38f97b1f0eb4847106c355fc4b93161ceb1c91980b74fd5d1d17-d_295x166",{"__typename":185,"id":186,"url":187,"title":188,"caption":153,"previewType":189},"CodePenBlockRecord","142937613","https:\u002F\u002Fcodepen.io\u002FHornebom\u002Fembed\u002Fpreview\u002FdypKoYO?default-tab=js%2Cresult&theme-id=dark","Stress test WAAPI","codepen",{"__typename":174,"id":191,"mute":147,"loop":147,"autoplay":147,"caption":153,"video":192,"gif":148},"123893417",{"url":193,"title":194,"height":179,"width":180,"provider":181,"providerUid":195,"thumbnailUrl":196},"https:\u002F\u002Fvimeo.com\u002F679754537","Stress-test GSAP","679754537","https:\u002F\u002Fi.vimeocdn.com\u002Fvideo\u002F1377768294-f90d6be62ede817dc438c669eaa055c0a56bfcfb212f9f75fe1061ff83acea00-d_295x166",{"__typename":185,"id":198,"url":199,"title":200,"caption":153,"previewType":189},"142934946","https:\u002F\u002Fcodepen.io\u002FHornebom\u002Fembed\u002Fpreview\u002FwvzXamQ?default-tab=js%2Cresult&theme-id=dark","WAAPI stress test comparison",{"__typename":162,"id":202,"title":203,"body":204},"123893420","Reasons to use the WAAPI","\u003Cp>\u003Cspan style=\"font-weight: 400;\">The WAAPI has 4 major benefits in comparison to the traditional approach:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Col>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">The WAAPI runs off the main-thread\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Performance: no inline styles\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">0 kb to load\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Support in all modern browsers\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Besides the benefits mentioned above, there are a lot of other functionalities and cases where the use of WAAPI comes in advance: \u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Chaining and callbacks.This helps to develop asynchronous code keeps and prevents errors.\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Jump and seek inside keyframes to keep an overview of all the moving bits and pieces you animate.\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Define playrate, allowing more control.\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Synchronize multiple animations. Useful for running your animation across multiple devices. \u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">To replace JS libraries as, refactoring CSS may require more effort.\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Randomized values. For example when you have a particle system going and you go from an organized system to a chaotic one. \u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Modify keyframes on the fly and therefore providing more flexibility.\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Toggle animations. Another capability which can be done easier with WAAPI.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>",{"__typename":162,"id":206,"title":207,"body":208},"123893422","Now, the recipes. How do we get this done?","\u003Cp>\u003Cspan style=\"font-weight: 400;\">First, we go from offset on y-axis to no offset on y-axis in the transform function. Then we define the opacity, duration and the first stage (fill function). \u003C\u002Fspan>\u003C\u002Fp>",{"__typename":210,"id":211,"language":212,"body":213},"CodeBlockRecord","123893423","js"," node.animate({\n    transform: [ 'translateY(100%)', 'translateY(0%)' ], \n    opacity: [ 0, 1 ],\n    easing: 'ease-out',\n  }, {\n    duration: 1000,\n    fill: 'both'\n  }) ",{"__typename":162,"id":215,"title":153,"body":216},"123893425","\u003Cp>\u003Cspan style=\"font-weight: 400;\">This gives the following result and could be used, for example, for a menu sliding into the screen:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":185,"id":218,"url":219,"title":220,"caption":153,"previewType":189},"142937614","https:\u002F\u002Fcodepen.io\u002FHornebom\u002Fembed\u002Fpreview\u002FExgwqpb?default-tab=js%2Cresult&theme-id=dark","Hello world animation",{"__typename":162,"id":222,"title":153,"body":223},"123893429","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Now let’s do a more sophisticated and powerful example. Here, we pause tween. Otherwise it automatically runs and you want to reuse it and go back and forth every time you run it. So instead of a menu sliding into the screen each time from the bottom, you could choose to slide it out of the screen again starting from the top. \u003C\u002Fspan>\u003C\u002Fp>",{"__typename":210,"id":225,"language":212,"body":226},"123893430","const tween = node.animate({\n  transform: [ 'translateY(100%) rotate(360deg)', 'translateY(0%) rotate(0deg)' ], \n  ….\n}, {\n …\n})\n\ntween.pause()\n\nfunction handleToggle(event) {\n  event.preventDefault()\n  \n  if(initial) {\n    tween.play()\n    initial = false\n  } else {\n    tween.reverse() \n  }\n}\n",{"__typename":174,"id":228,"mute":147,"loop":147,"autoplay":147,"caption":153,"video":229,"gif":148},"123893432",{"url":230,"title":231,"height":232,"width":180,"provider":181,"providerUid":233,"thumbnailUrl":234},"https:\u002F\u002Fvimeo.com\u002F679762899","Back and Forth",194,"679762899","https:\u002F\u002Fi.vimeocdn.com\u002Fvideo\u002F1377789957-d307fc35aaacea5a87e41616eb93535cd26bbf0ba355160d043e0ca472ba1490-d_295x166",{"__typename":185,"id":236,"url":237,"title":238,"caption":153,"previewType":189},"142937615","https:\u002F\u002Fcodepen.io\u002FHornebom\u002Fembed\u002Fpreview\u002FqBaowbW?default-tab=js%2Cresult&theme-id=dark","Play and reverse toggle animation",{"__typename":162,"id":240,"title":153,"body":241},"123893435","\u003Cp>\u003Cspan style=\"font-weight: 400;\">What if you want to move from one part of your website to another? The computed style of the element has to be put back into the DOM. Down below we show how to commit to style, take properties you set in keyframes and put them on the DOM element. \u003C\u002Fspan>\u003C\u002Fp>",{"__typename":185,"id":243,"url":244,"title":245,"caption":153,"previewType":189},"142937616","https:\u002F\u002Fcodepen.io\u002FHornebom\u002Fembed\u002Fpreview\u002FyLaKrRw?default-tab=js%2Cresult&theme-id=dark","Commit to style",{"__typename":210,"id":247,"language":212,"body":248},"123893439","function animateTo(element, keyframes, options) {\n   const animation = element.animate(\n      keyframes, \n      {...options, fill: ‘both’}\n   )\n\n   animation.addEventListener(‘finish’, ( ) => {\n      animation.commitStyles( )\n      animation.cancel( )\n   } )\n\n   return animation  \n}",{"__typename":162,"id":250,"title":153,"body":251},"123893440","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Sometimes when you’re busy with an animation, you also want to be able to debug it. What does an animation look like in every state? What does it look like at 10% for example? To do so, we used a progress element and assigned the values to the animation and currentTime. You can combine this with a scroll position that you scrub to an animation, depending on how far someone scrolls. Everything that's normalized into a percentage can be used in animation.  \u003C\u002Fspan>\u003C\u002Fp>",{"__typename":210,"id":253,"language":212,"body":254},"123893441","progress.addEventListener(‘input’, handleProgress)\n\nfunction handleProgress(event) {  \n  const { value } = event.target\n  const progress = duration * .01 * value\n  animation.currentTime = progress\n}",{"__typename":174,"id":256,"mute":147,"loop":147,"autoplay":147,"caption":153,"video":257,"gif":148},"123893442",{"url":258,"title":259,"height":260,"width":180,"provider":181,"providerUid":261,"thumbnailUrl":262},"https:\u002F\u002Fvimeo.com\u002F679772487","Progress",166,"679772487","https:\u002F\u002Fi.vimeocdn.com\u002Fvideo\u002F1377813103-162cba1dbd957f80b94740ac4855d334222e4064d2fd53363ecdd00dbe760fb3-d_295x166",{"__typename":185,"id":264,"url":265,"title":259,"caption":153,"previewType":189},"142937617","https:\u002F\u002Fcodepen.io\u002FHornebom\u002Fembed\u002Fpreview\u002FKKgRKoq?default-tab=js%2Cresult&theme-id=dark",{"__typename":162,"id":267,"title":153,"body":268},"123893445","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Let’s explore the accessibility topic now. Not everyone interacts with your website in the same way. Some people like animations to be switched off, maybe because they have motion sickness or it takes too much time for them. So, let’s give them the option to switch it off or turn it down a notch in terms of duration and\u002For unsteadily movement. This can easily be done by adding a stagger. You don’t need to know how many items there are beforehand, since you already have styling in CSS. \u003C\u002Fspan>\u003C\u002Fp>",{"__typename":210,"id":270,"language":212,"body":271},"123893446","const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches\n\nconst duration = reducedMotion ? .01 : 400\nconst stagger = reducedMotion ? 0 : 50",{"__typename":174,"id":273,"mute":147,"loop":147,"autoplay":147,"caption":153,"video":274,"gif":148},"123893447",{"url":275,"title":276,"height":260,"width":180,"provider":181,"providerUid":277,"thumbnailUrl":278},"https:\u002F\u002Fvimeo.com\u002F679774159","Accessibility","679774159","https:\u002F\u002Fi.vimeocdn.com\u002Fvideo\u002F1377817303-fa4a515a9a3b3994d23940736e3146cb5fdd48340df159b969a87c19335c2392-d_295x166",{"__typename":185,"id":280,"url":281,"title":282,"caption":153,"previewType":189},"142937618","https:\u002F\u002Fcodepen.io\u002FHornebom\u002Fembed\u002Fpreview\u002FMWjVNYB?default-tab=js%2Cresult&theme-id=dark","Mobile navigation",{"__typename":162,"id":284,"title":153,"body":285},"123893449","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Finally, we have one other example where the web visitor can play around with the animation themselves. \u003C\u002Fspan>\u003C\u002Fp>",{"__typename":174,"id":287,"mute":147,"loop":147,"autoplay":147,"caption":153,"video":288,"gif":148},"123893450",{"url":289,"title":290,"height":260,"width":180,"provider":181,"providerUid":291,"thumbnailUrl":292},"https:\u002F\u002Fvimeo.com\u002F679775045","Interactive Animation","679775045","https:\u002F\u002Fi.vimeocdn.com\u002Fvideo\u002F1377820036-d154a7d2d727c5de0ff5ea2b833d6af59aaf24c1490374aa6a401ef0be992d0f-d_295x166",{"__typename":185,"id":294,"url":295,"title":296,"caption":153,"previewType":189},"142935034","https:\u002F\u002Fcodepen.io\u002FHornebom\u002Fembed\u002Fpreview\u002FdyOryPM?default-tab=js%2Cresult&theme-id=dark","Voorhoede wave",{"__typename":162,"id":298,"title":153,"body":299},"123893452","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Now that you’ve had a glance of how we use the Web Animations API, try playing around with it yourself. \u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Want to read more about web animations?\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Ca href=\"\u002Fen\u002Fblog\u002Fupgrade-design-with-webgl\u002F\" title=\"Upgrade your design with WebGL\">\u003Cspan style=\"font-weight: 400;\">Upgrade your design with WebGL\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>",[301],{"title":302,"body":153,"links":303,"mailchimpValue":153,"mailchimpName":153,"mailchimpId":153,"formType":309,"contactPerson":310},"Do you have a question about our approach?",[304],{"__typename":305,"id":306,"title":307,"link":308},"InternalLinkRecord","163140965","Get in touch",{"__typename":38},"contact",{"name":311,"lastName":312,"jobTitle":313,"image":314},"Suzanne","Steijn","Project Manager",{"url":315,"alt":148,"width":316,"height":317},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534568-suzanne.jpg",2227,2969,[],[],1776256149644]