[{"data":1,"prerenderedAt":741},["ShallowReactive",2],{"collection-blogs--143892049":3,"_apollo:default":740},{"data":4,"meta":737},[5],{"id":6,"title":7,"excerpt":8,"slug":9,"createdAt":10,"updatedAt":11,"publishedAt":12,"backDate":13,"documentId":14,"imageUrl":15,"expertises":58,"author":18,"blocks":553,"seo":705},64,"Breng je website tot leven met animaties en transities","Onlangs hebben de Front-End Developers van ShareValue een LevelUp-sessie gehouden waarbij ze hebben gekeken naar de mogelijkheden voor animaties (en transities) op het internet. Johan, Competence Lead Front-End development, presenteerde deze avond. Maar wij vonden de inhoud te leuk om niet te delen. Daarom zet Johan het hieronder nog even voor je uiteen.","breng-je-website-tot-leven-met-animaties-en-transities","2023-10-13T10:26:34.673Z","2025-04-17T13:43:02.342Z","2023-10-13T10:26:34.602Z","2020-10-06","ugzjmrccxh76249bse0h199x",{"id":16,"name":17,"alternativeText":18,"caption":18,"width":19,"height":20,"formats":21,"hash":51,"ext":23,"mime":26,"size":52,"url":53,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":55,"updatedAt":55,"documentId":56,"publishedAt":57},313,"breng-je-website-tot-leven-met-animaties-en-transities.jpg",null,1920,750,{"large":22,"small":31,"medium":38,"thumbnail":44},{"ext":23,"url":24,"hash":25,"mime":26,"name":27,"path":18,"size":28,"width":29,"height":30},".jpg","https://incredible-beef-2a6059b946.media.strapiapp.com/large_breng_je_website_tot_leven_met_animaties_en_transities_6f995df208.jpg","large_breng_je_website_tot_leven_met_animaties_en_transities_6f995df208","image/jpg","large_breng-je-website-tot-leven-met-animaties-en-transities.jpg",101.59,1000,391,{"ext":23,"url":32,"hash":33,"mime":26,"name":34,"path":18,"size":35,"width":36,"height":37},"https://incredible-beef-2a6059b946.media.strapiapp.com/small_breng_je_website_tot_leven_met_animaties_en_transities_6f995df208.jpg","small_breng_je_website_tot_leven_met_animaties_en_transities_6f995df208","small_breng-je-website-tot-leven-met-animaties-en-transities.jpg",30.13,500,195,{"ext":23,"url":39,"hash":40,"mime":26,"name":41,"path":18,"size":42,"width":20,"height":43},"https://incredible-beef-2a6059b946.media.strapiapp.com/medium_breng_je_website_tot_leven_met_animaties_en_transities_6f995df208.jpg","medium_breng_je_website_tot_leven_met_animaties_en_transities_6f995df208","medium_breng-je-website-tot-leven-met-animaties-en-transities.jpg",60.43,293,{"ext":23,"url":45,"hash":46,"mime":26,"name":47,"path":18,"size":48,"width":49,"height":50},"https://incredible-beef-2a6059b946.media.strapiapp.com/thumbnail_breng_je_website_tot_leven_met_animaties_en_transities_6f995df208.jpg","thumbnail_breng_je_website_tot_leven_met_animaties_en_transities_6f995df208","thumbnail_breng-je-website-tot-leven-met-animaties-en-transities.jpg",8.76,245,95,"breng_je_website_tot_leven_met_animaties_en_transities_6f995df208",382.4,"https://incredible-beef-2a6059b946.media.strapiapp.com/breng_je_website_tot_leven_met_animaties_en_transities_6f995df208.jpg","strapi-provider-upload-strapi-cloud","2023-10-13T10:23:03.356Z","kt3v3gnci9l9wvy9mbojjfe3","2026-01-05T12:38:34.018Z",[59,294],{"id":60,"title":61,"subTitle":62,"description":63,"shortDescription":64,"slug":65,"createdAt":66,"updatedAt":67,"publishedAt":68,"isCoreExpertise":69,"documentId":70,"image":71,"blocks":90,"midPageBlocks":162,"seo":18},2,"Front-End","Steeds complexer en steeds belangrijker","In een online wereld vol moderne webapplicaties is een goede Front-End onmisbaar. Het is nodig om aan de behoeften en verwachtingen van de gebruikers te voldoen. De interactie voor de gebruiker moet daarbij zo snel en optimaal mogelijk zijn. Met trots kunnen wij zeggen dat juist dáár de kracht van onze Front-End Developers zit.\n\nOnze ervaren Developers staan klaar om jouw team te versterken en te zorgen voor een optimale gebruikerservaring. Of je nu een tijdelijke aanvulling op je team nodig hebt of op zoek bent naar gespecialiseerde kennis voor een specifiek project, onze Front-End Developers zijn uitgerust om de uitdagingen van onze klanten aan te gaan en hun doelen te bereiken.","Onze Front-End developers zijn bedreven in diverse programmeertalen, frameworks en methodieken en daardoor breed inzetbaar.","front-end","2023-08-17T09:50:12.632Z","2024-12-13T12:15:57.609Z","2023-08-17T09:50:14.418Z",false,"l6bdicvjcb7ue03zpciuc888",{"id":72,"name":73,"alternativeText":18,"caption":18,"width":74,"height":75,"formats":76,"hash":85,"ext":78,"mime":81,"size":86,"url":87,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":88,"updatedAt":88,"documentId":89,"publishedAt":57},15,"frontend.png",282,130,{"thumbnail":77},{"ext":78,"url":79,"hash":80,"mime":81,"name":82,"path":18,"size":83,"width":49,"height":84},".png","https://incredible-beef-2a6059b946.media.strapiapp.com/thumbnail_frontend_d8fa4dbfc1.png","thumbnail_frontend_d8fa4dbfc1","image/png","thumbnail_frontend.png",5.3,113,"frontend_d8fa4dbfc1",1.19,"https://incredible-beef-2a6059b946.media.strapiapp.com/frontend_d8fa4dbfc1.png","2023-08-17T09:47:56.273Z","gyo35xg1rnualaf1vog9edz8",[91,139],{"__component":92,"id":93,"title":94,"aside":95,"postType":96,"limit":97,"expertise":98},"strapi.related-kennisbank-list",161,"Lees meer over Front-End Development","Onze blogs","alle",3,[99],{"id":60,"title":61,"subTitle":62,"description":63,"shortDescription":64,"slug":65,"createdAt":66,"updatedAt":67,"publishedAt":68,"isCoreExpertise":69,"documentId":70,"image":100,"blocks":103,"midPageBlocks":114,"seo":18},{"id":72,"name":73,"alternativeText":18,"caption":18,"width":74,"height":75,"formats":101,"hash":85,"ext":78,"mime":81,"size":86,"url":87,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":88,"updatedAt":88,"documentId":89,"publishedAt":57},{"thumbnail":102},{"ext":78,"url":79,"hash":80,"mime":81,"name":82,"path":18,"size":83,"width":49,"height":84},[104,105],{"__component":92,"id":93,"title":94,"aside":95,"postType":96,"limit":97},{"__component":106,"id":107,"titleLeft":108,"callToActionTextLeft":109,"callToActionLinkUrlLeft":110,"titleRight":111,"callToActionTextRight":112,"callToActionLinkUrlRight":113},"call-to-action.double",210,"Heb je een Front-End Developer nodig?","Neem contact met ons op","/contact","Zoek je een nieuwe baan?","Bekijk onze vacatures","/word-onze-collega/vacatures",[115,121,125,129,133],{"__component":116,"id":117,"title":118,"subTitle":18,"content":119,"callToActionText":120,"callToActionLink":110,"colorStyle":18,"showAsides":18},"global.alternating-page-section",20,"Experts in verschillende frameworks","De huidige markt wordt al enige jaren gedomineerd door de drie grote Front-End frameworks: Angular, Vue en React. Voor elk framework hebben wij experts die altijd up-to-date blijven van de laatste ontwikkelingen. Hierdoor kunnen wij aan alle wensen voldoen. Het houdt de interactie binnen het team ook levendig; we sparren vaak en organiseren regelmatig LevelUp-sessies om elkaar op de hoogte te houden.","Neem contact op voor de mogelijkheden",{"__component":116,"id":122,"title":123,"subTitle":18,"content":124,"callToActionText":18,"callToActionLink":18,"colorStyle":18,"showAsides":18},22,"Meer dan HTML, CSS en Javascript","Over het algemeen bestaat een Front-End framework uit HTML, CSS en Javascript, maar als Front-End competence in een multidisciplinaire agile omgeving doen we steeds meer. Of het nu gaat om de integratie van middleware zoals GraphQL of het inrichten van een pipeline voor productie- en staging-omgevingen. Wij weten wat we ermee moeten doen. Onze experts zijn zeer bekwaam en ervaren in de samenwerking met UX-designers. Door het gebruik van design patterns en design tokens zorgen ze voor een naadloze integratie van ontwerp naar ontwikkeling.",{"__component":116,"id":126,"title":127,"subTitle":18,"content":128,"callToActionText":18,"callToActionLink":18,"colorStyle":18,"showAsides":18},21,"Kennis up-to-date","De Front-End Developers krijgen ruim de mogelijkheid om hun kennis up-to-date te houden door trainingen te volgen en evenementen te bezoeken. Maar wat is leerzamer dan de opgedane kennis in de praktijk brengen? Daarvoor hebben we binnen ShareValue een aantal interne projecten lopen zoals de herbouw van onze website met Nuxt met een Strapi CMS, en de ontwikkeling van een eigen CV-generator met Angular. De kennis die onze experts opdoen, delen zij regelmatig in blogs.",{"__component":116,"id":130,"title":131,"subTitle":18,"content":132,"callToActionText":18,"callToActionLink":18,"colorStyle":18,"showAsides":18},23,"Full-Stack Development","Onze Developers zijn niet alleen experts in Front-End technieken, maar ook getraind in .NET en Azure. Dit verbreedt hun vaardigheden en maakt hen volwaardige Full-Stack Developers. Wat natuurlijk niet wegneemt dat wij trots zijn op onze specialistische kennis als Front-End Developers. ",{"__component":134,"id":135,"title":136,"callToActionText":137,"callToActionLinkUrl":138,"body":18},"call-to-action.single",100,"Wil je weten wat onze collega's allemaal kunnen?","Lees de klantcase over ons werk bij Rovict","/klantcases/rovict-vernieuwt-leerlingadministratie-en-leerlingvolgsysteem-esis",{"__component":106,"id":107,"titleLeft":108,"callToActionTextLeft":109,"callToActionLinkUrlLeft":110,"titleRight":111,"callToActionTextRight":112,"callToActionLinkUrlRight":113,"iconUrlLeft":140,"iconUrlRight":153},{"id":141,"name":142,"alternativeText":18,"caption":18,"width":143,"height":144,"formats":18,"hash":145,"ext":146,"mime":147,"size":148,"url":149,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":150,"updatedAt":151,"documentId":152,"publishedAt":57},6,"bulb.svg",71,70,"bulb_dd2e1d4efb",".svg","image/svg+xml",3.75,"https://incredible-beef-2a6059b946.media.strapiapp.com/bulb_dd2e1d4efb.svg","2023-08-17T08:31:37.036Z","2025-04-01T14:08:08.648Z","l2lglwkh4lf7ip36sjvs42rc",{"id":154,"name":155,"alternativeText":18,"caption":18,"width":144,"height":144,"formats":18,"hash":156,"ext":146,"mime":147,"size":157,"url":158,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":159,"updatedAt":160,"documentId":161,"publishedAt":57},8,"briefcase.svg","briefcase_679abae475",4.49,"https://incredible-beef-2a6059b946.media.strapiapp.com/briefcase_679abae475.svg","2023-08-17T08:31:37.038Z","2025-01-24T15:53:51.531Z","bfdftlvwhj35dm37dzv4aujf",[163,201,231,261,292],{"__component":116,"id":117,"title":118,"subTitle":18,"content":119,"callToActionText":120,"callToActionLink":110,"colorStyle":18,"showAsides":18,"imageUrl":164},{"id":165,"name":166,"alternativeText":18,"caption":18,"width":167,"height":168,"formats":169,"hash":196,"ext":23,"mime":173,"size":197,"url":198,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":199,"updatedAt":199,"documentId":200,"publishedAt":57},775,"development.jpg",1280,850,{"large":170,"small":177,"medium":183,"thumbnail":189},{"ext":23,"url":171,"hash":172,"mime":173,"name":174,"path":18,"size":175,"width":29,"height":176},"https://incredible-beef-2a6059b946.media.strapiapp.com/large_development_eb51c16b40.jpg","large_development_eb51c16b40","image/jpeg","large_development.jpg",129.5,664,{"ext":23,"url":178,"hash":179,"mime":173,"name":180,"path":18,"size":181,"width":36,"height":182},"https://incredible-beef-2a6059b946.media.strapiapp.com/small_development_eb51c16b40.jpg","small_development_eb51c16b40","small_development.jpg",47.86,332,{"ext":23,"url":184,"hash":185,"mime":173,"name":186,"path":18,"size":187,"width":20,"height":188},"https://incredible-beef-2a6059b946.media.strapiapp.com/medium_development_eb51c16b40.jpg","medium_development_eb51c16b40","medium_development.jpg",86.06,498,{"ext":23,"url":190,"hash":191,"mime":173,"name":192,"path":18,"size":193,"width":194,"height":195},"https://incredible-beef-2a6059b946.media.strapiapp.com/thumbnail_development_eb51c16b40.jpg","thumbnail_development_eb51c16b40","thumbnail_development.jpg",14.65,235,156,"development_eb51c16b40",184.35,"https://incredible-beef-2a6059b946.media.strapiapp.com/development_eb51c16b40.jpg","2024-08-08T08:20:39.044Z","kpowm3xzp131qb3rneasct1x",{"__component":116,"id":122,"title":123,"subTitle":18,"content":124,"callToActionText":18,"callToActionLink":18,"colorStyle":18,"showAsides":18,"imageUrl":202},{"id":203,"name":204,"alternativeText":18,"caption":18,"width":167,"height":168,"formats":205,"hash":226,"ext":23,"mime":173,"size":227,"url":228,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":229,"updatedAt":229,"documentId":230,"publishedAt":57},776,"ux designer.jpg",{"large":206,"small":211,"medium":216,"thumbnail":221},{"ext":23,"url":207,"hash":208,"mime":173,"name":209,"path":18,"size":210,"width":29,"height":176},"https://incredible-beef-2a6059b946.media.strapiapp.com/large_ux_designer_4d22c4e684.jpg","large_ux_designer_4d22c4e684","large_ux designer.jpg",95.41,{"ext":23,"url":212,"hash":213,"mime":173,"name":214,"path":18,"size":215,"width":36,"height":182},"https://incredible-beef-2a6059b946.media.strapiapp.com/small_ux_designer_4d22c4e684.jpg","small_ux_designer_4d22c4e684","small_ux designer.jpg",30.12,{"ext":23,"url":217,"hash":218,"mime":173,"name":219,"path":18,"size":220,"width":20,"height":188},"https://incredible-beef-2a6059b946.media.strapiapp.com/medium_ux_designer_4d22c4e684.jpg","medium_ux_designer_4d22c4e684","medium_ux designer.jpg",59.67,{"ext":23,"url":222,"hash":223,"mime":173,"name":224,"path":18,"size":225,"width":194,"height":195},"https://incredible-beef-2a6059b946.media.strapiapp.com/thumbnail_ux_designer_4d22c4e684.jpg","thumbnail_ux_designer_4d22c4e684","thumbnail_ux designer.jpg",8.79,"ux_designer_4d22c4e684",140.45,"https://incredible-beef-2a6059b946.media.strapiapp.com/ux_designer_4d22c4e684.jpg","2024-08-08T08:22:53.444Z","lzicd49svwe2coyrmyxkolub",{"__component":116,"id":126,"title":127,"subTitle":18,"content":128,"callToActionText":18,"callToActionLink":18,"colorStyle":18,"showAsides":18,"imageUrl":232},{"id":233,"name":234,"alternativeText":18,"caption":18,"width":167,"height":168,"formats":235,"hash":256,"ext":23,"mime":173,"size":257,"url":258,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":259,"updatedAt":259,"documentId":260,"publishedAt":57},777,"kennis opdoen.jpg",{"large":236,"small":241,"medium":246,"thumbnail":251},{"ext":23,"url":237,"hash":238,"mime":173,"name":239,"path":18,"size":240,"width":29,"height":176},"https://incredible-beef-2a6059b946.media.strapiapp.com/large_kennis_opdoen_7e45a846f8.jpg","large_kennis_opdoen_7e45a846f8","large_kennis opdoen.jpg",147.32,{"ext":23,"url":242,"hash":243,"mime":173,"name":244,"path":18,"size":245,"width":36,"height":182},"https://incredible-beef-2a6059b946.media.strapiapp.com/small_kennis_opdoen_7e45a846f8.jpg","small_kennis_opdoen_7e45a846f8","small_kennis opdoen.jpg",43.85,{"ext":23,"url":247,"hash":248,"mime":173,"name":249,"path":18,"size":250,"width":20,"height":188},"https://incredible-beef-2a6059b946.media.strapiapp.com/medium_kennis_opdoen_7e45a846f8.jpg","medium_kennis_opdoen_7e45a846f8","medium_kennis opdoen.jpg",90.65,{"ext":23,"url":252,"hash":253,"mime":173,"name":254,"path":18,"size":255,"width":194,"height":195},"https://incredible-beef-2a6059b946.media.strapiapp.com/thumbnail_kennis_opdoen_7e45a846f8.jpg","thumbnail_kennis_opdoen_7e45a846f8","thumbnail_kennis opdoen.jpg",10.87,"kennis_opdoen_7e45a846f8",220.32,"https://incredible-beef-2a6059b946.media.strapiapp.com/kennis_opdoen_7e45a846f8.jpg","2024-08-08T08:25:10.656Z","q2bqhg65mnalhkgalkt2o2sq",{"__component":116,"id":130,"title":131,"subTitle":18,"content":132,"callToActionText":18,"callToActionLink":18,"colorStyle":18,"showAsides":18,"imageUrl":262},{"id":263,"name":264,"alternativeText":18,"caption":18,"width":167,"height":168,"formats":265,"hash":286,"ext":23,"mime":173,"size":287,"url":288,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":289,"updatedAt":290,"documentId":291,"publishedAt":57},778,"stack.jpg",{"large":266,"small":271,"medium":276,"thumbnail":281},{"ext":23,"url":267,"hash":268,"mime":173,"name":269,"path":18,"size":270,"width":29,"height":176},"https://incredible-beef-2a6059b946.media.strapiapp.com/large_stack_fec3a2bfae.jpg","large_stack_fec3a2bfae","large_stack.jpg",95.19,{"ext":23,"url":272,"hash":273,"mime":173,"name":274,"path":18,"size":275,"width":36,"height":182},"https://incredible-beef-2a6059b946.media.strapiapp.com/small_stack_fec3a2bfae.jpg","small_stack_fec3a2bfae","small_stack.jpg",29.21,{"ext":23,"url":277,"hash":278,"mime":173,"name":279,"path":18,"size":280,"width":20,"height":188},"https://incredible-beef-2a6059b946.media.strapiapp.com/medium_stack_fec3a2bfae.jpg","medium_stack_fec3a2bfae","medium_stack.jpg",58.57,{"ext":23,"url":282,"hash":283,"mime":173,"name":284,"path":18,"size":285,"width":194,"height":195},"https://incredible-beef-2a6059b946.media.strapiapp.com/thumbnail_stack_fec3a2bfae.jpg","thumbnail_stack_fec3a2bfae","thumbnail_stack.jpg",8.24,"stack_fec3a2bfae",143.32,"https://incredible-beef-2a6059b946.media.strapiapp.com/stack_fec3a2bfae.jpg","2024-08-08T08:26:50.506Z","2024-12-09T10:18:46.269Z","kpz9iiz9dr551k3umhmtwy3k",{"__component":134,"id":135,"title":136,"callToActionText":137,"callToActionLinkUrl":138,"body":18,"imageUrl":293},{"id":141,"name":142,"alternativeText":18,"caption":18,"width":143,"height":144,"formats":18,"hash":145,"ext":146,"mime":147,"size":148,"url":149,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":150,"updatedAt":151,"documentId":152,"publishedAt":57},{"id":295,"title":296,"subTitle":297,"description":298,"shortDescription":299,"slug":300,"createdAt":301,"updatedAt":302,"publishedAt":303,"isCoreExpertise":304,"documentId":305,"image":306,"blocks":320,"midPageBlocks":458,"seo":548},10,"Development","Maatwerkoplossingen voor ieder vraagstuk","Ons Development-team biedt oplossingen die de verwachtingen van onze opdrachtgevers overtreffen. Wij zijn experts op het gebied van alle aspecten van Development, wat ons in staat stelt om veelzijdige en schaalbare oplossingen te creëren. Van gebruiksvriendelijke interfaces tot krachtige Back-End-architecturen: wij hebben de kennis en ervaring om jouw project tot een succes te maken.","Ons Development-team biedt oplossingen die de verwachtingen van onze opdrachtgevers overtreffen. Wij zijn experts op het gebied van alle aspecten van Development, wat ons in staat stelt om veelzijdige en schaalbare oplossingen te creëren. ","development","2024-12-13T12:15:40.484Z","2025-04-11T13:13:55.384Z","2024-12-13T12:15:42.976Z",true,"lpzfadokpxn5sdnx9czcdg47",{"id":307,"name":308,"alternativeText":18,"caption":18,"width":74,"height":75,"formats":309,"hash":315,"ext":78,"mime":81,"size":60,"url":316,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":317,"updatedAt":318,"documentId":319,"publishedAt":57},950,"Logo Development 2025 web.png",{"thumbnail":310},{"ext":78,"url":311,"hash":312,"mime":81,"name":313,"path":18,"size":314,"width":49,"height":84},"https://incredible-beef-2a6059b946.media.strapiapp.com/thumbnail_Logo_Development_2025_web_d7711df072.png","thumbnail_Logo_Development_2025_web_d7711df072","thumbnail_Logo Development 2025 web.png",8.58,"Logo_Development_2025_web_d7711df072","https://incredible-beef-2a6059b946.media.strapiapp.com/Logo_Development_2025_web_d7711df072.png","2024-12-17T15:02:47.479Z","2024-12-19T08:35:22.054Z","okwfs117fps338v5fj5dnrpb",[321,437],{"__component":92,"id":322,"title":323,"aside":18,"postType":96,"limit":97,"expertise":324},179,"Lees meer over Development",[325,375,388],{"id":295,"title":296,"subTitle":297,"description":298,"shortDescription":299,"slug":300,"createdAt":301,"updatedAt":302,"publishedAt":303,"isCoreExpertise":304,"documentId":305,"image":326,"blocks":329,"midPageBlocks":334,"seo":358},{"id":307,"name":308,"alternativeText":18,"caption":18,"width":74,"height":75,"formats":327,"hash":315,"ext":78,"mime":81,"size":60,"url":316,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":317,"updatedAt":318,"documentId":319,"publishedAt":57},{"thumbnail":328},{"ext":78,"url":311,"hash":312,"mime":81,"name":313,"path":18,"size":314,"width":49,"height":84},[330,331],{"__component":92,"id":322,"title":323,"aside":18,"postType":96,"limit":97},{"__component":106,"id":332,"titleLeft":333,"callToActionTextLeft":109,"callToActionLinkUrlLeft":110,"titleRight":111,"callToActionTextRight":112,"callToActionLinkUrlRight":113},251,"Heb je een Developer nodig?",[335,340,345,349,354],{"__component":116,"id":336,"title":337,"subTitle":18,"content":338,"callToActionText":18,"callToActionLink":18,"colorStyle":339,"showAsides":69},47,"Optimale gebruikerservaring","Een goede Front-End is meer dan alleen een aantrekkelijke interface; het vormt de schakel tussen technologie en eindgebruiker. Onze Developers combineren hun kennis van frameworks zoals React, Angular en Vue met ervaring in geavanceerde technologieën zoals GraphQL en CI/CD pipelines. Dit stelt ons in staat om interactieve, intuïtieve en betrouwbare applicaties te ontwikkelen die voldoen aan de hoogste standaarden.\n\nWij werken nauw samen met UX-designers om via design patterns en design tokens een naadloze integratie van ontwerp naar functionaliteit te realiseren. Dankzij regelmatige LevelUp-sessies, interne projecten en kennisdeling blijven onze Front-End specialisten altijd up-to-date.","Sugar Glaze",{"__component":116,"id":341,"title":342,"subTitle":18,"content":343,"callToActionText":18,"callToActionLink":18,"colorStyle":344,"showAsides":69},49,"Betrouwbaarheid en schaalbaarheid","Voor robuuste Back-End-oplossingen vertrouwen we op onze kennis van .NET. Of het nu gaat om het bouwen van nieuwe applicaties, het onderhouden van bestaande software of het implementeren van geavanceerde authenticatie- en autorisatiesystemen: ons team levert maatwerk dat aansluit bij de specifieke wensen en behoeften van jouw organisatie.\n\nHierbij maken we onder andere gebruik van onze kennis van Azure-services zoals Function Apps, Service Bus en App Services, maar ook tools als Docker en Kubernetes om veilige, schaalbare oplossingen te realiseren.\n\nOnze focus op grondige tests – van unit tests tot integratietests – garandeert stabiliteit en betrouwbaarheid.","White",{"__component":116,"id":346,"title":347,"subTitle":18,"content":348,"callToActionText":18,"callToActionLink":18,"colorStyle":339,"showAsides":69},50,"Full-Stack mogelijkheden","Wat ons uniek maakt, is onze combinatie van Front-End en .NET-expertise. Onze Developers zijn niet alleen gespecialiseerd in het creëren van intuïtieve interfaces, maar beheersen ook de complexiteit van Back-End-architectuur en Azure-integraties. Dit maakt hen volwaardige Full-Stack Developers die moeiteloos schakelen tussen de verschillende onderdelen van jouw project.",{"__component":116,"id":350,"title":351,"subTitle":18,"content":352,"callToActionText":353,"callToActionLink":110,"colorStyle":344,"showAsides":69},48,"Samen naar succes","Onze aanpak is erop gericht om samen met jou het optimale resultaat te behalen. Door proactief mee te denken en onze kennis te delen, zorgen we ervoor dat jouw project voldoet aan de hoogste standaarden van gebruiksvriendelijkheid, betrouwbaarheid en veiligheid. Of het nu gaat om een tijdelijke versterking van je team of volledige projectondersteuning: ons Development-team staat voor je klaar.\n\nOntdek wat wij voor jouw project kunnen betekenen."," Neem contact met ons op voor meer informatie!",{"__component":134,"id":355,"title":356,"callToActionText":137,"callToActionLinkUrl":357,"body":18},103,"Wil je weten wat onze collega’s allemaal kunnen?","https://www.sharevalue.nl/klantcases/rovict-vernieuwt-leerlingadministratie-en-leerlingvolgsysteem-esis",{"id":359,"metaTitle":360,"metaDescription":361,"structuredData":362},27,"Maatwerk software & integraties – ShareValue Development","Van webapps tot koppelingen: onze developers bouwen slimme oplossingen die passen bij jouw Microsoft-omgeving.",{"url":363,"@type":364,"@context":365,"provider":366,"areaServed":370,"description":373,"serviceType":374},"https://www.sharevalue.nl/wat-we-doen/development","Service","https://schema.org",{"url":367,"name":368,"@type":369},"https://www.sharevalue.nl","ShareValue","Organization",{"name":371,"@type":372},"Nederland","Country","Onze developers realiseren maatwerkoplossingen binnen Microsoft-omgevingen. Denk aan webapplicaties, API-integraties, extensies voor Microsoft 365 en koppelingen met externe systemen. Technisch sterk én begrijpelijk ingericht.","Maatwerk softwareontwikkeling en integraties",{"id":60,"title":61,"subTitle":62,"description":63,"shortDescription":64,"slug":65,"createdAt":66,"updatedAt":67,"publishedAt":68,"isCoreExpertise":69,"documentId":70,"image":376,"blocks":379,"midPageBlocks":382,"seo":18},{"id":72,"name":73,"alternativeText":18,"caption":18,"width":74,"height":75,"formats":377,"hash":85,"ext":78,"mime":81,"size":86,"url":87,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":88,"updatedAt":88,"documentId":89,"publishedAt":57},{"thumbnail":378},{"ext":78,"url":79,"hash":80,"mime":81,"name":82,"path":18,"size":83,"width":49,"height":84},[380,381],{"__component":92,"id":93,"title":94,"aside":95,"postType":96,"limit":97},{"__component":106,"id":107,"titleLeft":108,"callToActionTextLeft":109,"callToActionLinkUrlLeft":110,"titleRight":111,"callToActionTextRight":112,"callToActionLinkUrlRight":113},[383,384,385,386,387],{"__component":116,"id":117,"title":118,"subTitle":18,"content":119,"callToActionText":120,"callToActionLink":110,"colorStyle":18,"showAsides":18},{"__component":116,"id":122,"title":123,"subTitle":18,"content":124,"callToActionText":18,"callToActionLink":18,"colorStyle":18,"showAsides":18},{"__component":116,"id":126,"title":127,"subTitle":18,"content":128,"callToActionText":18,"callToActionLink":18,"colorStyle":18,"showAsides":18},{"__component":116,"id":130,"title":131,"subTitle":18,"content":132,"callToActionText":18,"callToActionLink":18,"colorStyle":18,"showAsides":18},{"__component":134,"id":135,"title":136,"callToActionText":137,"callToActionLinkUrl":138,"body":18},{"id":97,"title":389,"subTitle":297,"description":390,"shortDescription":391,"slug":392,"createdAt":393,"updatedAt":394,"publishedAt":395,"isCoreExpertise":69,"documentId":396,"image":397,"blocks":411,"midPageBlocks":419,"seo":18},"Microsoft .NET","Ons team van .NET-experts staat niet alleen klaar om onze klanten te ondersteunen bij diverse implementatie uitdagingen, maar we zijn ook gespecialiseerd in het testen van applicaties op verschillende niveaus, zoals unit tests, integratietests en acceptatietests. We streven naar uitmuntende testdekking om de stabiliteit en betrouwbaarheid van de applicaties te waarborgen.\n\nDaarnaast zijn we bedreven in het gebruik van verschillende Azure-services om schaalbare en veilige oplossingen te bieden aan onze klanten. Zo bieden we met Azure DevOps krachtige tools voor het beheren van de ontwikkeling, het automatiseren van tests en het geautomatiseerd uitrollen naar acceptatie- of productieomgevingen met CI/CD-pipelines.\n\nHet samenwerken met onze klanten staat centraal in ons werk, en we denken proactief mee om samen de meest optimale oplossingen te realiseren.","In de praktijk komen de .NET developers van ShareValue terecht in allerlei verschillende branches met uiteenlopende technische uitdagingen.","dotnet","2023-08-17T11:19:57.991Z","2024-12-13T12:16:04.480Z","2023-08-17T11:22:08.050Z","v9pl553hsjk98esvs5gzoso3",{"id":398,"name":399,"alternativeText":18,"caption":18,"width":74,"height":75,"formats":400,"hash":406,"ext":78,"mime":81,"size":407,"url":408,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":409,"updatedAt":409,"documentId":410,"publishedAt":57},17,"dotnet_logo.png",{"thumbnail":401},{"ext":78,"url":402,"hash":403,"mime":81,"name":404,"path":18,"size":405,"width":49,"height":84},"https://incredible-beef-2a6059b946.media.strapiapp.com/thumbnail_dotnet_logo_d38dbc3865.png","thumbnail_dotnet_logo_d38dbc3865","thumbnail_dotnet_logo.png",7.14,"dotnet_logo_d38dbc3865",2.93,"https://incredible-beef-2a6059b946.media.strapiapp.com/dotnet_logo_d38dbc3865.png","2023-08-17T09:47:56.313Z","nnimzsossci29qmi8z0texlp",[412,415],{"__component":92,"id":413,"title":414,"aside":18,"postType":96,"limit":97},167," Lees meer over .NET Development",{"__component":106,"id":416,"titleLeft":417,"callToActionTextLeft":109,"callToActionLinkUrlLeft":110,"titleRight":418,"callToActionTextRight":109,"callToActionLinkUrlRight":110},212,"Heb je een .NET expert nodig?","Weten welke expert op dit moment beschikbaar is?",[420,425,429,433],{"__component":116,"id":421,"title":422,"subTitle":18,"content":423,"callToActionText":424,"callToActionLink":110,"colorStyle":18,"showAsides":18},36,"Bouwen en testen","Onze .NET-experts kunnen uiteraard goede en betrouwbare applicaties ontwikkelen met de laatste .NET-versies. Ook zijn onze collega’s ervaren in het onderhouden van oudere software. We kunnen je helpen met het upgraden en uitbreiden van je applicatie zodat deze aan de laatste wensen en eisen voldoet. Het uitvoeren van uitgebreide unit- en integratietests om de stabiliteit van applicaties te waarborgen, wordt meegenomen als standaard onderdeel van het werk. Met een focus op grondige testdekking streven we ernaar om eventuele bugs vroegtijdig op te sporen en op te lossen, waardoor de algehele kwaliteit van jouw product wordt verbeterd.  \n\nVan Blazor Front-End of REST API’s tot database communicatie, onze .NET-experts hebben er ruime ervaring mee.","Weten wat onze experts voor jou kunnen doen?",{"__component":116,"id":426,"title":427,"subTitle":18,"content":428,"callToActionText":18,"callToActionLink":18,"colorStyle":18,"showAsides":18},37,"Combineren met Azure","Wil je profiteren van Azure-services voor jouw project? Ons team van experts kan je helpen met het selecteren en opzetten van de juiste services. Of je gebruik wil maken van App services, Function Apps, storage of database oplossingen of bijvoorbeeld een Service Bus, onze experts kunnen je helpen bij het kiezen en het realiseren van stabiele, schaalbare en veilige oplossingen die voldoen aan jouw specifieke behoeften.",{"__component":116,"id":430,"title":431,"subTitle":18,"content":432,"callToActionText":18,"callToActionLink":18,"colorStyle":18,"showAsides":18},35,"Houd het veilig!","Om de toegang tot je producten veilig te houden, kan ons team van .NET-experts je helpen bij het opzetten en onderhouden van authenticatie en autorisatie. Onze experts zijn ervaren in het opzetten de juiste entra diensten zodat de toegang tot zowel Front-End als Back-End of deamon-processen op een juiste manier afgehandeld wordt. Ook kunnen we je helpen met het opzetten van verschillende groepen, rechten en rollen, en deze op de juiste manier toepassen binnen de applicatie zodat onterechte toegang op functieniveau geregeld kan worden. Bij het opzetten en implementeren wordt er rekening gehouden met het reduceren van de administratieve overhead zonder concessies te doen aan de beveiliging.",{"__component":134,"id":434,"title":136,"callToActionText":435,"callToActionLinkUrl":436,"body":18},46,"Lees de klantcase over ons werk bij KPN","/klantcases/de-continue-bereikbaarheid-van-een-alarmcentrale",{"__component":106,"id":332,"titleLeft":333,"callToActionTextLeft":109,"callToActionLinkUrlLeft":110,"titleRight":111,"callToActionTextRight":112,"callToActionLinkUrlRight":113,"iconUrlLeft":438,"iconUrlRight":449},{"id":439,"name":440,"alternativeText":18,"caption":18,"width":441,"height":442,"formats":18,"hash":443,"ext":146,"mime":147,"size":444,"url":445,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":446,"updatedAt":447,"documentId":448,"publishedAt":57},7,"people.svg",83,60,"people_6bb632d0d7",1.47,"https://incredible-beef-2a6059b946.media.strapiapp.com/people_6bb632d0d7.svg","2023-08-17T08:31:37.039Z","2024-09-13T08:11:42.408Z","iyvqylwtkx5qokq2hk77ppgf",{"id":450,"name":451,"alternativeText":18,"caption":18,"width":341,"height":442,"formats":18,"hash":452,"ext":146,"mime":147,"size":453,"url":454,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":455,"updatedAt":456,"documentId":457,"publishedAt":57},372,"magnifier.svg","magnifier_d084afba36",1.05,"https://incredible-beef-2a6059b946.media.strapiapp.com/magnifier_d084afba36.svg","2023-11-03T11:13:25.446Z","2026-05-12T12:19:53.518Z","e7czsfz9jg7oi93q44vomebz",[459,479,509,516,546],{"__component":116,"id":336,"title":337,"subTitle":18,"content":338,"callToActionText":18,"callToActionLink":18,"colorStyle":339,"showAsides":69,"imageUrl":460},{"id":461,"name":166,"alternativeText":18,"caption":18,"width":167,"height":168,"formats":462,"hash":475,"ext":23,"mime":173,"size":197,"url":476,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":477,"updatedAt":477,"documentId":478,"publishedAt":57},904,{"large":463,"small":466,"medium":469,"thumbnail":472},{"ext":23,"url":464,"hash":465,"mime":173,"name":174,"path":18,"size":175,"width":29,"height":176},"https://incredible-beef-2a6059b946.media.strapiapp.com/large_development_6e5abdca44.jpg","large_development_6e5abdca44",{"ext":23,"url":467,"hash":468,"mime":173,"name":180,"path":18,"size":181,"width":36,"height":182},"https://incredible-beef-2a6059b946.media.strapiapp.com/small_development_6e5abdca44.jpg","small_development_6e5abdca44",{"ext":23,"url":470,"hash":471,"mime":173,"name":186,"path":18,"size":187,"width":20,"height":188},"https://incredible-beef-2a6059b946.media.strapiapp.com/medium_development_6e5abdca44.jpg","medium_development_6e5abdca44",{"ext":23,"url":473,"hash":474,"mime":173,"name":192,"path":18,"size":193,"width":194,"height":195},"https://incredible-beef-2a6059b946.media.strapiapp.com/thumbnail_development_6e5abdca44.jpg","thumbnail_development_6e5abdca44","development_6e5abdca44","https://incredible-beef-2a6059b946.media.strapiapp.com/development_6e5abdca44.jpg","2024-12-13T12:36:11.969Z","qqi9wubjpzs8w6daj98mtc7a",{"__component":116,"id":341,"title":342,"subTitle":18,"content":343,"callToActionText":18,"callToActionLink":18,"colorStyle":344,"showAsides":69,"imageUrl":480},{"id":481,"name":482,"alternativeText":18,"caption":18,"width":167,"height":168,"formats":483,"hash":504,"ext":23,"mime":173,"size":505,"url":506,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":507,"updatedAt":507,"documentId":508,"publishedAt":57},791,"service bus.jpg",{"large":484,"small":489,"medium":494,"thumbnail":499},{"ext":23,"url":485,"hash":486,"mime":173,"name":487,"path":18,"size":488,"width":29,"height":176},"https://incredible-beef-2a6059b946.media.strapiapp.com/large_service_bus_2b48e3a7cc.jpg","large_service_bus_2b48e3a7cc","large_service bus.jpg",82.82,{"ext":23,"url":490,"hash":491,"mime":173,"name":492,"path":18,"size":493,"width":36,"height":182},"https://incredible-beef-2a6059b946.media.strapiapp.com/small_service_bus_2b48e3a7cc.jpg","small_service_bus_2b48e3a7cc","small_service bus.jpg",29.35,{"ext":23,"url":495,"hash":496,"mime":173,"name":497,"path":18,"size":498,"width":20,"height":188},"https://incredible-beef-2a6059b946.media.strapiapp.com/medium_service_bus_2b48e3a7cc.jpg","medium_service_bus_2b48e3a7cc","medium_service bus.jpg",54.72,{"ext":23,"url":500,"hash":501,"mime":173,"name":502,"path":18,"size":503,"width":194,"height":195},"https://incredible-beef-2a6059b946.media.strapiapp.com/thumbnail_service_bus_2b48e3a7cc.jpg","thumbnail_service_bus_2b48e3a7cc","thumbnail_service bus.jpg",8.71,"service_bus_2b48e3a7cc",117.51,"https://incredible-beef-2a6059b946.media.strapiapp.com/service_bus_2b48e3a7cc.jpg","2024-08-09T08:35:35.231Z","rbpawsulv6vrsistrk2yupwg",{"__component":116,"id":346,"title":347,"subTitle":18,"content":348,"callToActionText":18,"callToActionLink":18,"colorStyle":339,"showAsides":69,"imageUrl":510},{"id":263,"name":264,"alternativeText":18,"caption":18,"width":167,"height":168,"formats":511,"hash":286,"ext":23,"mime":173,"size":287,"url":288,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":289,"updatedAt":290,"documentId":291,"publishedAt":57},{"large":512,"small":513,"medium":514,"thumbnail":515},{"ext":23,"url":267,"hash":268,"mime":173,"name":269,"path":18,"size":270,"width":29,"height":176},{"ext":23,"url":272,"hash":273,"mime":173,"name":274,"path":18,"size":275,"width":36,"height":182},{"ext":23,"url":277,"hash":278,"mime":173,"name":279,"path":18,"size":280,"width":20,"height":188},{"ext":23,"url":282,"hash":283,"mime":173,"name":284,"path":18,"size":285,"width":194,"height":195},{"__component":116,"id":350,"title":351,"subTitle":18,"content":352,"callToActionText":353,"callToActionLink":110,"colorStyle":344,"showAsides":69,"imageUrl":517},{"id":518,"name":519,"alternativeText":18,"caption":18,"width":167,"height":168,"formats":520,"hash":541,"ext":23,"mime":173,"size":542,"url":543,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":544,"updatedAt":544,"documentId":545,"publishedAt":57},789,"teamwork.jpg",{"large":521,"small":526,"medium":531,"thumbnail":536},{"ext":23,"url":522,"hash":523,"mime":173,"name":524,"path":18,"size":525,"width":29,"height":176},"https://incredible-beef-2a6059b946.media.strapiapp.com/large_teamwork_8f4a7b0c14.jpg","large_teamwork_8f4a7b0c14","large_teamwork.jpg",80.4,{"ext":23,"url":527,"hash":528,"mime":173,"name":529,"path":18,"size":530,"width":36,"height":182},"https://incredible-beef-2a6059b946.media.strapiapp.com/small_teamwork_8f4a7b0c14.jpg","small_teamwork_8f4a7b0c14","small_teamwork.jpg",27.14,{"ext":23,"url":532,"hash":533,"mime":173,"name":534,"path":18,"size":535,"width":20,"height":188},"https://incredible-beef-2a6059b946.media.strapiapp.com/medium_teamwork_8f4a7b0c14.jpg","medium_teamwork_8f4a7b0c14","medium_teamwork.jpg",51.59,{"ext":23,"url":537,"hash":538,"mime":173,"name":539,"path":18,"size":540,"width":194,"height":195},"https://incredible-beef-2a6059b946.media.strapiapp.com/thumbnail_teamwork_8f4a7b0c14.jpg","thumbnail_teamwork_8f4a7b0c14","thumbnail_teamwork.jpg",8.11,"teamwork_8f4a7b0c14",116.53,"https://incredible-beef-2a6059b946.media.strapiapp.com/teamwork_8f4a7b0c14.jpg","2024-08-08T10:07:23.468Z","uo85gvimf7llsbaoahqw08m3",{"__component":134,"id":355,"title":356,"callToActionText":137,"callToActionLinkUrl":357,"body":18,"imageUrl":547},{"id":141,"name":142,"alternativeText":18,"caption":18,"width":143,"height":144,"formats":18,"hash":145,"ext":146,"mime":147,"size":148,"url":149,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":150,"updatedAt":151,"documentId":152,"publishedAt":57},{"id":359,"metaTitle":360,"metaDescription":361,"structuredData":549,"metaImage":18,"metaSocial":552},{"url":363,"@type":364,"@context":365,"provider":550,"areaServed":551,"description":373,"serviceType":374},{"url":367,"name":368,"@type":369},{"name":371,"@type":372},[],[554,559,562,565,568,571,575,578,582,585,589,592,595,598,601,603,606,700],{"__component":555,"id":556,"title":18,"asideText":557,"underline":69,"centered":69,"blankAside":69,"aside":18,"content":558,"introductionText":18},"global.pagesection",923,"","## Inleiding\n\nIedereen kent PowerPoint. En iedereen kent ook het verschil tussen een presentatie die soepel loopt en waarbij animatie wordt gebruikt om de inhoud te benadrukken. Daarnaast kent bijna iedereen ook het “death-by-powerpoint”-principe, waarbij de aanwezigen alleen maar worden overladen met teksten, afbeeldingen en animaties die meer afleiden dan dat ze helpen een boodschap over te brengen.\n\nWaarom noem ik deze twee voorbeelden? Animatie kan zowel meewerken als tegenwerken!",{"__component":555,"id":560,"title":18,"asideText":557,"underline":69,"centered":69,"blankAside":69,"aside":18,"content":561,"introductionText":18},924,"![](https://www.sharevalue.nl/images/sharevalue/blogs/great_power.png)",{"__component":555,"id":563,"title":18,"asideText":557,"underline":69,"centered":69,"blankAside":69,"aside":18,"content":564,"introductionText":18},925,"## Animaties en transities\n\nMaar waar hebben we het nu precies over? Ik zal het uiteen zetten:\n\n*   **Animatie**: een verandering van bijvoorbeeld kleuren, positie, of vorm die van tevoren is gedefinieerd\n*   **Transitie**: de geleidelijke overgang tussen 2 verschillende visuele stijlen (bijvoorbeeld een button waar de muiscursor overheen beweegt)",{"__component":555,"id":566,"title":18,"asideText":557,"underline":69,"centered":69,"blankAside":69,"aside":18,"content":567,"introductionText":18},926,"## Hoe maak je eigenlijk animaties en transities?\n\nEr zijn verschillende manieren om ze te maken. Hier bespreek ik de 2 belangrijkste manieren.",{"__component":555,"id":569,"title":18,"asideText":557,"underline":69,"centered":69,"blankAside":69,"aside":18,"content":570,"introductionText":18},927,"## Via CSS\n\nCSS biedt veel mogelijkheden voor het maken van animaties en transities. De meest simpele is een transitie. Zoals gezegd maak je hier een overgang mee tussen 2 visuele stijlen.\n\n```CSS\n/* property name | duration | timing function | delay */  \ntransition: all 1s linear 0,5s;\n```\n\nStel je een button voor die oranje is, maar als je er met de muis overheen gaat wordt deze wit, en de tekst oranje. Deze stijlen maak je in CSS door een button selector te gebruiken, en een button: hover. Zonder een transitie is de overgang direct; zodra de muis boven de button komt verandert deze meteen van kleur. Maar als je bovenstaande code toevoegt aan de button:hover, dan zal de kleur pas gaan veranderen na 0,5 seconde delay, en er vervolgens 1 seconde over doen om zich aan te passen.",{"__component":555,"id":572,"title":18,"asideText":573,"underline":69,"centered":69,"blankAside":69,"aside":18,"content":574,"introductionText":18},928,"​Hover Transitie","![](https://www.sharevalue.nl/images/sharevalue/blogs/hover-transition.gif)",{"__component":555,"id":576,"title":18,"asideText":557,"underline":69,"centered":69,"blankAside":69,"aside":18,"content":577,"introductionText":18},929,"Animaties werken net iets anders: hierbij definieer je eerst de animatie zoals je die wilt maken met een zogenaamde keyframe animatie die je maakt met @keyframes object. Hier geef je aan welke je eigenschappen je wilt aanpassen van het begin tot het einde.\n\n```CSS\n@keyframes move {  \n  from {  \n    transform: translate3d(0, 0, 0);  \n  } to {  \n    transform: translate3d(90vw, 0, 0);  \n  }\n}\n```\n\n\nIn dit @keyframes object met de naam “move” verplaatsen we een element van 0 naar 90% van de viewport-width. Vervolgens kunnen we in de styling opgegeven dat de animatie moet worden toegepast op het element:  \n\n\n```CSS\nanimation: move 3000ms 200ms ease-out alternate infinite;\n```\n\nHier geven we op dat de bal een animatie krijgt met de naam: “move”, en dat de animatie 3 seconden duurt, en start na een delay van 200 milliseconden. “alternate” geeft aan dat de animatie heen en weer gaat, en infinite dat de animatie oneindig loopt.",{"__component":555,"id":579,"title":18,"asideText":580,"underline":69,"centered":69,"blankAside":69,"aside":18,"content":581,"introductionText":18},930,"Keyframe","![](https://www.sharevalue.nl/images/sharevalue/blogs/keyframe-animation.gif)\n\n​",{"__component":555,"id":583,"title":18,"asideText":557,"underline":69,"centered":69,"blankAside":69,"aside":18,"content":584,"introductionText":18},931,"## Of via JavaScript\n\nNaast CSS is het ook mogelijk om animaties te maken via JavaScript. Dit doe je door een element te selecteren en vervolgens gebruik te maken van de Web Animations API. Dat laatste doe je door .animate() uit te voeren op dat element.\n\n```javascript\nlet ball = document.querySelector(\".ball\");\nball.animate(\n  [\n    { transform: \"translate(0, 0)\", offset: 0 },\n    { transform: \"translate(90vw, 0)\", offset: 1 },\n  ],\n  {\n    duration: 2000,\n    direction: \"alternate\",\n    iterations: Infinity,\n  }\n);\n\n```\n\nHier selecteren we een element met een class. ball en animeren we deze horizontaal van de plaats op het scherm waar hij is, tot 90% van de viewport-width. de animatie duurt 2 seconden, en de afspeelrichting is heen en terug (“alternate”) en het aantal herhalingen staat op Infinity.",{"__component":555,"id":586,"title":18,"asideText":587,"underline":69,"centered":69,"blankAside":69,"aside":18,"content":588,"introductionText":18},932,"JavaScript animatie","![](https://www.sharevalue.nl/images/sharevalue/blogs/js-animation.gif)\n\n​",{"__component":555,"id":590,"title":18,"asideText":557,"underline":69,"centered":69,"blankAside":69,"aside":18,"content":591,"introductionText":18},933,"## Maar wanneer kies je voor CSS, en wanneer voor JavaScript?\n\nHieronder zet ik de voor en de nadelen uiteen:\n\n*   **Makkelijk bruikbaar (implementatie, syntax)**  \n    CSS: Ja  \n    JavaScript: Ja  \n    Zoals te zien is in de twee voorbeelden, is de syntax eenvoudig. Beide methodes zijn makkelijk te implementeren in een bestaande pagina.\n*   **Ondersteunt transitions en animaties**  \n    CSS: Ja  \n    JavaScript: Nee  \n    JavaScript kent geen transitions, CSS wel. Uiteraard kun je een animatie maken om een overgang te creëren tussen twee visuele stijlen\n*   **Gunstig voor Memory en CPU**  \n    CSS: Ja  \n    CSS-animaties zijn over het algemeen minder belastend voor de browser en het systeem waar deze op draait. Bij JavaScript gaan de applicaties over de main thread. Dit houdt in dat een animatie wordt geladen over dezelfde lijn als alle data.\n*   **Animaties op basis van tijd**  \n    CSS: Ja  \n    JavaScript: Ja  \n    CSS-animaties zijn altijd gebaseerd op tijd. Hoewel dit bij JavaScript ook kan, heb je ook de mogelijkheid om op basis van events (bijvoorbeeld input en state change) animaties te maken.\n*   **Animaties op basis van dynamische content**  \n    CSS: Nee  \n    JavaScript: Ja  \n    Animaties maken op basis van ingevoerde waarden, of op basis van de applicatie state kan alleen met JavaScript. Uiteraard kan je wel een CSS-animatie triggeren met JavaScript.\n*   **Complexe animaties**  \n    CSS: Eventueel  \n    JavaScript: Ja  \n    Complexe animaties zijn mogelijk in zowel CSS als in JavaScript. Echter biedt JavaScript meer mogelijkheden, zowel in methodes om complexe berekeningen als in de implementatie. Zeker ook in combinatie met libraries als Greensock.",{"__component":555,"id":593,"title":18,"asideText":557,"underline":69,"centered":69,"blankAside":69,"aside":18,"content":594,"introductionText":18},934,"## Is er meer?\n\nNaast alle animaties zelf schrijven (in CSS of in JavaScript) zijn er een ook libraries en frameworks die je kunnen helpen met het maken van animaties.\n\nDe meest populaire is Greensock Animation Platform (GSAP). Dit is een erg krachtig platform om in JavaScript animaties te maken. Het is vooral goed in het maken van Timelines; een reeks geschakelde animaties waarbij elke stap pas start als de stap ervoor klaar is. Ook heeft GSAP “staggers” waarmee meerdere elementen tegelijkertijd worden geanimeerd met een random volgorde.",{"__component":555,"id":596,"title":18,"asideText":557,"underline":69,"centered":69,"blankAside":69,"aside":18,"content":597,"introductionText":18},935,"![](https://www.sharevalue.nl/images/sharevalue/blogs/gsap-animation.gif)\n\n​",{"__component":555,"id":599,"title":18,"asideText":557,"underline":69,"centered":69,"blankAside":69,"aside":18,"content":600,"introductionText":18},936,"Wil je meer leren, en net als het Front-End team de diepte induiken van animaties en transities? Johan heeft de slides van zijn presentatie online gezet: [https://levelup-animations.netlify.app/#/](https://levelup-animations.netlify.app/#/)",{"__component":602,"id":355,"title":18,"showBlankAside":304},"global.social-sharing",{"__component":604,"id":605,"name":18,"jobTitle":18},"strapi.author-card",61,{"__component":92,"id":607,"title":323,"aside":18,"postType":96,"limit":97,"expertise":608},72,[609,651],{"id":60,"title":61,"subTitle":62,"description":63,"shortDescription":64,"slug":65,"createdAt":66,"updatedAt":67,"publishedAt":68,"isCoreExpertise":69,"documentId":70,"image":610,"blocks":613,"midPageBlocks":620,"seo":18},{"id":72,"name":73,"alternativeText":18,"caption":18,"width":74,"height":75,"formats":611,"hash":85,"ext":78,"mime":81,"size":86,"url":87,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":88,"updatedAt":88,"documentId":89,"publishedAt":57},{"thumbnail":612},{"ext":78,"url":79,"hash":80,"mime":81,"name":82,"path":18,"size":83,"width":49,"height":84},[614,617],{"__component":92,"id":93,"title":94,"aside":95,"postType":96,"limit":97,"expertise":615},[616],{"id":60,"title":61,"subTitle":62,"description":63,"shortDescription":64,"slug":65,"createdAt":66,"updatedAt":67,"publishedAt":68,"isCoreExpertise":69,"documentId":70},{"__component":106,"id":107,"titleLeft":108,"callToActionTextLeft":109,"callToActionLinkUrlLeft":110,"titleRight":111,"callToActionTextRight":112,"callToActionLinkUrlRight":113,"iconUrlLeft":618,"iconUrlRight":619},{"id":141,"name":142,"alternativeText":18,"caption":18,"width":143,"height":144,"formats":18,"hash":145,"ext":146,"mime":147,"size":148,"url":149,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":150,"updatedAt":151,"documentId":152,"publishedAt":57},{"id":154,"name":155,"alternativeText":18,"caption":18,"width":144,"height":144,"formats":18,"hash":156,"ext":146,"mime":147,"size":157,"url":158,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":159,"updatedAt":160,"documentId":161,"publishedAt":57},[621,628,635,642,649],{"__component":116,"id":117,"title":118,"subTitle":18,"content":119,"callToActionText":120,"callToActionLink":110,"colorStyle":18,"showAsides":18,"imageUrl":622},{"id":165,"name":166,"alternativeText":18,"caption":18,"width":167,"height":168,"formats":623,"hash":196,"ext":23,"mime":173,"size":197,"url":198,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":199,"updatedAt":199,"documentId":200,"publishedAt":57},{"large":624,"small":625,"medium":626,"thumbnail":627},{"ext":23,"url":171,"hash":172,"mime":173,"name":174,"path":18,"size":175,"width":29,"height":176},{"ext":23,"url":178,"hash":179,"mime":173,"name":180,"path":18,"size":181,"width":36,"height":182},{"ext":23,"url":184,"hash":185,"mime":173,"name":186,"path":18,"size":187,"width":20,"height":188},{"ext":23,"url":190,"hash":191,"mime":173,"name":192,"path":18,"size":193,"width":194,"height":195},{"__component":116,"id":122,"title":123,"subTitle":18,"content":124,"callToActionText":18,"callToActionLink":18,"colorStyle":18,"showAsides":18,"imageUrl":629},{"id":203,"name":204,"alternativeText":18,"caption":18,"width":167,"height":168,"formats":630,"hash":226,"ext":23,"mime":173,"size":227,"url":228,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":229,"updatedAt":229,"documentId":230,"publishedAt":57},{"large":631,"small":632,"medium":633,"thumbnail":634},{"ext":23,"url":207,"hash":208,"mime":173,"name":209,"path":18,"size":210,"width":29,"height":176},{"ext":23,"url":212,"hash":213,"mime":173,"name":214,"path":18,"size":215,"width":36,"height":182},{"ext":23,"url":217,"hash":218,"mime":173,"name":219,"path":18,"size":220,"width":20,"height":188},{"ext":23,"url":222,"hash":223,"mime":173,"name":224,"path":18,"size":225,"width":194,"height":195},{"__component":116,"id":126,"title":127,"subTitle":18,"content":128,"callToActionText":18,"callToActionLink":18,"colorStyle":18,"showAsides":18,"imageUrl":636},{"id":233,"name":234,"alternativeText":18,"caption":18,"width":167,"height":168,"formats":637,"hash":256,"ext":23,"mime":173,"size":257,"url":258,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":259,"updatedAt":259,"documentId":260,"publishedAt":57},{"large":638,"small":639,"medium":640,"thumbnail":641},{"ext":23,"url":237,"hash":238,"mime":173,"name":239,"path":18,"size":240,"width":29,"height":176},{"ext":23,"url":242,"hash":243,"mime":173,"name":244,"path":18,"size":245,"width":36,"height":182},{"ext":23,"url":247,"hash":248,"mime":173,"name":249,"path":18,"size":250,"width":20,"height":188},{"ext":23,"url":252,"hash":253,"mime":173,"name":254,"path":18,"size":255,"width":194,"height":195},{"__component":116,"id":130,"title":131,"subTitle":18,"content":132,"callToActionText":18,"callToActionLink":18,"colorStyle":18,"showAsides":18,"imageUrl":643},{"id":263,"name":264,"alternativeText":18,"caption":18,"width":167,"height":168,"formats":644,"hash":286,"ext":23,"mime":173,"size":287,"url":288,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":289,"updatedAt":290,"documentId":291,"publishedAt":57},{"large":645,"small":646,"medium":647,"thumbnail":648},{"ext":23,"url":267,"hash":268,"mime":173,"name":269,"path":18,"size":270,"width":29,"height":176},{"ext":23,"url":272,"hash":273,"mime":173,"name":274,"path":18,"size":275,"width":36,"height":182},{"ext":23,"url":277,"hash":278,"mime":173,"name":279,"path":18,"size":280,"width":20,"height":188},{"ext":23,"url":282,"hash":283,"mime":173,"name":284,"path":18,"size":285,"width":194,"height":195},{"__component":134,"id":135,"title":136,"callToActionText":137,"callToActionLinkUrl":138,"body":18,"imageUrl":650},{"id":141,"name":142,"alternativeText":18,"caption":18,"width":143,"height":144,"formats":18,"hash":145,"ext":146,"mime":147,"size":148,"url":149,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":150,"updatedAt":151,"documentId":152,"publishedAt":57},{"id":295,"title":296,"subTitle":297,"description":298,"shortDescription":299,"slug":300,"createdAt":301,"updatedAt":302,"publishedAt":303,"isCoreExpertise":304,"documentId":305,"image":652,"blocks":655,"midPageBlocks":664,"seo":695},{"id":307,"name":308,"alternativeText":18,"caption":18,"width":74,"height":75,"formats":653,"hash":315,"ext":78,"mime":81,"size":60,"url":316,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":317,"updatedAt":318,"documentId":319,"publishedAt":57},{"thumbnail":654},{"ext":78,"url":311,"hash":312,"mime":81,"name":313,"path":18,"size":314,"width":49,"height":84},[656,661],{"__component":92,"id":322,"title":323,"aside":18,"postType":96,"limit":97,"expertise":657},[658,659,660],{"id":295,"title":296,"subTitle":297,"description":298,"shortDescription":299,"slug":300,"createdAt":301,"updatedAt":302,"publishedAt":303,"isCoreExpertise":304,"documentId":305},{"id":60,"title":61,"subTitle":62,"description":63,"shortDescription":64,"slug":65,"createdAt":66,"updatedAt":67,"publishedAt":68,"isCoreExpertise":69,"documentId":70},{"id":97,"title":389,"subTitle":297,"description":390,"shortDescription":391,"slug":392,"createdAt":393,"updatedAt":394,"publishedAt":395,"isCoreExpertise":69,"documentId":396},{"__component":106,"id":332,"titleLeft":333,"callToActionTextLeft":109,"callToActionLinkUrlLeft":110,"titleRight":111,"callToActionTextRight":112,"callToActionLinkUrlRight":113,"iconUrlLeft":662,"iconUrlRight":663},{"id":439,"name":440,"alternativeText":18,"caption":18,"width":441,"height":442,"formats":18,"hash":443,"ext":146,"mime":147,"size":444,"url":445,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":446,"updatedAt":447,"documentId":448,"publishedAt":57},{"id":450,"name":451,"alternativeText":18,"caption":18,"width":341,"height":442,"formats":18,"hash":452,"ext":146,"mime":147,"size":453,"url":454,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":455,"updatedAt":456,"documentId":457,"publishedAt":57},[665,672,679,686,693],{"__component":116,"id":336,"title":337,"subTitle":18,"content":338,"callToActionText":18,"callToActionLink":18,"colorStyle":339,"showAsides":69,"imageUrl":666},{"id":461,"name":166,"alternativeText":18,"caption":18,"width":167,"height":168,"formats":667,"hash":475,"ext":23,"mime":173,"size":197,"url":476,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":477,"updatedAt":477,"documentId":478,"publishedAt":57},{"large":668,"small":669,"medium":670,"thumbnail":671},{"ext":23,"url":464,"hash":465,"mime":173,"name":174,"path":18,"size":175,"width":29,"height":176},{"ext":23,"url":467,"hash":468,"mime":173,"name":180,"path":18,"size":181,"width":36,"height":182},{"ext":23,"url":470,"hash":471,"mime":173,"name":186,"path":18,"size":187,"width":20,"height":188},{"ext":23,"url":473,"hash":474,"mime":173,"name":192,"path":18,"size":193,"width":194,"height":195},{"__component":116,"id":341,"title":342,"subTitle":18,"content":343,"callToActionText":18,"callToActionLink":18,"colorStyle":344,"showAsides":69,"imageUrl":673},{"id":481,"name":482,"alternativeText":18,"caption":18,"width":167,"height":168,"formats":674,"hash":504,"ext":23,"mime":173,"size":505,"url":506,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":507,"updatedAt":507,"documentId":508,"publishedAt":57},{"large":675,"small":676,"medium":677,"thumbnail":678},{"ext":23,"url":485,"hash":486,"mime":173,"name":487,"path":18,"size":488,"width":29,"height":176},{"ext":23,"url":490,"hash":491,"mime":173,"name":492,"path":18,"size":493,"width":36,"height":182},{"ext":23,"url":495,"hash":496,"mime":173,"name":497,"path":18,"size":498,"width":20,"height":188},{"ext":23,"url":500,"hash":501,"mime":173,"name":502,"path":18,"size":503,"width":194,"height":195},{"__component":116,"id":346,"title":347,"subTitle":18,"content":348,"callToActionText":18,"callToActionLink":18,"colorStyle":339,"showAsides":69,"imageUrl":680},{"id":263,"name":264,"alternativeText":18,"caption":18,"width":167,"height":168,"formats":681,"hash":286,"ext":23,"mime":173,"size":287,"url":288,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":289,"updatedAt":290,"documentId":291,"publishedAt":57},{"large":682,"small":683,"medium":684,"thumbnail":685},{"ext":23,"url":267,"hash":268,"mime":173,"name":269,"path":18,"size":270,"width":29,"height":176},{"ext":23,"url":272,"hash":273,"mime":173,"name":274,"path":18,"size":275,"width":36,"height":182},{"ext":23,"url":277,"hash":278,"mime":173,"name":279,"path":18,"size":280,"width":20,"height":188},{"ext":23,"url":282,"hash":283,"mime":173,"name":284,"path":18,"size":285,"width":194,"height":195},{"__component":116,"id":350,"title":351,"subTitle":18,"content":352,"callToActionText":353,"callToActionLink":110,"colorStyle":344,"showAsides":69,"imageUrl":687},{"id":518,"name":519,"alternativeText":18,"caption":18,"width":167,"height":168,"formats":688,"hash":541,"ext":23,"mime":173,"size":542,"url":543,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":544,"updatedAt":544,"documentId":545,"publishedAt":57},{"large":689,"small":690,"medium":691,"thumbnail":692},{"ext":23,"url":522,"hash":523,"mime":173,"name":524,"path":18,"size":525,"width":29,"height":176},{"ext":23,"url":527,"hash":528,"mime":173,"name":529,"path":18,"size":530,"width":36,"height":182},{"ext":23,"url":532,"hash":533,"mime":173,"name":534,"path":18,"size":535,"width":20,"height":188},{"ext":23,"url":537,"hash":538,"mime":173,"name":539,"path":18,"size":540,"width":194,"height":195},{"__component":134,"id":355,"title":356,"callToActionText":137,"callToActionLinkUrl":357,"body":18,"imageUrl":694},{"id":141,"name":142,"alternativeText":18,"caption":18,"width":143,"height":144,"formats":18,"hash":145,"ext":146,"mime":147,"size":148,"url":149,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":150,"updatedAt":151,"documentId":152,"publishedAt":57},{"id":359,"metaTitle":360,"metaDescription":361,"structuredData":696,"metaImage":18,"metaSocial":699},{"url":363,"@type":364,"@context":365,"provider":697,"areaServed":698,"description":373,"serviceType":374},{"url":367,"name":368,"@type":369},{"name":371,"@type":372},[],{"__component":106,"id":75,"titleLeft":333,"callToActionTextLeft":109,"callToActionLinkUrlLeft":701,"titleRight":111,"callToActionTextRight":112,"callToActionLinkUrlRight":702,"iconUrlLeft":703,"iconUrlRight":704},"https://www.sharevalue.nl/contact","https://www.sharevalue.nl/word-onze-collega/vacatures",{"id":141,"name":142,"alternativeText":18,"caption":18,"width":143,"height":144,"formats":18,"hash":145,"ext":146,"mime":147,"size":148,"url":149,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":150,"updatedAt":151,"documentId":152,"publishedAt":57},{"id":154,"name":155,"alternativeText":18,"caption":18,"width":144,"height":144,"formats":18,"hash":156,"ext":146,"mime":147,"size":157,"url":158,"previewUrl":18,"provider":54,"provider_metadata":18,"createdAt":159,"updatedAt":160,"documentId":161,"publishedAt":57},{"id":706,"metaTitle":707,"metaDescription":708,"structuredData":709,"metaImage":18,"metaSocial":736},152,"Website tot leven met animaties en transities | ShareValue","Ontdek hoe je met CSS en JavaScript animaties en transities toevoegt om je website interactiever en aantrekkelijker te maken.​",[710,719],{"url":711,"@type":712,"author":713,"@context":365,"headline":707,"publisher":714,"description":718,"datePublished":13},"https://www.sharevalue.nl/blogs/breng-je-website-tot-leven-met-animaties-en-transities","BlogPosting",{},{"logo":715,"name":368,"@type":369},{"url":716,"@type":717},"https://www.sharevalue.nl/_nuxt/img/sharevalue-logo.3c5e7cb.svg","ImageObject","Ontdek hoe je met CSS en JavaScript animaties en transities toevoegt om je website interactiever en aantrekkelijker te maken.",{"@type":720,"@context":365,"mainEntity":721},"FAQPage",[722,728,732],{"name":723,"@type":724,"acceptedAnswer":725},"Wat is het verschil tussen een animatie en een transitie in CSS?","Question",{"text":726,"@type":727},"Een transitie is een geleidelijke verandering tussen twee toestanden, zoals het veranderen van de kleur van een knop bij hover. Een animatie daarentegen maakt gebruik van keyframes om complexe bewegingen of veranderingen over tijd te definiëren.","Answer",{"name":729,"@type":724,"acceptedAnswer":730},"Hoe voeg ik een eenvoudige hover-transitie toe aan een knop met CSS?",{"text":731,"@type":727},"Gebruik de 'transition' eigenschap in CSS om de overgang te definiëren. Bijvoorbeeld: 'transition: background-color 0.3s ease;' zorgt ervoor dat de achtergrondkleur van de knop soepel verandert over 0.3 seconden bij hover.",{"name":733,"@type":724,"acceptedAnswer":734},"Hoe kan ik een element animeren met JavaScript?",{"text":735,"@type":727},"Met de Web Animations API in JavaScript kun je elementen animeren door de 'animate()' methode te gebruiken. Hiermee definieer je keyframes en timingopties om bewegingen of andere visuele veranderingen te creëren.",[],{"pagination":738},{"page":739,"pageSize":135},1,{},1781259258551]