[{"data":1,"prerenderedAt":191},["ShallowReactive",2],{"DefaultLayouten":3,"language-blog-slug-best-web-animation-technologies-webgl-and-waapi-i18n-slugs":134,"language-blog-slug-en-best-web-animation-technologies-webgl-and-waapi":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","best-web-animation-technologies-webgl-and-waapi",{"page":139},{"slug":137,"i18nSlugs":140,"social":142,"title":147,"subtitle":79,"isArchived":148,"headerIllustration":149,"date":150,"authors":151,"introTitle":160,"items":161,"pivots":171,"relatedBlogPosts":189,"tags":190,"onMountedScript":154,"onUnmountedScript":154},[141],{"locale":136,"value":137},{"title":143,"description":144,"image":145},"Best Web Animation Technologies: WebGL and WAAPI","There are two great technologies to use for web animation: WebGL and WAAPI. Both can be used for the same purpose. Find out which one fits your needs. ",{"url":146},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1661502816-best-web-animation-technologies.png","Best web animation technologies: WebGL and WAAPI",false,null,"2022-09-20T02:00:00.000+02:00",[152],{"name":153,"lastName":154,"slug":155,"image":156},"Ben","","ben",{"url":157,"alt":149,"width":158,"height":159},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534636-placeholder.jpg",1235,1646,"There are two great technologies to use for web animation: WebGL and Web Animation API (WAAPI). Both can be used for the same purpose, but how do you decide which one fits your needs? Which one is easier and which one has better performance? We’ll compare them for you, so that you can make the right choice for your project. ",[162,167],{"__typename":163,"id":164,"title":165,"body":166},"TextSectionRecord","123893036","A recap: what are WAAPI and WebGL again?","\u003Cp>\u003Cspan style=\"font-weight: 400;\">In order to make a good comparison, let’s first look at the basics. \u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cb style=\"letter-spacing: 0px;\">WAAPI\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> stands for Web Animation API. The relevance of this method comes from the recent launch of WAAPI in all modern browsers. The main benefits of using WAAPI are off the main-thread run, high performance due to no inline styles and the low footprint when loading. \u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cb style=\"letter-spacing: 0px;\">WebGL\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> could be described as a JavaScript API for 2D and 3D vector graphics. This method is based on the OpenGL library. More and more websites use WebGL, for example the Google Maps 3D function and Unity’s VR game engine. \u003C\u002Fspan>\u003C\u002Fp>",{"__typename":163,"id":168,"title":169,"body":170},"123893037","When to choose WAAPI and WebGL?","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Again, let’s start with WAAPI. Down below, we summed up the most important case where we see the advantage of WAAPI:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Chaining and callbacks\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Synchronize multiple animations\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Define the playrate\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Randomized values\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">\u003Cbr \u002F>\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Ca href=\"\u002Fblog\u002Fweb-animation-api-effective-animations-are-finally-here\u002F\">\u003Cspan style=\"font-weight: 400;\">For the full list, check out our blog post on WAAPI \u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>\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;\">So when would you rather go for WebGL instead? Here is a what you can create with WebGL:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">3D design environments\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">3D modeling of space or objects\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Plotting mathematical functions\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Creating physical simulations\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Ca href=\"\u002Fblog\u002Fupgrade-design-with-webgl\u002F\" title=\"Blogpost about WebGL\">\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;\">Also check out our blog post on WebGL\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">When making your choice between WAAPI and WebGL you should take 3 things into account: ease of use, performance and the frequency of use.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch3>Easy to use\u003C\u002Fh3>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Working with WebGL requires more math skills and more understanding of the rendering pipeline than WAAPI. Besides that, production is slower, due to the larger size and complexity of the code. This also means development costs more time. \u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch3>Performance\u003C\u002Fh3>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Despite the lower ease of use of WebGL, you could still opt for this method because of the performance. WebGL is faster and has more capabilities. Why is this? WebGL is a native API providing full access to the rendering pipeline. Using WebGL, codes and effects are executed faster and more tweakable to your needs. \u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch3>Used more frequently\u003C\u002Fh3>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Finally, we compare the frequency of use of the methods. As WebGL is harder and more expensive to set up, it is used less than WAAPI. Despite the higher performance. But in case you want your website to stand out and prepare for the future of web design, we do recommend you get started with WebGL. \u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch3>Pick your favorite\u003C\u002Fh3>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">We hope we provided you with enough information to make a proper comparison between these two animation technologies. Get to know more about WAAPI and WebGL in our previous blog posts:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n  \u003Cli>\u003Ca href=\"https:\u002F\u002Fwww.voorhoede.nl\u002Fen\u002Fblog\u002Fweb-animation-api-effective-animations-are-finally-here\u002F\">\u003Cspan style=\"font-weight: 400;\">Web Animation API: effective animations are finally here\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fli>\n  \u003Cli>\u003Ca href=\"https:\u002F\u002Fwww.voorhoede.nl\u002Fen\u002Fblog\u002Fupgrade-design-with-webgl\u002F\">Upgrade your design with WebGL\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Do you want an assessment on your own needs? Don’t hesitate to contact us via the details down below. \u003C\u002Fspan>\u003C\u002Fp>",[172],{"title":173,"body":154,"links":174,"mailchimpValue":154,"mailchimpName":154,"mailchimpId":154,"formType":180,"contactPerson":181},"Do you have a question about our approach?",[175],{"__typename":176,"id":177,"title":178,"link":179},"InternalLinkRecord","163140965","Get in touch",{"__typename":38},"contact",{"name":182,"lastName":183,"jobTitle":184,"image":185},"Suzanne","Steijn","Project Manager",{"url":186,"alt":149,"width":187,"height":188},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534568-suzanne.jpg",2227,2969,[],[],1776256149635]