[{"data":1,"prerenderedAt":407},["ShallowReactive",2],{"{\"resolve_relations\":\"reference.source\",\"version\":\"published\"}developers/labs/animation-creator-demo":3},{"data":4,"headers":384},{"story":5,"cv":366,"rels":367,"links":383},{"name":6,"created_at":7,"published_at":8,"updated_at":9,"id":10,"uuid":11,"content":12,"slug":358,"full_slug":359,"sort_by_date":30,"position":360,"tag_list":361,"is_startpage":200,"parent_id":362,"meta_data":30,"group_id":363,"first_published_at":364,"release_id":30,"lang":311,"path":30,"alternates":365,"default_full_slug":30,"translated_slugs":30},"Animation Creator Demo","2026-03-27T13:33:17.723Z","2026-04-23T12:28:54.362Z","2026-04-23T12:28:54.430Z",159452355559469,"1b85f314-f24a-4272-8d78-6fe34ed79987",{"_uid":13,"body":14,"date":256,"fold":257,"intro":314,"title":6,"gallery":327,"category":339,"metadata":341,"component":345,"demo_link":346,"thumbnail":348,"github_link":350,"last_updated":352,"open_graph_image":353,"include_open_graph":46,"block_search_engines":200},"f50d366a-d67c-4a10-86a7-4b5fc5c9f54e",[15,247],{"gap":16,"_uid":17,"align":16,"count":18,"width":19,"columns":20,"component":246,"remove_padding":46},"","f6f97b29-f4c1-4242-863b-a4543a5a2bbc","column-one","width-full",[21,47,58,62,155,189,230],{"_uid":22,"body":23,"alignment":44,"component":45,"is_full_width":46},"8de28e62-2cac-49b9-8930-9b99335e2e43",{"type":24,"content":25},"doc",[26,38],{"type":27,"attrs":28,"content":31},"heading",{"level":29,"textAlign":30},2,null,[32],{"text":33,"type":34,"marks":35},"How to Use","text",[36],{"type":37},"bold",{"type":39,"attrs":40,"content":41},"paragraph",{"textAlign":30},[42],{"text":43,"type":34},"To operate this demo, we have added additional UI elements to display and edit an animation timeline. You can remove keyframes, change the duration of the animation, and also change the distance and angle that the node will move or rotate to. You can also add to your animation timeline, including camera movement, node translation, node rotation, and node visibility.","align-left","copy",true,{"_uid":48,"body":49,"alignment":44,"component":45,"is_full_width":46},"f543c157-d41b-4cc3-bfb5-8a8e65bf10d5",{"type":24,"content":50},[51],{"type":27,"attrs":52,"content":53},{"level":29,"textAlign":30},[54],{"text":55,"type":34,"marks":56},"Demo Walkthrough Video",[57],{"type":37},{"_uid":59,"code":60,"component":61},"75d2d6cc-fb66-4a6b-9f27-2a11781e7ec8","\u003Ciframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/D19tZJvZBlQ?si=WfEndJGfUmGsKBVq\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen>\u003C/iframe>","code",{"_uid":63,"body":64,"alignment":44,"component":45,"is_full_width":46},"3db68134-7b3a-4873-98b3-16972e7ab12a",{"type":24,"content":65},[66,73,95],{"type":27,"attrs":67,"content":68},{"level":29,"textAlign":30},[69],{"text":70,"type":34,"marks":71},"Explore HOOPS Visualise for Web",[72],{"type":37},{"type":39,"attrs":74,"content":75},{"textAlign":30},[76,80,91],{"text":77,"type":34,"marks":78},"This demo was created using ",[79],{"type":37},{"text":81,"type":34,"marks":82},"HOOPS Visualize for Web",[83,90],{"type":84,"attrs":85},"link",{"href":86,"uuid":87,"anchor":30,"target":88,"linktype":89},"/developers/products/hoops-visualize","b5115ad7-8d04-4a41-ae62-0680605c897d","_self","story",{"type":37},{"text":92,"type":34,"marks":93}," (formerly HOOPS Communicator).",[94],{"type":37},{"type":96,"content":97},"bullet_list",[98,115,129,142],{"type":99,"content":100},"list_item",[101],{"type":39,"attrs":102,"content":103},{"textAlign":30},[104,106,113],{"text":105,"type":34},"Reference the HOOPS Visualize for Web (formerly HOOPS Communicator) ",{"text":107,"type":34,"marks":108},"Documentation",[109],{"type":84,"attrs":110},{"href":111,"uuid":30,"anchor":30,"target":30,"linktype":112},"https://docs.techsoft3d.com/communicator/latest/","url",{"text":114,"type":34},".",{"type":99,"content":116},[117],{"type":39,"attrs":118,"content":119},{"textAlign":30},[120,122,128],{"text":121,"type":34},"Sign up for a free ",{"text":123,"type":34,"marks":124},"evaluation",[125],{"type":84,"attrs":126},{"href":127,"uuid":30,"anchor":30,"target":30,"linktype":112},"https://manage.techsoft3d.com/signup?product=communicator",{"text":114,"type":34},{"type":99,"content":130},[131],{"type":39,"attrs":132,"content":133},{"textAlign":30},[134,136],{"text":135,"type":34},"Jump straight into coding with the ",{"text":137,"type":34,"marks":138},"3D Sandbox",[139],{"type":84,"attrs":140},{"href":141,"uuid":30,"anchor":30,"target":30,"linktype":112},"https://3dsandbox.techsoft3d.com/",{"type":99,"content":143},[144],{"type":39,"attrs":145,"content":146},{"textAlign":30},[147,149],{"text":148,"type":34},"Join our ",{"text":150,"type":34,"marks":151},"Community Forum",[152],{"type":84,"attrs":153},{"href":154,"uuid":30,"anchor":30,"target":30,"linktype":112},"https://forum.techsoft3d.com/",{"_uid":156,"body":157,"alignment":44,"component":45,"is_full_width":46},"49bfa3fe-caaf-40b4-8123-f5361a510401",{"type":24,"content":158},[159,166,178],{"type":27,"attrs":160,"content":161},{"level":29,"textAlign":30},[162],{"text":163,"type":34,"marks":164},"Questions or Feedback?",[165],{"type":37},{"type":39,"attrs":167,"content":168},{"textAlign":30},[169,171,177],{"text":170,"type":34},"We are looking for feedback and how this toolkit can be improved to meet your needs! Please connect in our ",{"text":172,"type":34,"marks":173},"forum",[174],{"type":84,"attrs":175},{"href":154,"uuid":30,"anchor":30,"target":176,"linktype":112},"_blank",{"text":114,"type":34},{"type":39,"attrs":179,"content":180},{"textAlign":30},[181,183],{"text":182,"type":34},"You can also sign up for a 60-day trial of ",{"text":184,"type":34,"marks":185},"HOOPS Visualize. ",[186],{"type":84,"attrs":187},{"href":188,"uuid":30,"anchor":30,"target":88,"linktype":112},"https://developer.techsoft3d.com/hoops/visualize",{"_uid":190,"messages":191,"component":224,"background":225,"remove_padding":46,"is_verticalized":200},"2517b691-8590-46b2-b1a0-c989536a3b36",[192],{"_uid":193,"icon":16,"buttons":194,"content":205,"headline":212,"link_url":16,"metadata":219,"component":222,"icon_size":16,"link_label":16,"headline_heading":223},"1f7a4845-55d4-4520-b973-efe814118e45",[195],{"_uid":196,"href":16,"color":197,"label":198,"action":199,"new_tab":200,"outline":46,"alignment":16,"component":201,"text_link":200,"destination":202},"e25f6918-ec5e-43c9-9ad6-5e4bcf39b279","light","Subscribe","action-modal",false,"element-button",{"id":16,"url":203,"linktype":112,"fieldtype":204,"cached_url":203},"subscribe","multilink",{"type":24,"content":206},[207],{"type":39,"attrs":208,"content":209},{"textAlign":30},[210],{"text":211,"type":34},"We’ll notify you as soon as new projects are available.",{"type":24,"content":213},[214],{"type":39,"attrs":215,"content":216},{"textAlign":30},[217],{"text":218,"type":34},"Be the first to know about new projects",{"_uid":220,"title":16,"plugin":221,"description":16},"0fa59fa4-a396-48fd-8878-1ce90fb5c07c","meta-fields","element-callout-child","heading-h3","element-callout",{"id":226,"alt":16,"name":16,"focus":16,"title":16,"source":16,"filename":227,"copyright":16,"fieldtype":228,"meta_data":229,"is_external_url":200},72383172008371,"https://a-us.storyblok.com/f/1023536/1350x901/98f768d3c7/mosiac.jpg","asset",{},{"_uid":231,"body":232,"alignment":44,"component":45,"is_full_width":46},"ed21b4a6-d00f-4e0d-a54d-08aa82d4d29d",{"type":24,"content":233},[234],{"type":39,"attrs":235,"content":236},{"textAlign":30},[237,239,245],{"text":238,"type":34},"Need to contact us? Email us at ",{"text":240,"type":34,"marks":241},"labs@techsoft3d.com",[242],{"type":84,"attrs":243},{"href":240,"uuid":30,"anchor":30,"target":88,"linktype":244},"email",{"text":114,"type":34},"columns",{"id":203,"_uid":248,"items":249,"component":255},"ca556064-0fa5-4110-8395-86e3f005ea32",[250],{"id":251,"_uid":252,"component":253,"business_unit":254},"dbdcd35d-8954-4b0d-9902-999e4cd25928","f78173e1-09c9-45b4-92d3-445b190c5ada","hubspot-form","toolkits","modal","2023-06-27 00:00",[258],{"_uid":259,"source":260,"component":313},"de63215b-57cd-4411-a03f-a0fc1f53addf",{"name":261,"created_at":262,"published_at":263,"updated_at":264,"id":265,"uuid":266,"content":267,"slug":304,"full_slug":305,"sort_by_date":30,"position":306,"tag_list":307,"is_startpage":200,"parent_id":308,"meta_data":30,"group_id":309,"first_published_at":310,"release_id":30,"lang":311,"path":30,"alternates":312,"default_full_slug":30,"translated_slugs":30,"_stopResolving":46},"Main Navigation","2025-04-09T14:04:01.876Z","2026-03-10T15:15:52.184Z","2026-04-14T21:06:12.239Z",27565407,"c5f4a23f-ca2c-41d7-946b-6822d34565a0",{"_uid":268,"items":269,"component":303},"8915070e-32eb-476d-b215-1c92ebdad15c",[270,285],{"_uid":271,"left_nav":16,"messages":272,"component":284,"right_nav":16},"fe7818a3-2c19-410c-adfd-6166e04c9bf0",[273,279],{"_uid":274,"icon":275,"link":276,"target":16,"message":277,"component":278},"87585227-383a-48e2-a5e5-1541d3b4b65a","tdesign:user-talk-1","/contact","Have questions about our SDKs or enterprise applications? Talk to a Tech Soft 3D expert","element-notice-child",{"_uid":280,"icon":281,"link":282,"target":16,"message":283,"component":278},"45ffc4c7-d6cf-4d3c-9606-ec4154852aef","hugeicons:artificial-intelligence-04","/developers/products/hoops-ai","Check out our newest SDK, HOOPS AI, a framework for preparing CAD data for ML workflows","element-notice",{"_uid":286,"menu":287,"component":302,"has_notice":46},"192904e7-cc6e-44e5-95a7-187c8ef72d1e",[288,293,296,299],{"url":289,"_uid":290,"label":291,"new_tab":200,"component":292},"#","eada60f3-c50f-41c1-8c50-4ffedd119483","SDKs for Developers","top-menu-child",{"url":289,"_uid":294,"label":295,"new_tab":200,"component":292,"style_as_button":200},"e80ecf91-c6c8-4e7a-a5b7-10ec4e05ada0","Apps for Businesses",{"url":289,"_uid":297,"label":298,"new_tab":200,"component":292,"style_as_button":200},"b3d091d9-83d1-4b72-bb8d-0f4be140beaa","Company",{"url":289,"_uid":300,"label":301,"new_tab":200,"component":292,"style_as_button":46},"f2040cd1-8c5b-4dcf-8ee1-5b56049d0fe2","Support","top","global","main-navigation","global/main-navigation",-30,[],27501948,"998e76b0-7b0e-4635-8abf-c9db0f0bf29c","2025-04-09T15:16:40.189Z","default",[],"reference",{"type":24,"content":315},[316],{"type":39,"attrs":317,"content":318},{"textAlign":30},[319,321,325],{"text":320,"type":34},"This demo showcases how the Animation API in ",{"text":81,"type":34,"marks":322},[323],{"type":84,"attrs":324},{"href":86,"uuid":87,"anchor":30,"target":88,"linktype":89},{"text":326,"type":34}," (formerly HOOPS Communicator) can be utilized to create a simple animation creation application for work instructions, object assembly and disassembly, and much more.",[328,333],{"id":329,"alt":330,"name":16,"focus":16,"title":6,"source":16,"filename":331,"copyright":16,"fieldtype":228,"meta_data":332},159453441531558,"3D model with product structure tree in animated creator demo.","https://a-us.storyblok.com/f/1023536/1917x950/be98d0bfd0/animation-creator-demo-1.webp",{"alt":330,"title":6,"source":16,"copyright":16},{"id":334,"alt":335,"name":16,"focus":16,"title":336,"source":16,"filename":337,"copyright":16,"fieldtype":228,"meta_data":338},159453441592999,"3D mobile part model visualized on web.","3D part for animation","https://a-us.storyblok.com/f/1023536/1918x947/7b898cfdd3/animation-creator-demo-2.webp",{"alt":335,"title":336,"source":16,"copyright":16},[340],"hoopsVisualize",{"_uid":342,"title":343,"plugin":221,"description":344},"54a2ef1e-aa5c-4f3b-9b9d-f866451ee8e6","Animation Creator Demo | Tech Soft 3D Labs","This demo showcases how the Animation API in HOOPS Visualize for Web can be utilized to create a simple application for animated work instructions.","lab",{"id":16,"url":347,"linktype":112,"fieldtype":204,"cached_url":347},"https://techsoft3d.github.io/animation-creator/animation_creator.html?viewer=SCS&instance=microengine",{"id":334,"alt":335,"name":16,"focus":16,"title":336,"source":16,"filename":337,"copyright":16,"fieldtype":228,"meta_data":349,"is_external_url":200},{"alt":335,"title":336,"source":16,"copyright":16},{"id":16,"url":351,"linktype":112,"fieldtype":204,"cached_url":351},"https://github.com/techsoft3d/animation-creator","Tuesday, June 27, 2023",{"id":354,"alt":355,"name":16,"focus":16,"title":6,"source":16,"filename":356,"copyright":16,"fieldtype":228,"meta_data":357,"is_external_url":200},159452642229920,"3D model with animation using HOOPS Visualize for Web","https://a-us.storyblok.com/f/1023536/447x298/61bfd1f6a2/animation-creator-demo.webp",{"alt":355,"title":6,"source":16,"copyright":16},"animation-creator-demo","developers/labs/animation-creator-demo",-250,[],99359039112762,"b1e5e300-ba7c-47c0-8345-c5b709f24b25","2026-04-03T18:44:10.991Z",[],1776956007,[368],{"name":261,"created_at":262,"published_at":263,"updated_at":264,"id":265,"uuid":266,"content":369,"slug":304,"full_slug":305,"sort_by_date":30,"position":306,"tag_list":381,"is_startpage":200,"parent_id":308,"meta_data":30,"group_id":309,"first_published_at":310,"release_id":30,"lang":311,"path":30,"alternates":382,"default_full_slug":30,"translated_slugs":30},{"_uid":268,"items":370,"component":303},[371,375],{"_uid":271,"left_nav":16,"messages":372,"component":284,"right_nav":16},[373,374],{"_uid":274,"icon":275,"link":276,"target":16,"message":277,"component":278},{"_uid":280,"icon":281,"link":282,"target":16,"message":283,"component":278},{"_uid":286,"menu":376,"component":302,"has_notice":46},[377,378,379,380],{"url":289,"_uid":290,"label":291,"new_tab":200,"component":292},{"url":289,"_uid":294,"label":295,"new_tab":200,"component":292,"style_as_button":200},{"url":289,"_uid":297,"label":298,"new_tab":200,"component":292,"style_as_button":200},{"url":289,"_uid":300,"label":301,"new_tab":200,"component":292,"style_as_button":46},[],[],[],{"cache-control":385,"connection":386,"content-encoding":387,"content-type":388,"date":389,"etag":390,"referrer-policy":391,"sb-be-version":392,"server":393,"strict-transport-security":394,"transfer-encoding":395,"vary":396,"via":397,"x-amz-cf-id":398,"x-amz-cf-pop":399,"x-cache":400,"x-content-type-options":401,"x-frame-options":402,"x-permitted-cross-domain-policies":403,"x-request-id":404,"x-runtime":405,"x-xss-protection":406},"max-age=0, public, s-maxage=604800, stale-if-error=3600","keep-alive","gzip","application/json; charset=utf-8","Thu, 23 Apr 2026 14:54:01 GMT","W/\"6c5e588bc481f42365258c2e72e8028d\"","strict-origin-when-cross-origin","5.764.0","nginx/1.29.1","max-age=31536000","chunked","Origin,Accept-Encoding, Origin","1.1 b7a454c5d7e9ad8ba2aca6a02bb25f14.cloudfront.net (CloudFront)","XILOvtkKiDSwodT5ThQ4r7GuAhDe7Fj-T7_lrHYXYcfCXtYyCCDdsw==","CMH68-P3","Miss from cloudfront","nosniff","SAMEORIGIN","none","cde34528-d831-4b92-ad69-ac49be306436","0.021399","0",1776956041158]