');--md-typeset-table--descending: url('data:image/svg+xml;charset=utf-8, ') }html{font-size:125%;height:100%;overflow-x:hidden}@media screen and (min-width:100em){html{font-size:137.5%}}@media screen and (min-width:125em){html{font-size:150%}}body{background-color:var(--md-default-bg-color);display:flex;flex-direction:column;font-size:.5rem;min-height:100%;position:relative;width:100%}@media print{body{display:block}}.md-grid{margin-left:auto;margin-right:auto;max-width:61rem}.md-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@page{margin:25mm}:root{--md-clipboard-icon: url('data:image/svg+xml;charset=utf-8, ') }.md-footer{background-color:var(--md-footer-bg-color);color:var(--md-footer-fg-color)}@media print{.md-footer{display:none}}.md-footer__inner{overflow:auto;padding:.2rem}.md-footer__link{display:flex;outline-color:var(--md-accent-fg-color);padding-bottom:.4rem;padding-top:1.4rem;transition:opacity .25s}@media screen and (min-width:45em){.md-footer__link{width:50%}}.md-footer__link:focus,.md-footer__link:hover{opacity:.7}.md-footer__link--prev{float:left}@media screen and (max-width:44.9375em){.md-footer__link--prev{width:25%}.md-footer__link--prev .md-footer__title{display:none}}.md-footer__link--next{float:right;text-align:right}@media screen and (max-width:44.9375em){.md-footer__link--next{width:75%}}.md-footer__title{flex-grow:1;font-size:.9rem;line-height:2.4rem;max-width:calc(100% - 2.4rem);padding:0 1rem;position:relative}.md-footer__button{margin:.2rem;padding:.4rem}.md-footer__direction{font-size:.64rem;left:0;margin-top:-1rem;opacity:.7;padding:0 1rem;position:absolute;right:0}:root{--md-nav-icon--prev: url('data:image/svg+xml;charset=utf-8, ');--md-nav-icon--next: url('data:image/svg+xml;charset=utf-8, ');--md-toc-icon: url('data:image/svg+xml;charset=utf-8, ') }*{-webkit-font-smoothing:antialiased;-webkit-overflow-scrolling:touch;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:none;-webkit-touch-callout:none;box-sizing:border-box}body:not(.ready){overflow:hidden}body:not(.ready) .app-nav,body:not(.ready)>nav{display:none}.progress{background-color:var(--theme-color,#0074d9);height:2px;left:0;position:fixed;right:0;top:0;transition:width .2s,opacity .4s;width:0;z-index:999999}.search a:hover{color:var(--theme-color,#0074d9)}body,html{height:100%}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Source Sans Pro,Helvetica Neue,Arial,sans-serif;font-size:15px;letter-spacing:0;margin:0;overflow-x:hidden}img{max-width:100%}.app-nav{margin:25px 60px 0 0;position:absolute;right:0;text-align:right;z-index:10}.app-nav.no-badge{margin-right:25px}.app-nav p{margin:0}.app-nav>a{margin:0 1rem;padding:5px 0}.app-nav li,.app-nav ul{display:inline-block;list-style:none;margin:0}.app-nav a{color:inherit;font-size:16px;text-decoration:none;transition:color .3s}.app-nav a:hover{color:var(--theme-color,#0074d9)}.app-nav li{display:inline-block;margin:0 1rem;padding:5px 0;position:relative}.app-nav li ul{background-color:#fff;border:1px solid;border-color:#ddd #ddd #ccc;border-radius:4px;box-sizing:border-box;display:none;max-height:calc(100vh - 61px);overflow-y:auto;padding:10px 0;position:absolute;right:-15px;text-align:left;top:100%;white-space:nowrap}.app-nav li ul li{display:block;font-size:14px;line-height:1rem;margin:8px 14px;white-space:nowrap}.app-nav li ul a{display:block;font-size:inherit;margin:0;padding:0}.app-nav li:hover ul{display:block}main{display:block;position:relative;width:100vw;height:100%;z-index:0}main.hidden{display:none}.anchor{display:inline-block;text-decoration:none;transition:all .3s}.anchor span{color:#34495e}.anchor:hover{text-decoration:underline}.sidebar{border-right:1px solid rgba(0,0,0,.07);overflow-y:auto;padding:40px 0 0;position:absolute;top:0;bottom:0;left:0;transition:transform .25s ease-out;width:12rem;z-index:20}.sidebar>h1{margin:0 auto 1rem;font-size:1.5rem;font-weight:300;text-align:center}.sidebar>h1 a{color:inherit;text-decoration:none}.sidebar>h1 .app-nav{display:block;position:static}.sidebar .sidebar-nav{line-height:2em;padding-bottom:40px}.sidebar ul{margin:0 0 0 15px;padding:0}.sidebar li>p{font-weight:700;margin:0}.sidebar ul,.sidebar ul li{list-style:none}.sidebar ul li a{border-bottom:none;display:block}.sidebar ul li ul{padding-left:20px}.sidebar::-webkit-scrollbar{width:4px}.sidebar::-webkit-scrollbar-thumb{background:transparent;border-radius:4px}.sidebar:hover::-webkit-scrollbar-thumb{background:hsla(0,0%,53.3%,.4)}.sidebar:hover::-webkit-scrollbar-track{background:hsla(0,0%,53.3%,.1)}.content{padding-top:0;position:absolute;top:0;right:0;bottom:0;left:12rem;transition:left .25s ease}.markdown-section{margin:0 auto;max-width:800px;padding:30px 15px 40px;position:relative}.markdown-section>*{box-sizing:border-box;font-size:inherit}.markdown-section>:first-child{margin-top:0!important}@media print{.app-nav,.sidebar{display:none}}@media screen and (max-width:768px){.sidebar{position:fixed}.app-nav{margin-top:16px}.app-nav li ul{top:30px}main{height:auto;overflow-x:hidden}.sidebar{left:-16rem;transition:transform .25s ease-out}.content{left:0;max-width:100vw;position:static;padding-top:20px;transition:transform .25s ease}.app-nav{transition:transform .25s ease-out}}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}section.cover{align-items:center;background-position:50%;background-repeat:no-repeat;background-size:cover;height:100vh;display:none}section.cover .cover-main{flex:1;margin:0;text-align:center;z-index:1}section.cover a{color:inherit}section.cover a,section.cover a:hover{text-decoration:none}section.cover p{line-height:1.5rem;margin:1em 0}section.cover h1{color:inherit;font-size:2.5rem;font-weight:300;margin:.625rem 0 2.5rem;position:relative;text-align:center}section.cover h1 a{display:block}section.cover ul{line-height:1.8;list-style-type:none;margin:1em auto;max-width:500px;padding:0}section.cover .cover-main>p:last-child a{border-radius:2rem;border:1px solid var(--theme-color,#0074d9);box-sizing:border-box;color:var(--theme-color,#0074d9);display:inline-block;font-size:1.05rem;letter-spacing:.1rem;margin:.5rem 1rem;padding:.75em 2rem;text-decoration:none;transition:all .15s ease}section.cover .cover-main>p:last-child a:last-child{background-color:var(--theme-color,#0074d9);color:#fff}section.cover .cover-main>p:last-child a:last-child:hover{color:inherit;opacity:.8}section.cover .cover-main>p:last-child a:hover{color:inherit}.sidebar{color:#364149;background-color:#fff}.sidebar a{color:#666;text-decoration:none}.sidebar li{list-style:none;margin:0;padding:.2em 0}.sidebar ul li ul{padding:0}.markdown-section h1,.markdown-section h2,.markdown-section strong{color:#333;font-weight:400}.markdown-section strong{color:#333;font-weight:600}.markdown-section a{color:var(--theme-color,#0074d9)}.markdown-section p,.markdown-section ul{line-height:1.6rem;margin:0 0 1em;word-spacing:.05rem}.markdown-section h1{font-size:2rem;font-weight:500;margin:0 0 1rem}.markdown-section h2{font-size:1.8rem;font-weight:400;margin:0 0 1rem;padding:1rem 0 0}.markdown-section p,.markdown-section ul{margin:1.2em 0}.markdown-section ul{padding-left:1.5rem}.markdown-section li{line-height:1.5;margin:0}.topbar{min-height:50px;border-bottom:1px solid #e0e0e0;padding:15px 40px}.toggle-sidebar-icon{margin-bottom:-1px;cursor:pointer;transform:rotate(180deg)}.icon-collapsed{transform:rotate(0)}img{max-width:100%;max-height:100%}video{max-width:100%;width:100%;max-height:100%}aside.sidebar{background:#f2f1ef;position:fixed;overflow:auto}aside.sidebar img{padding:20px;max-width:80%}.sidebar{padding-top:0}.search{margin-bottom:20px;padding:6px;border-bottom:1px solid #eee}.search .input-wrap{display:flex;align-items:center}.search input{outline:none;border:none;width:100%;padding:0 7px;line-height:36px;font-size:14px;border:1px solid transparent}.search input:focus{box-shadow:0 0 5px var(--theme-color, gray);border:1px solid var(--theme-color, gray)}.search input::-webkit-search-decoration,.search input::-webkit-search-cancel-button,.search input{-webkit-appearance:none;-moz-appearance:none;appearance:none}.search a{text-decoration:none;color:inherit}.search p{font-size:14px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.app-name-link{display:flex;justify-content:center}.search .clear-button{width:36px;text-align:right;display:none}.search .clear-button svg{transform:scale(.5)}.search h2{font-size:17px;margin:10px 0}.hidden{display:none}.cover-main{background:#FFFFFF;height:33vh;padding:3.5rem}.app-nav{display:none}.sidebar-collapsed{left:-16rem}section.content-collapsed{left:0rem}@media screen and (max-width:768px){.toggle-sidebar-icon{position:absolute;top:0px;transform:rotate(0)}.icon-collapsed{transform:rotate(180deg);left:17rem}.sidebar-collapsed{left:0rem}}.descriptionImage{max-width:100%;padding-top:40px;padding-bottom:40px;margin-top:40px;margin-bottom:40px}.carousel-section{position:relative;padding-top:40px;padding-bottom:40px;margin-top:40px;margin-bottom:40px}@media (max-width: 1360px){.carousel-container .holder,.carousel-container .swiper-pagination{margin-left:calc((100% - 20px * 2) * 2/12 - 6px)}}@media screen and (max-width: 90em){.carousel-image{left:50%;transform:translate(-50%)}}.carousel-container .holder{margin-left:65px;flex-basis:100%;padding-left:6px}.swiper-container{height:auto;margin:0 auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-container-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.carousel-container .swiper-slide{width:auto;height:auto;margin-right:20px}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.article{display:block;position:relative;width:430px;height:160px;overflow:hidden;background-color:#f4f4f4;color:#fff;padding-top:320px;border-bottom:3px solid transparent;box-sizing:content-box;transition:all .3s ease}.carousel-image{display:block;width:auto;height:322.5px;max-width:none;position:absolute;top:0}.carousel-container .swiper-pagination{height:2px;width:115px;margin-left:70px}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translateZ(0);z-index:10}.swiper-button-next{background-image:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3Dhttp%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%20viewBox%3D0%200%2027%2044%3E%3Cpath%20d%3DM27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z%20fill%3D%23007aff%2F%3E%3C%2Fsvg%3E);position:absolute;right:10px;left:auto}.carousel-container .swiper-button-next{transform:translate(100%,-100%)}.carousel-container .swiper-button-prev{transform:translate(100%,100%)}.carousel-container [class*=swiper-button]{position:absolute;height:55px;width:55px;top:50%;left:-55px;background-image:none}.arrow-left:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 19l-7-7m0 0l7-7m-7 7h18' /%3E%3C/svg%3E")}.arrow-left,.arrow-right{cursor:pointer}.arrow-left:before,.arrow-right:before{position:absolute;content:"";width:20px;height:20px;top:30%;left:34%}.arrow-right:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M14 5l7 7m0 0l-7 7m7-7H3' /%3E%3C/svg%3E")}.carousel-container [class*=swiper-button]:after{border:2px solid grey;content:"";border-radius:50%;display:block;position:absolute;top:0;right:0;bottom:0;left:0;transform:rotate(0);transition:border-color .3s,transform .3s}.carousel-container .swiper-button-next:hover:after{border-color:#333;border-bottom-color:#fff;transform:rotate(45deg)}.carousel-container .swiper-button-prev:hover:after{border-color:#333;border-bottom-color:#fff;transform:rotate(-45deg)}.swiper-pagination-progressbar-fill{background-color:#333;position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.description{margin-top:4rem}.anchor span{color:#242424}.absolute{position:absolute}.relative{position:relative}.inline-block{display:inline-block}.flex{display:flex}.h-\[400px\]{height:400px}.w-full{width:100%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.justify-center{justify-content:center}.object-cover{-o-object-fit:cover;object-fit:cover}.text-center{text-align:center}
How to create a project You can click "create project" - the top button on the sidebar. Or basically anywhere on the screen. If you prefer a bit of fake content to start out with, click the templates icon in the middle of the top bar.
Customize your project If you started with pre-populated content, you can go directly into the article you wish to edit. Make any edits to the text you need to, and choose the images by clicking the image and selecting your preference from the media modal. Each text box has a main image to support, and also as many cluster images as you need to show concepts related to that text box. The main image always has hierarchical priority over cluster images. Change any branding options to fit your needs - the main brand color gets changed for the entire project upon update.
Export animation from the builder Now that our project has our content we can head over to the animation builder tab. A default animation project always opens - click exit at the top to close the editor. You should see your project populate below the launch button. Be sure to click the project a couple of times as the UI is very unstable at the time this was written. The animation should launch after loading, with the branding, text, and picture updates. The list of available options pops up by clicking export on the right menu.
Playing the exported animation Since the "include wrapper" option was checked for the export, a wrapper.html file was created that can be opened in the browser to view the animation. The animation.html will also open in a similar way but will be full screen since it has no context and is designed to be placed into a planned area.
For first time users Click the Start Here button on the main screen - this will give a quick overview of the opinionated framework for how the system works and begin to define some of the vague and arbitrary aspects of the terminology.