{"id":8112,"date":"2025-03-25T15:36:12","date_gmt":"2025-03-25T14:36:12","guid":{"rendered":"https:\/\/ids.nu\/nowi-demo-duplicate-7708\/"},"modified":"2026-03-10T11:48:29","modified_gmt":"2026-03-10T10:48:29","slug":"nowi-demo-duplicate-7708","status":"publish","type":"page","link":"https:\/\/ids.nu\/en\/nowi-demo-duplicate-7708\/","title":{"rendered":"Rive Playground"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"8112\" class=\"elementor elementor-8112\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a454263 elementor-section-height-full elementor-section-full_width elementor-section-height-default elementor-section-items-middle\" data-id=\"a454263\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[],&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-cd9208b\" data-id=\"cd9208b\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8047b2e elementor-widget elementor-widget-html\" data-id=\"8047b2e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<script src=\"https:\/\/unpkg.com\/@rive-app\/webgl2@latest\"><\/script> <!-- Gebruik de laatste versie van de Rive package --><canvas id=\"myRive\" class=\"riveClass\" width=\"800\" height=\"800\"><\/canvas><style type='text\/css'>.riveClass {\r\n        width: 80vw;\r\n        max-height: 80vh;\r\n    }\r\n<\/style><script>function computeSize() { \/\/ Deze functie gaan we later gebruiken\r\n        myRiveElement.resizeDrawingSurfaceToCanvas(); \/\/ resizeDrawingSurfaceToCanvas zorgt ervoor dat het 'tekengebied' met de juiste afmetingen wordt aangepast aan het formaat van het canvas. We gebruiken deze functie wanneer de Rive animatie wordt geladen, wanneer het schermformaat verandert, etc.\r\n    }\r\n    const myRiveElement = new rive.Rive({\r\n        src: 'https:\/\/ids.nu\/wp-content\/uploads\/2025\/04\/nowi_web_interactive_v2.riv',\r\n        canvas: document.getElementById(\"myRive\"),\r\n        layout: new rive.Layout({\r\n            fit: rive.Fit.Layout,  \/\/ Zorgt ervoor dat het formaat van het artboard automatisch wordt aangepast\r\n            layoutScaleFactor: 1, \/\/ Met deze waarde moet je een beetje spelen. Hiermee 'scale' je de Rive component. Als Rive te groot of te klein is, kan je dit wat hoger of lager zetten.\r\n        }),\r\n        autoplay: true,\r\n        stateMachines: \"Nowi State Machine\",\r\n        isTouchScrollEnabled: true,\r\n        onLoad: () => { \/\/ Deze code wordt uitgevoerd wanneer de State Machine geladen is.\r\n        \r\n\t\t        const inputs = myRiveElement.stateMachineInputs('Nowi State Machine'); \/\/ Zoekt naar alle 'inputs' (waarden die je naar de Rive animatie kunt sturen). Dit is er voor nu maar \u00e9\u00e9n.\r\n\t\t        const deBugMode = inputs.find(i => i.name === 'deBugMode'); \/\/ Zoek in de lijst van inputs naar een input genaamd deBugMode\r\n\t\t        deBugMode.value = 5; \/\/ Zet deBugMode aan (true) of uit (false). Als deze aan staat kan je de hitbox zien, wat helpt bij het bouwen.\r\n        \r\n            computeSize(); \/\/ voert de functie 'computeSize(); uit. Zie bovenstaand\r\n        }\r\n    });\r\n    window.addEventListener(\"resize\", computeSize); \/\/ Voert de computeSize functie uit wanneer het scherm van formaat verandert\r\n\r\n    window\r\n        .matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`)\r\n        .addEventListener(\"change\", computeSize); \/\/voert de computeSize functie uit wanneer de resolutie verandert (bijvoorbeeld wanneer het venster naar een scherm van een ander formaat wordt verplaatst\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-48cfc99 elementor-widget elementor-widget-html\" data-id=\"48cfc99\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!--FOR FUTURE REFERENCE:\r\nThe \"width\" and \"height\" the canvas element are SOMETHING ELSE than css width and height. They are the pixel sizes of the CANVAS on which you're drawing. Higher numbers = crisper image. You can THEN still set the actual height and width with css. To get a sharper image (especially on high dpi displays), set the canvas size higher and then downsize it, because just using the literal canvas size will make the image blurry.\r\n\r\nSetting the width in the CSS to \"auto\" maintains the aspect ratio of the canvas.\r\n\r\n\r\n\r\n<script src=\"https:\/\/unpkg.com\/@rive-app\/canvas@latest\"><\/script>\r\n\r\n<canvas id=\"myRive\" class=\"riveClass\" width=\"800\" height=\"800\" ><\/canvas>\r\n\r\n<style type='text\/css'>\r\n     .riveClass {\r\n        width: 100%; \r\n     \tmax-height: 80vh;\r\n\r\n  }\r\n  \r\n  .wpml-ls {\r\n      display: none;\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n    function computeSize() {\r\n        myRiveElement.resizeDrawingSurfaceToCanvas();\r\n    }\r\n    \r\n    const myRiveElement = new rive.Rive({\r\n        src: \"https:\/\/ids.nu\/wp-content\/uploads\/2025\/03\/nowi_web_interactive_v1.3.riv\",\r\n\r\n        canvas: document.getElementById(\"myRive\"),\r\n                layout: new rive.Layout({\r\n            fit: rive.Fit.Layout,\r\n            layoutScaleFactor: 1, \/\/ 2x scale of the layout, when using `Fit.Layout`. This allows you to resize the layout as needed.\r\n    }),\r\n        autoplay: true,\r\n        stateMachines: \"Nowi State Machine\",\r\n\r\n         isTouchScrollEnabled: true,\r\n         onLoad: () => {\r\n             computeSize();\r\n         }\r\n\r\n    });\r\n    \r\n\r\n    \r\n    window.addEventListener(\"resize\", computeSize);\r\n    \r\n    window\r\n    .matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`)\r\n    .addEventListener(\"change\", computeSize);\r\n    \r\n<\/script> \r\n\r\n-->\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ec2258e elementor-widget elementor-widget-html\" data-id=\"ec2258e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!--FOR FUTURE REFERENCE:\r\nThe \"width\" and \"height\" the canvas element are SOMETHING ELSE than css width and height. They are the pixel sizes of the CANVAS on which you're drawing. Higher numbers = crisper image. You can THEN still set the actual height and width with css. To get a sharper image (especially on high dpi displays), set the canvas size higher and then downsize it, because just using the literal canvas size will make the image blurry.\r\n\r\nSetting the width in the CSS to \"auto\" maintains the aspect ratio of the canvas.\r\n\r\n\r\n\r\n<script src=\"https:\/\/unpkg.com\/@rive-app\/canvas@2.24.0\"><\/script>\r\n\r\n<canvas id=\"myRive\" class=\"myOrb\" width=\"800\" height=\"800\" ><\/canvas>\r\n\r\n<style type='text\/css'>\r\n     .myOrb {\r\n        width: auto; \r\n     \theight: 40vw;\r\n    padding-left: 0;\r\n    padding-right: 0;\r\n    margin-left: auto;\r\n    margin-right: auto;\r\n    display: block;\r\n  }\r\n  \r\n  .wpml-ls {\r\n      display: none;\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n    let numInput;\r\n    const orby = new rive.Rive({\r\n        src: \"https:\/\/ids.nu\/wp-content\/uploads\/2025\/03\/experiment-2.riv\",\r\n        \/\/ OR the path to a discoverable and public Rive asset\r\n        \/\/ src: '\/public\/example.riv',\r\n        canvas: document.getElementById(\"myRive\"),\r\n        autoplay: true,\r\n        stateMachines: \"State Machine 1\",\r\n        isTouchScrollEnabled: true,\r\n        onLoad: () => {\r\n        \/\/Source: https:\/\/rive.app\/docs\/runtimes\/web\/rive-parameters\r\n        \/\/Find all state machine inputs\r\n        const inputs = orby.stateMachineInputs('State Machine 1');\r\n        \/\/Search through inputs, looking for one called 'num'\r\n        const numInput = inputs.find(i => i.name === 'num');\r\n            \r\n        \/\/ Alternative way to do it, when you already know what number your input is (in this case 0, because there is only 1 input). Source: https:\/\/riveflow.webflow.io\/examples-2\/scroll-based-animation\r\n        \/\/ numInput = orby.stateMachineInputs(\"State Machine 1\")[0];\r\n        \r\n        \/\/Set the value of the input\r\n        numInput.value = 3;\r\n\r\n        },\r\n    });\r\n<\/script> -->\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-8112","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Rive Playground - IDS Animatie studio<\/title>\n<meta name=\"robots\" content=\"noindex, nofollow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Rive Playground - IDS Animatie studio\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ids.nu\/en\/nowi-demo-duplicate-7708\/\" \/>\n<meta property=\"og:site_name\" content=\"IDS Animatie studio\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-10T10:48:29+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ids.nu\\\/en\\\/nowi-demo-duplicate-7708\\\/\",\"url\":\"https:\\\/\\\/ids.nu\\\/en\\\/nowi-demo-duplicate-7708\\\/\",\"name\":\"Rive Playground - IDS Animatie studio\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ids.nu\\\/en\\\/#website\"},\"datePublished\":\"2025-03-25T14:36:12+00:00\",\"dateModified\":\"2026-03-10T10:48:29+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/ids.nu\\\/en\\\/nowi-demo-duplicate-7708\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ids.nu\\\/en\\\/nowi-demo-duplicate-7708\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/ids.nu\\\/en\\\/nowi-demo-duplicate-7708\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/ids.nu\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Rive Playground\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/ids.nu\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/ids.nu\\\/en\\\/\",\"name\":\"IDS Animatie studio\",\"description\":\"Jouw verhaal in beeld\",\"publisher\":{\"@id\":\"https:\\\/\\\/ids.nu\\\/en\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/ids.nu\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/ids.nu\\\/en\\\/#organization\",\"name\":\"IDS Animatie Studio\",\"url\":\"https:\\\/\\\/ids.nu\\\/en\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ids.nu\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/ids.nu\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/IDS.png\",\"contentUrl\":\"https:\\\/\\\/ids.nu\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/IDS.png\",\"width\":500,\"height\":500,\"caption\":\"IDS Animatie Studio\"},\"image\":{\"@id\":\"https:\\\/\\\/ids.nu\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Rive Playground - IDS Animatie studio","robots":{"index":"noindex","follow":"nofollow"},"og_locale":"en_US","og_type":"article","og_title":"Rive Playground - IDS Animatie studio","og_url":"https:\/\/ids.nu\/en\/nowi-demo-duplicate-7708\/","og_site_name":"IDS Animatie studio","article_modified_time":"2026-03-10T10:48:29+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/ids.nu\/en\/nowi-demo-duplicate-7708\/","url":"https:\/\/ids.nu\/en\/nowi-demo-duplicate-7708\/","name":"Rive Playground - IDS Animatie studio","isPartOf":{"@id":"https:\/\/ids.nu\/en\/#website"},"datePublished":"2025-03-25T14:36:12+00:00","dateModified":"2026-03-10T10:48:29+00:00","breadcrumb":{"@id":"https:\/\/ids.nu\/en\/nowi-demo-duplicate-7708\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ids.nu\/en\/nowi-demo-duplicate-7708\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/ids.nu\/en\/nowi-demo-duplicate-7708\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ids.nu\/en\/"},{"@type":"ListItem","position":2,"name":"Rive Playground"}]},{"@type":"WebSite","@id":"https:\/\/ids.nu\/en\/#website","url":"https:\/\/ids.nu\/en\/","name":"IDS Animatie studio","description":"Jouw verhaal in beeld","publisher":{"@id":"https:\/\/ids.nu\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ids.nu\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ids.nu\/en\/#organization","name":"IDS Animatie Studio","url":"https:\/\/ids.nu\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ids.nu\/en\/#\/schema\/logo\/image\/","url":"https:\/\/ids.nu\/wp-content\/uploads\/2019\/09\/IDS.png","contentUrl":"https:\/\/ids.nu\/wp-content\/uploads\/2019\/09\/IDS.png","width":500,"height":500,"caption":"IDS Animatie Studio"},"image":{"@id":"https:\/\/ids.nu\/en\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/ids.nu\/en\/wp-json\/wp\/v2\/pages\/8112","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ids.nu\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ids.nu\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ids.nu\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ids.nu\/en\/wp-json\/wp\/v2\/comments?post=8112"}],"version-history":[{"count":8,"href":"https:\/\/ids.nu\/en\/wp-json\/wp\/v2\/pages\/8112\/revisions"}],"predecessor-version":[{"id":10645,"href":"https:\/\/ids.nu\/en\/wp-json\/wp\/v2\/pages\/8112\/revisions\/10645"}],"wp:attachment":[{"href":"https:\/\/ids.nu\/en\/wp-json\/wp\/v2\/media?parent=8112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}