PageSourceSearch

https://spiritapp.io/faq/

html spiritapp.io collected 2026-10-03 21:52:17 UTC 64,136 bytes, 37 lines download raw bytes

1<!DOCTYPE html><html lang="en"><head><meta name="generator" content="Gatsby 2.19.37"/><title data-react-helmet="true">Spirit - Interactive Animation Tool</title><link data-react-helmet="true" rel="preload" as="font" type="font/woff2" href="/static/nunito-v10-latin-regular-de6068bf97f40206af0b062e262e6213.woff2" crossorigin="anonymous"/><link data-react-helmet="true" rel="preload" as="font" type="font/woff2" href="/static/nunito-v10-latin-300-895205e22ad7d4d866df7102352077cd.woff2" crossorigin="anonymous"/><link data-react-helmet="true" rel="preload" as="font" type="font/woff2" href="/static/nunito-v10-latin-700-91ae827aa880d02ea567979add1da58c.woff2" crossorigin="anonymous"/><link data-react-helmet="true" rel="preload" as="font" type="font/woff2" href="/static/inconsolata-v18-latin-regular-3b892623781be87c5d9c0baaf120282f.woff2" crossorigin="anonymous"/><link data-react-helmet="true" rel="icon" type="image/png" href="/favicon.png"/><meta data-react-helmet="true" charSet="utf-8"/><meta data-react-helmet="true" name="description" content="Spirit is an animation toolkit built to help you create animations for the web directly in the browser"/><meta data-react-helmet="true" name="image" content="https://spiritapp.io/banner.jpg"/><meta data-react-helmet="true" name="apple-mobile-web-app-title" content="Spirit"/><meta data-react-helmet="true" name="application-name" content="Spirit"/><meta data-react-helmet="true" property="og:url" content="https://spiritapp.io/faq/"/><meta data-react-helmet="true" property="og:title" content="Spirit - Interactive Animation Tool"/><meta data-react-helmet="true" property="og:description" content="Spirit is an animation toolkit built to help you create animations for the web directly in the browser"/><meta data-react-helmet="true" property="og:image" content="https://spiritapp.io/banner.jpg"/><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"/><meta data-react-helmet="true" name="twitter:creator" content="https://twitter.com/spiritjsapp"/><meta data-react-helmet="true" name="twitter:title" content="Spirit - Interactive Animation Tool"/><meta data-react-helmet="true" name="twitter:description" content="Spirit is an animation toolkit built to help you create animations for the web directly in the browser"/><meta data-react-helmet="true" name="twitter:image" content="https://spiritapp.io/banner.jpg"/><meta data-react-helmet="true" itemProp="name" content="Spirit - Interactive Animation Tool"/><meta data-react-helmet="true" itemProp="description" content="Spirit is an animation toolkit built to help you create animations for the web directly in the browser"/><meta data-react-helmet="true" name="viewport" content="width=device-width, initial-scale=1.0"/>
1<script data-react-helmet="true" type="application/ld+json">[{"@context":"http://schema.org","@type":"WebSite","@id":"https://spiritapp.io","url":"https://spiritapp.io","name":"Spirit - Interactive Animation Tool","alternateName":"Spirit Interactive Animation Tool"}]</script>
1<link rel="preconnect dns-prefetch" href="https://www.google-analytics.com"/><link rel="sitemap" type="application/xml" href="/sitemap.xml"/><link rel="manifest" href="/manifest.webmanifest"/><meta name="theme-color" content="#FFF"/><link rel="apple-touch-icon" sizes="48x48" href="/icons/icon-48x48.png?v=63a51708e0ecbaf0f025d283f762a1b2"/><link rel="apple-touch-icon" sizes="72x72" href="/icons/icon-72x72.png?v=63a51708e0ecbaf0f025d283f762a1b2"/><link rel="apple-touch-icon" sizes="96x96" href="/icons/icon-96x96.png?v=63a51708e0ecbaf0f025d283f762a1b2"/><link rel="apple-touch-icon" sizes="144x144" href="/icons/icon-144x144.png?v=63a51708e0ecbaf0f025d283f762a1b2"/><link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192x192.png?v=63a51708e0ecbaf0f025d283f762a1b2"/><link rel="apple-touch-icon" sizes="256x256" href="/icons/icon-256x256.png?v=63a51708e0ecbaf0f025d283f762a1b2"/><link rel="apple-touch-icon" sizes="384x384" href="/icons/icon-384x384.png?v=63a51708e0ecbaf0f025d283f762a1b2"/><link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-512x512.png?v=63a51708e0ecbaf0f025d283f762a1b2"/><link as="script" rel="preload" href="/89-bc03e54a96d061eb8416.js"/><link as="script" rel="preload" href="/component---src-pages-faq-tsx-d5d8ba4d1b7eb474c84d.js"/><link as="script" rel="preload" href="/142-24e146bd46b16662faa9.js"/><link as="script" rel="preload" href="/141-15c20819537f91f4862e.js"/><link as="script" rel="preload" href="/commons-d7ccb9dea3f8a76e6924.js"/><link as="script" rel="preload" href="/140-3710fe2de3276834ba4c.js"/><link as="script" rel="preload" href="/app-93530084ba20a0237c77.js"/><link as="script" rel="preload" href="/139-60618653e359be0b8a4d.js"/><link as="script" rel="preload" href="/56-76104a4c94c4f21f95e1.js"/><link as="script" rel="preload" href="/138-c72ec611a3714e6aa660.js"/><link as="script" rel="preload" href="/0-632ffa25b609b7f06ae3.js"/><link as="script" rel="preload" href="/137-77eb4582aa6919e68988.js"/><link as="script" rel="preload" href="/1-6f6c4d4a11cb69cfe664.js"/><link as="script" rel="preload" href="/136-7ed326de217771c4fa8a.js"/><link as="script" rel="preload" href="/2-82ab216937dadcb8400b.js"/><link as="script" rel="preload" href="/135-210382c7dcfe16e1784d.js"/><link as="script" rel="preload" href="/3-779466b0d57b9e2a921f.js"/><link as="script" rel="preload" href="/134-1a709321b3b565f02aae.js"/><link as="script" rel="preload" href="/4-82ca2287011ca59c0c6f.js"/><link as="script" rel="preload" href="/133-37f2857d60ef685e79c7.js"/><link as="script" rel="preload" href="/5-9f5d155d2b83a12bcb96.js"/><link as="script" rel="preload" href="/132-03b65bd2e70347a259ea.js"/><link as="script" rel="preload" href="/6-d3b1a9ae9f95732b748a.js"/><link as="script" rel="preload" href="/131-df7de5374ef6160073a7.js"/><link as="script" rel="preload" href="/7-52831a00796a047b81aa.js"/><link as="script" rel="preload" href="/130-859b6815f1990171bf57.js"/><link as="script" rel="preload" href="/8-2aade2a260a37b2f6a9a.js"/><link as="script" rel="preload" href="/129-fd432e4ef2c68d37a886.js"/><link as="script" rel="preload" href="/9-e393339280ac14b5122d.js"/><link as="script" rel="preload" href="/128-60fea3d4e731170c01b6.js"/><link as="script" rel="preload" href="/10-beefd60aaadeb863165d.js"/><link as="script" rel="preload" href="/127-3fea1ceaa4819739efc6.js"/><link as="script" rel="preload" href="/11-ddf5cf9af32bcb660a02.js"/><link as="script" rel="preload" href="/126-03df89670e42a83845eb.js"/><link as="script" rel="preload" href="/12-df703a331e986a6851ab.js"/><link as="script" rel="preload" href="/125-96d28d06363de3ed5f0e.js"/><link as="script" rel="preload" href="/13-3aea77e2b05cdc11ac2e.js"/><link as="script" rel="preload" href="/124-75ff468be77ac951672e.js"/><link as="script" rel="preload" href="/14-de60c00a81d993063a8b.js"/><link as="script" rel="preload" href="/123-6d5f4098bb6f90e159a7.js"/><link as="script" rel="preload" href="/15-d9f64bbececc550bc333.js"/><link as="script" rel="preload" href="/122-3beddab13c3dfc6c1191.js"/><link as="script" rel="preload" href="/16-c2f409fbdc870e8c9a4e.js"/><link as="script" rel="preload" href="/121-7eb4809dd0880e45468f.js"/><link as="script" rel="preload" href="/57-00d28e824a317bf27bed.js"/><link as="script" rel="preload" href="/120-1136f77804eb00784a47.js"/><link as="script" rel="preload" href="/58-83dc0745efa9916f02b3.js"/><link as="script" rel="preload" href="/119-500a2e5dfc33ce73362a.js"/><link as="script" rel="preload" href="/59-72bfb88ece1cd1873286.js"/><link as="script" rel="preload" href="/118-640c99a9c983ae678aed.js"/><link as="script" rel="preload" href="/60-b053ab043f1d6a7cb7bf.js"/><link as="script" rel="preload" href="/117-5f50283a8da1745d0dc6.js"/><link as="script" rel="preload" href="/61-30582d7d85d4891c3eea.js"/><link as="script" rel="preload" href="/116-098448c9e65192e4e860.js"/><link as="script" rel="preload" href="/62-3656114a860c6a5473ca.js"/><link as="script" rel="preload" href="/115-3ea3377f4909ce4d18aa.js"/><link as="script" rel="preload" href="/63-76ccd1cbd0ce36b0eed6.js"/><link as="script" rel="preload" href="/114-9f05e05395c51a1e655a.js"/><link as="script" rel="preload" href="/64-60bce2926a578edde214.js"/><link as="script" rel="preload" href="/113-b0c1dc74702ecb3bcfde.js"/><link as="script" rel="preload" href="/65-169b8253ae1f2bbd9d24.js"/><link as="script" rel="preload" href="/112-43ea43063addabfcd5a1.js"/><link as="script" rel="preload" href="/66-743a1e7dee7351dfdc45.js"/><link as="script" rel="preload" href="/111-0116d2a5da0f585ad140.js"/><link as="script" rel="preload" href="/67-2ee8c2900213baae200d.js"/><link as="script" rel="preload" href="/110-04b499d6f054aaeca330.js"/><link as="script" rel="preload" href="/68-3eca234d411195f5cfac.js"/><link as="script" rel="preload" href="/109-09fca45de7393190b41d.js"/><link as="script" rel="preload" href="/69-149f0395620aa9c8f0a4.js"/><link as="script" rel="preload" href="/108-9849219617bdf11eb630.js"/><link as="script" rel="preload" href="/70-1ffe453c413a6ddba5f7.js"/><link as="script" rel="preload" href="/107-d85e6974ae97f01f365d.js"/><link as="script" rel="preload" href="/71-ce7e4ed37166c25088f3.js"/><link as="script" rel="preload" href="/106-b5be0cd03c385b3ae350.js"/><link as="script" rel="preload" href="/72-ae44ee874f807d62c399.js"/><link as="script" rel="preload" href="/105-46955fbb838f55015154.js"/>
1<link as="script" rel="preload" href="/73-377a1a8a5007f29e9161.js"/><link as="script" rel="preload" href="/104-52f17c19a9081b67c37a.js"/><link as="script" rel="preload" href="/74-296d7beed316ef7ce67f.js"/><link as="script" rel="preload" href="/103-a2218be90c9f46357a4a.js"/><link as="script" rel="preload" href="/75-3e7130721e2fd1a2bcc0.js"/><link as="script" rel="preload" href="/102-536398e5512e3f5b0d23.js"/><link as="script" rel="preload" href="/76-83ad56cf35d1cdb6ef90.js"/><link as="script" rel="preload" href="/101-1393a624da33556ee28d.js"/><link as="script" rel="preload" href="/77-fcccebf3a38f8b8337d7.js"/><link as="script" rel="preload" href="/100-40f119864eae919c5ed4.js"/><link as="script" rel="preload" href="/78-ad3244631aa85070ee8c.js"/><link as="script" rel="preload" href="/99-9842c0659258754f3dde.js"/><link as="script" rel="preload" href="/79-c0fa549509c074ef9a7e.js"/><link as="script" rel="preload" href="/98-db78e19e2b30913f8f4f.js"/><link as="script" rel="preload" href="/80-5685e39c58c42096d4fa.js"/><link as="script" rel="preload" href="/97-ab0b6efa34af97a74fc4.js"/><link as="script" rel="preload" href="/81-e3501696180ad0c51930.js"/><link as="script" rel="preload" href="/96-db9a12207b2f1be0c10d.js"/><link as="script" rel="preload" href="/82-bae1c15a61c6fcb255b1.js"/><link as="script" rel="preload" href="/95-fbb45d9efd6eddba206e.js"/><link as="script" rel="preload" href="/83-022dcfda84307b1756a2.js"/><link as="script" rel="preload" href="/94-2d506cb716894ef6e697.js"/><link as="script" rel="preload" href="/93-1b1fefc1b6869b305bf0.js"/><link as="script" rel="preload" href="/92-34de958f1abbbf331bd9.js"/><link as="script" rel="preload" href="/91-0521b97df0dc9fdc3c33.js"/><link as="script" rel="preload" href="/90-277df97b80f981b5c3c6.js"/><link as="script" rel="preload" href="/84-d09ccb1d9bf9b8499319.js"/><link as="script" rel="preload" href="/88-dae92ce6f4bec8eb34c4.js"/><link as="script" rel="preload" href="/87-06be2e33357cd636172c.js"/><link as="script" rel="preload" href="/86-d1eface8ee5f23fad0d4.js"/><link as="script" rel="preload" href="/85-e11d03c2b8d0b87f4026.js"/><link as="script" rel="preload" href="/webpack-runtime-8183a9682167c470dea1.js"/><link as="fetch" rel="preload" href="/page-data/faq/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/page-data/app-data.json" crossorigin="anonymous"/></head><body><noscript id="gatsby-noscript">This app works best with JavaScript enabled.</noscript><div id="___gatsby"><style data-emotion-css="hnuar7">*,*::after,*::before{box-sizing:border-box;}html{-webkit-scroll-behavior:smooth;-moz-scroll-behavior:smooth;-ms-scroll-behavior:smooth;scroll-behavior:smooth;touch-action:manipulation;line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0;}main{display:block;}h1{font-size:2em;margin:0.67em 0;}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace,monospace;font-size:1em;}a{background-color:transparent;}abbr[title]{border-bottom:none;-webkit-text-decoration:underline;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder;}code,kbd,samp{font-family:monospace,monospace;font-size:1em;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-0.25em;}sup{top:-0.5em;}img{border-style:none;}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible;}button,select{text-transform:none;}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0;}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText;}fieldset{padding:0.35em 0.75em 0.625em;}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline;}textarea{overflow:auto;}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto;}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}
1details{display:block;}summary{display:list-item;}template{display:none;}[hidden]{display:none;}@font-face{font-family:'Inconsolata';font-style:normal;font-weight:400;font-display:fallback;src:local('Inconsolata Regular'),local('Inconsolata-Regular'), url('/static/inconsolata-v18-latin-regular-3b892623781be87c5d9c0baaf120282f.woff2') format('woff2'), url('/static/inconsolata-v18-latin-regular-1fe9cc2170c678e8c1f8c5e3535ab848.woff') format('woff');}@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:fallback;src:local('Nunito Regular'),local('Nunito-Regular'), url('/static/nunito-v10-latin-regular-de6068bf97f40206af0b062e262e6213.woff2') format('woff2'), url('/static/nunito-v10-latin-regular-6386ba6af7b7a5480eb5efda82ff803c.woff') format('woff');}@font-face{font-family:'Nunito';font-style:normal;font-weight:300;font-display:fallback;src:local('Nunito Light'),local('Nunito-Light'), url('/static/nunito-v10-latin-300-895205e22ad7d4d866df7102352077cd.woff2') format('woff2'), url('/static/nunito-v10-latin-300-cad1324b066f52f764cf080d9244c8b2.woff') format('woff');}@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:fallback;src:local('Nunito Bold'),local('Nunito-Bold'), url('/static/nunito-v10-latin-700-91ae827aa880d02ea567979add1da58c.woff2') format('woff2'), url('/static/nunito-v10-latin-700-623f5ed42b0b347fb4531ded4e4b57a2.woff') format('woff');}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-smoothing:antialiased;text-rendering:optimizeLegibility;font-family:'Nunito',sans-serif;font-size:16px;color:#4C4C4C;line-height:1.8;background:#fff;}::selection{background:#4EA8FF;color:white;}a,button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(78,168,255,.4);}a{color:#4EA8FF;-webkit-text-decoration:none;text-decoration:none;-webkit-transition:color .15s ease;transition:color .15s ease;}@media (hover:hover){a:hover{color:#4C4C4C;}}.hidden{display:none;}.no-wrap{white-space:nowrap;}input[type="text"],input[type="email"]{font-size:16px;color:#000;border:1px solid #efefef;padding:7px 16px 7px;}</style><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class=""><style data-emotion-css="1etq6ur">.css-1etq6ur.menu-page{box-shadow:inset 0 -1px 0 #eee;}@media (max-width:875px){.css-1etq6ur.menu-page{box-shadow:none;}}</style><header class="menu-page css-1etq6ur"><nav role="navigation" aria-label="Spirit Menu"><style data-emotion-css="fse2pi">.css-fse2pi{max-width:1200px;}.menu-fullscreen .css-fse2pi{max-width:1350px;}@media (max-width:875px){.css-fse2pi{display:none;}}</style><style data-emotion-css="yg0can">.css-yg0can{padding:0 2em;width:100%;max-width:71.25rem;margin:0 auto;max-width:1200px;}.menu-fullscreen .css-yg0can{max-width:1350px;}@media (max-width:875px){.css-yg0can{display:none;}}</style><div class="menu-desktop css-yg0can"><style data-emotion-css="rvcehx">.css-rvcehx{position:relative;padding:32px;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}.menu-page .css-rvcehx{padding:26px;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;}.menu-mobile .css-rvcehx{padding:30px;height:93px;}</style><div class="css-rvcehx"><style data-emotion-css="1le1tv8">.css-1le1tv8{display:inherit;}.css-1le1tv8 img{height:35px;width:auto;margin-right:64px;}.menu-mobile .css-1le1tv8{text-align:center;margin-bottom:1em;}.menu-mobile .css-1le1tv8 img{height:40px;margin-right:0;}</style><a class="css-1le1tv8" href="/"><img src="/static/logo-4ab7b38cb45b2a6e1f30c7a62a47186e.png" draggable="false" alt="Spirit"/></a><style data-emotion-css="1sx8htn">.css-1sx8htn{list-style:none;margin:0;padding:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:no-wrap;-ms-flex-wrap:no-wrap;flex-wrap:no-wrap;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;-webkit-flex:1;-ms-flex:1;flex:1;}.menu-page .css-1sx8htn{-webkit-flex:none;-ms-flex:none;flex:none;}</style><ul class="css-1sx8htn"><style data-emotion-css="1bzv9id">.css-1bzv9id{font-weight:400;word-wrap:break-word;}.css-1bzv9id + li{padding-left:16px;}.css-1bzv9id a{-webkit-transition:color 0.15s ease;transition:color 0.15s ease;color:#000;padding:8px 16px;-webkit-text-decoration:none;text-decoration:none;}.menu-page .css-1bzv9id a{font-size:15px;}@media (hover:hover){.css-1bzv9id a:hover{color:#4EA8FF;}}.css-1bzv9id button,.css-1bzv9id .button{-webkit-transition:all 0.15s ease;transition:all 0.15s ease;}</style><li class="css-1bzv9id"><a href="/getstarted">Get Started</a></li><li class="css-1bzv9id"><a href="/docs">Docs</a></li><li class="css-1bzv9id"><a href="/playground">Playground</a></li><li class="css-1bzv9id"><a href="/faq">FAQ</a></li></ul></div></div><style data-emotion-css="1uqi3t7">.css-1uqi3t7{display:none;}@media (max-width:875px){.css-1uqi3t7{display:block;}}</style><div class="menu-mobile css-1uqi3t7"><style data-emotion-css="14eib88">.css-14eib88{position:fixed;top:30px;right:30px;z-index:11;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;outline:none;padding:10px;padding-top:14px;margin:0;overflow:visible;}.css-14eib88 .hamburger-box{position:relative;display:inline-block;width:20px;height:14px;}.css-14eib88 .hamburger-inner{top:50%;display:block;margin-top:-2px;}.css-14eib88 .hamburger-inner,.css-14eib88 .hamburger-inner::before,.css-14eib88 .hamburger-inner::after{position:absolute;width:20px;height:2px;-webkit-transition-timing-function:ease;transition-timing-function:ease;-webkit-transition-duration:.15s;transition-duration:.15s;-webkit-transition-property:-webkit-transform;-webkit-transition-property:transform;transition-property:transform;border-radius:3px;background-color:#000;}.css-14eib88 .hamburger-inner::before,.css-14eib88 .hamburger-inner::after{content:"";display:block;}.css-14eib88 .hamburger-inner::before{top:-7px;}.css-14eib88 .hamburger-inner::after{bottom:-7px;}.menu-open .css-14eib88 .hamburger-inner{-webkit-transition-delay:.12s;transition-delay:.12s;-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:rotate(225deg);-ms-transform:rotate(225deg);transform:rotate(225deg);}.menu-open .css-14eib88 .hamburger-inner::before{top:0;-webkit-transition:top .1s ease-out,opacity .1s ease-out .12s;transition:top .1s ease-out,opacity .1s ease-out .12s;opacity:0;}.menu-open .css-14eib88 .hamburger-inner::after{bottom:0;-webkit-transition:bottom .1s ease-out,-webkit-transform .22s cubic-bezier(.215,.61,.355,1) .12s;-webkit-transition:bottom .1s ease-out,transform .22s cubic-bezier(.215,.61,.355,1) .12s;transition:bottom .1s ease-out,transform .22s cubic-bezier(.215,.61,.355,1) .12s;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);}.css-14eib88::after{content:"";position:absolute;top:50%;left:50%;width:55px;height:55px;background:white;-webkit-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);z-index:-1;border-radius:50%;}</style><button class="hamburger css-14eib88" aria-expanded="false" type="button"><span class="hamburger-box"><span class="hamburger-inner"></span></span></button><style data-emotion-css="15fihke">.css-15fihke{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9;background:white;pointer-events:none;opacity:0;-webkit-transition:opacity .5s ease;transition:opacity .5s ease;}
1.menu-open .css-15fihke{pointer-events:auto;opacity:1;}</style><div class="backdrop css-15fihke"></div><style data-emotion-css="3n1ysp">.css-3n1ysp{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10;pointer-events:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;opacity:0;-webkit-transform:translateY(50px);-ms-transform:translateY(50px);transform:translateY(50px);-webkit-transition:-webkit-transform .7s cubic-bezier(0.01,0,0,1),opacity .5s ease;-webkit-transition:transform .7s cubic-bezier(0.01,0,0,1),opacity .5s ease;transition:transform .7s cubic-bezier(0.01,0,0,1),opacity .5s ease;}.menu-open .css-3n1ysp{pointer-events:auto;opacity:1;-webkit-transform:none;-ms-transform:none;transform:none;}</style><div class="items css-3n1ysp"><style data-emotion-css="cbxv1y">.css-cbxv1y{position:relative;}.css-cbxv1y ul{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.css-cbxv1y li{padding:1.5vh 16px;}.css-cbxv1y a,.menu-page .css-cbxv1y a{font-size:23px;}</style><div class="css-cbxv1y"><a class="css-1le1tv8" href="/"><img src="/static/logo-4ab7b38cb45b2a6e1f30c7a62a47186e.png" draggable="false" alt="Spirit"/></a><ul class="css-1sx8htn"><li class="css-1bzv9id"><a href="/getstarted">Get Started</a></li><li class="css-1bzv9id"><a href="/docs">Docs</a></li><li class="css-1bzv9id"><a href="/playground">Playground</a></li><li class="css-1bzv9id"><a href="/faq">FAQ</a></li></ul></div></div></div></nav></header><style data-emotion-css="6pg15c">.css-6pg15c{-webkit-transition:-webkit-transform .7s cubic-bezier(0.01,0,0,1);-webkit-transition:transform .7s cubic-bezier(0.01,0,0,1);transition:transform .7s cubic-bezier(0.01,0,0,1);}.menu-open .css-6pg15c{-webkit-transform:translateY(-50px);-ms-transform:translateY(-50px);transform:translateY(-50px);}</style><div class="css-6pg15c"><main itemscope="" itemType="http://schema.org/SoftwareApplication"><meta itemProp="applicationCategory" content="AnimationApplication"/><meta itemProp="operatingSystem" content="macOS"/><meta itemProp="operatingSystem" content="Windows 10"/><style data-emotion-css="11nxr6t">.css-11nxr6t{padding-bottom:2em;}.css-11nxr6t h2{color:#4EA8FF;}@media (max-width:875px){.css-11nxr6t > section:first-of-type{padding-top:0;}}</style><style data-emotion-css="ihqo4j">.css-ihqo4j{margin:8em 0;padding-bottom:2em;}@media (max-width:875px){.css-ihqo4j{margin:0;padding-top:91px;padding-bottom:4em;}.css-ihqo4j h1:first-of-type{margin-top:30px;}}.css-ihqo4j h2{color:#4EA8FF;}@media (max-width:875px){.css-ihqo4j > section:first-of-type{padding-top:0;}}</style><div class="page css-ihqo4j"><style data-emotion-css="7pam8b">.css-7pam8b{margin-bottom:5em;}</style><style data-emotion-css="1p1z8ig">.css-1p1z8ig{padding:0 2em;width:100%;max-width:71.25rem;margin:0 auto;margin-bottom:5em;}</style><div class="css-1p1z8ig"><style data-emotion-css="1u7yebz">.css-1u7yebz{margin-top:36px;margin-bottom:16px;line-height:1.5;font-weight:700;color:#000;position:relative;font-size:23px;line-height:1.4;text-align:center;margin:1.8em 0;}@media(min-width:480px){.css-1u7yebz{font-size:26px;}}@media(min-width:768px){.css-1u7yebz{font-size:30px;}}.css-1u7yebz::before{content:"";position:absolute;top:-30px;left:50%;margin-left:-23px;height:5px;width:46px;background-image:linear-gradient(90deg,#1dcb8b 0%,#4EA8FF 100%);padding:3px 10px;border-radius:12px;}</style><h1 class="css-1u7yebz e1wd9dw01">Frequently Asked Questions</h1></div><style data-emotion-css="1vf1n2k">.css-1vf1n2k{padding:8em 0;contain:layout;}@media (max-width:875px){.css-1vf1n2k{padding:2.5em 0;}}.css-1vf1n2k:nth-of-type(even){background:#fbfbfb;border-top:1px solid #efefef;border-bottom:1px solid #efefef;}</style><section class="css-1vf1n2k"><style data-emotion-css="1bxarir">.css-1bxarir{max-width:800px;}</style><style data-emotion-css="pm3agd">.css-pm3agd{padding:0 2em;width:100%;max-width:71.25rem;margin:0 auto;max-width:800px;}</style><div class="css-pm3agd"><style data-emotion-css="1fp2whh">.css-1fp2whh{position:relative;margin-top:0;margin-bottom:2em;}</style><style data-emotion-css="rwf1ch">
1.css-rwf1ch{margin-top:36px;margin-bottom:16px;line-height:1.5;font-weight:700;color:#000;font-size:21px;position:relative;margin-top:0;margin-bottom:2em;}</style><h2 class="css-rwf1ch e1wd9dw01"><style data-emotion-css="1rpb94q">.css-1rpb94q{display:none;position:absolute;width:40px;height:40px;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);top:50%;right:100%;}@media(min-width:1024px){.css-1rpb94q{display:block;}}</style><svg class="css-1rpb94q"><use xlink:href="#payment"></use></svg>Pricing &amp; Licensing</h2><div class="faq-items"><style data-emotion-css="1200alc">.css-1200alc{position:relative;padding-left:2em;}.css-1200alc::before{content:"";position:absolute;top:7px;left:0;width:14px;height:7px;-webkit-transition:-webkit-transform .1s .1s ease-out;-webkit-transition:transform .1s .1s ease-out;transition:transform .1s .1s ease-out;background:url(/c2640d0f7b7481bbc7d7c5846f1b6381.svg);-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);}.css-1200alc.faq-item--open::before{-webkit-transform:none;-ms-transform:none;transform:none;}</style><div class="faq-item css-1200alc"><div id="who-processes-spirit-orders"></div><style data-emotion-css="bvjhbj">.css-bvjhbj{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}</style><div class="title css-bvjhbj"><style data-emotion-css="2mhypy">.css-2mhypy{margin-top:36px;margin-bottom:16px;line-height:1.5;font-weight:700;color:#000;font-size:15px;}</style><h3 class="css-2mhypy e1wd9dw01">Who processes Spirit orders?</h3></div><style data-emotion-css="hwuxv0">.css-hwuxv0{will-change:transform,opacity,height;overflow:hidden;padding-left:2em;border-left:1px solid #efefef;}.css-hwuxv0 h4{color:#4EA8FF;}.css-hwuxv0 h5{font-weight:700;}.css-hwuxv0 p{margin-top:0;}.css-hwuxv0 .primary{color:#4EA8FF;}.css-hwuxv0 .secondary{color:#1dcb8b;}.css-hwuxv0 img{max-width:100%;}.css-hwuxv0 small{font-size:14px;color:#afafaf;}</style><div class="content css-hwuxv0" style="opacity:0;height:0"><div style="transform:translate3d(20px,0,0)">Our order process is conducted by our online reseller<!-- --> <a href="https://paddle.com/" rel="noopener" target="_blank">Paddle.com</a>. Paddle is the Merchant of Record for all our orders. Paddle provides all customer service inquiries and handles support for cancellations.</div></div></div><div class="faq-item css-1200alc"><div id="i-have-a-spirit-studio-license-do-i-automatically-have-access-to-all-gsap-contents-/-plugins"></div><div class="title css-bvjhbj"><h3 class="css-2mhypy e1wd9dw01">I have a Spirit Studio license, do I automatically have access to all GSAP contents / plugins?</h3></div><div class="content css-hwuxv0" style="opacity:0;height:0"><div style="transform:translate3d(20px,0,0)"><p class="css-0 e1wd9dw01">In short, the answer is no. If you&#x27;d like to have access to bonus plugins you&#x27;ll need to have a valid GreenSock license. See<!-- --> <a href="https://greensock.com/club/" rel="noopener" target="_blank">GreenSock licensing</a> for more information.</p><style data-emotion-css="1tpedpo">.css-1tpedpo{margin-left:0;padding-left:16px;border-left:2px solid;color:#b1b1b1;border-color:#e4e4e4;}</style><blockquote class="css-1tpedpo">We strongly encourage you to buy a GreenSock membership as it enables you to use GreenSock&#x27;s bonus plugins directly in Spirit Studio. See<!-- --> <a href="/docs/api/gsap-plugins">Docs</a> for more information.</blockquote></div></div></div><div class="faq-item css-1200alc"><div id="how-do-i-cancel-my-subscription"></div><div class="title css-bvjhbj"><h3 class="css-2mhypy e1wd9dw01">How do I cancel my subscription?</h3></div><div class="content css-hwuxv0" style="opacity:0;height:0"><div style="transform:translate3d(20px,0,0)">Your subscription plan will automatically renew until you cancel it.<br/><br/>If you’d like to cancel your subscription, please reach out to our payments provider (Paddle) at <a href="mailto:[email protected]">[email protected]</a> and they’ll take care of cancelation for you.<br/><br/>Important: Please be sure to cancel your subscription before the renewal date of your current plan.</div></div></div><div class="faq-item css-1200alc"><div id="whats-the-refund-policy"></div><div class="title css-bvjhbj"><h3 class="css-2mhypy e1wd9dw01">What&#x27;s the refund policy?</h3></div><div class="content css-hwuxv0" style="opacity:0;height:0"><div style="transform:translate3d(20px,0,0)">Spirit is a subscription service with quarterly and yearly plans. If you would like to cancel your plan, please reach out to our payment provider at<!-- --> <a href="mailto:[email protected]">[email protected]</a> and let them know why you’d like to cancel. They’ll take care of cancelation for you.<br/><br/>Important: Please be sure to cancel your subscription before the end date of your current plan.<br/><style data-emotion-css="y2pqlb">.css-y2pqlb{margin-top:36px;margin-bottom:16px;line-height:1.5;font-weight:700;color:#000;font-size:17px;}</style><h4 class="css-y2pqlb e1wd9dw01">Refund Terms</h4><h5 class="css-2mhypy e1wd9dw01">Yearly subscriptions</h5>If you’re on a yearly plan and you forget to cancel your subscription before the renewal date, please reach out to<!-- --> <a href="mailto:[email protected]">[email protected]</a>
1 within seven days after the renewal date to discuss a refund.<h5 class="css-2mhypy e1wd9dw01">Quarterly subscriptions</h5>There are no refunds on quarterly plans. If you’re on a quarterly plan, you must cancel before the quarterly renewal date.</div></div></div></div></div></section><section class="css-1vf1n2k"><div class="css-pm3agd"><h2 class="css-rwf1ch e1wd9dw01"><svg class="css-1rpb94q"><use xlink:href="#profile"></use></svg>Accounts</h2><div class="faq-items"><div class="faq-item css-1200alc"><div id="spirit-onboarding"></div><div class="title css-bvjhbj"><h3 class="css-2mhypy e1wd9dw01">Spirit Onboarding</h3></div><div class="content css-hwuxv0" style="opacity:0;height:0"><div style="transform:translate3d(20px,0,0)"><p class="css-0 e1wd9dw01">When you open Spirit Studio for the first time, you&#x27;ll be asked to enter your email address and go through a few quick steps to create your account and activate Spirit Studio.</p><div class=" gatsby-image-wrapper" style="position:relative;overflow:hidden"><div aria-hidden="true" style="width:100%;padding-bottom:62.5%"></div><noscript><picture><source type='image/webp' srcset="/static/94d397edce8ad49d486b39461057ff7d/a0b47/faq-account-1.webp 184w,
2/static/94d397edce8ad49d486b39461057ff7d/dd341/faq-account-1.webp 368w,
3/static/94d397edce8ad49d486b39461057ff7d/59e1b/faq-account-1.webp 736w,
4/static/94d397edce8ad49d486b39461057ff7d/98cf4/faq-account-1.webp 970w" sizes="(max-width: 736px) 100vw, 736px" /><source srcset="/static/94d397edce8ad49d486b39461057ff7d/b50a6/faq-account-1.png 184w,
5/static/94d397edce8ad49d486b39461057ff7d/59940/faq-account-1.png 368w,
6/static/94d397edce8ad49d486b39461057ff7d/135ab/faq-account-1.png 736w,
7/static/94d397edce8ad49d486b39461057ff7d/8c758/faq-account-1.png 970w" sizes="(max-width: 736px) 100vw, 736px" /><img loading="lazy" sizes="(max-width: 736px) 100vw, 736px" srcset="/static/94d397edce8ad49d486b39461057ff7d/b50a6/faq-account-1.png 184w,
8/static/94d397edce8ad49d486b39461057ff7d/59940/faq-account-1.png 368w,
9/static/94d397edce8ad49d486b39461057ff7d/135ab/faq-account-1.png 736w,
10/static/94d397edce8ad49d486b39461057ff7d/8c758/faq-account-1.png 970w" src="/static/94d397edce8ad49d486b39461057ff7d/135ab/faq-account-1.png" alt="Enter your email address" style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/></picture></noscript></div><h5 class="css-2mhypy e1wd9dw01">Login with a valid activation code</h5><p class="css-0 e1wd9dw01">If you&#x27;re on a subscription plan, the system automatically recognize the account and you&#x27;ll be asked to enter your activation code. You can find the activation email in your mailbox.</p><blockquote class="css-1tpedpo">The activation code is sent after purchasing a subscription plan.</blockquote><h5 class="css-2mhypy e1wd9dw01">Trialing Spirit Studio</h5><p class="css-0 e1wd9dw01">If you haven&#x27;t purchased a license yet you can trial Spirit for 7 days.</p><h5 class="css-2mhypy e1wd9dw01">Create an account</h5><p class="css-0 e1wd9dw01">Enter your first name and last name in order to create your Spirit account. Be sure to read our <a href="/privacy">Privacy Policy</a> and<!-- --> <a href="/terms">Terms of Service</a>.</p><p class="css-0 e1wd9dw01">Once you&#x27;ve logged in, you&#x27;ll receive an email confirming it&#x27;s you who logged in. This is an extra layer of security.</p><h5 class="css-2mhypy e1wd9dw01">Max devices reached?</h5><p class="css-0 e1wd9dw01">A Personal (single-user) license can be used on one computer only (unless you have a Volume license). If you want to run it on another Mac, you have to either buy one or more licenses or<!-- --> <a href="#how-do-i-reset-my-license">reset your existing license</a>.</p><h5 class="css-2mhypy e1wd9dw01">Unable to login?</h5><p class="css-0 e1wd9dw01">If, for some reason, you are locked out please contact<!-- --> <a href="mailto:[email protected]">support</a> and we&#x27;ll be glad to reset the license for you remotely.</p></div></div></div><div class="faq-item css-1200alc"><div id="how-do-i-reset-my-license"></div><div class="title css-bvjhbj"><h3 class="css-2mhypy e1wd9dw01">How do I reset my license?</h3></div><div class="content css-hwuxv0" style="opacity:0;height:0"><div style="transform:translate3d(20px,0,0)"><p class="css-0 e1wd9dw01">A Personal (single-user) license can be used on one computer only (unless you have a Volume license). If you want to run it on another Mac, you have to either buy one or more licenses or reset your existing license.</p><h5 class="css-2mhypy e1wd9dw01">Reset your license</h5><p class="css-0 e1wd9dw01">
10Do you still have access to the activated version of Spirit Studio? Follow these steps:</p><ol><li>Open your unlocked version of Spirit Studio.</li><li>Go to menu <span class="primary">Spirit → License</span>.</li><li>Click on the <strong>logout</strong> button in the Spirit License dialog.</li><li>To confirm and proceed logging out, click on <strong>Yes</strong>.</li><li>Now you can activate Spirit Studio on another device.</li></ol><p class="css-0 e1wd9dw01">Else, reach out to<!-- --> <a href="mailto:[email protected]">[email protected]</a> and we&#x27;ll be glad to reset the license for you.</p></div></div></div><div class="faq-item css-1200alc"><div id="im-unable-to-login-into-my-account"></div><div class="title css-bvjhbj"><h3 class="css-2mhypy e1wd9dw01">I&#x27;m unable to login into my account</h3></div><div class="content css-hwuxv0" style="opacity:0;height:0"><div style="transform:translate3d(20px,0,0)"><p class="css-0 e1wd9dw01">Please reach out to<!-- --> <a href="mailto:[email protected]">[email protected]</a> and describe what you&#x27;re experiencing (what steps did you take?) so we can help you more precisely.</p></div></div></div><div class="faq-item css-1200alc"><div id="id-like-to-add-team-members-to-my-license"></div><div class="title css-bvjhbj"><h3 class="css-2mhypy e1wd9dw01">I&#x27;d like to add team members to my license</h3></div><div class="content css-hwuxv0" style="opacity:0;height:0"><div style="transform:translate3d(20px,0,0)"><p class="css-0 e1wd9dw01">Unfortunately we don&#x27;t support team management at this very moment.</p><p class="css-0 e1wd9dw01">We&#x27;re currently developing a &quot;team&quot; tier which support account management. Here you&#x27;ll have the ability to grant and revoke access to team members.</p></div></div></div></div></div></section><section class="css-1vf1n2k"><div class="css-pm3agd"><h2 class="css-rwf1ch e1wd9dw01"><svg class="css-1rpb94q"><use xlink:href="#tune"></use></svg>Troubleshooting</h2><div class="faq-items"><div class="faq-item css-1200alc"><div id="do-my-animations-still-work-when-my-subscription-is-expired"></div><div class="title css-bvjhbj"><h3 class="css-2mhypy e1wd9dw01">Do my animations still work when my subscription is expired?</h3></div><div class="content css-hwuxv0" style="opacity:0;height:0"><div style="transform:translate3d(20px,0,0)"><p class="css-0 e1wd9dw01"><strong>Absolutely!</strong><br/><br/>Your created animations will run forever, no lock-in! With Spirit Studio you can edit and create animations on the fly, the output is just animation data that can be used with the open-source web player.</p><blockquote class="css-1tpedpo">You need Spirit Studio to create &amp; edit animations, the created animations are self-contained.</blockquote></div></div></div><div class="faq-item css-1200alc"><div id="why-do-i-need-to-install-a-chrome-extension"></div><div class="title css-bvjhbj"><h3 class="css-2mhypy e1wd9dw01">Why do I need to install a Chrome extension?</h3></div><div class="content css-hwuxv0" style="opacity:0;height:0"><div style="transform:translate3d(20px,0,0)"><p class="css-0 e1wd9dw01">Spirit Studio needs to communicate with your web page. The Chrome extension simply connects your web page to Spirit Studio and acts as a messager between your web page and Spirit Studio.<br/><br/><strong>Note for paranoids(like us)</strong>. The Chrome extension doesn&#x27;t store or send information to or from a server. It purely sends animation data and commands between the web page and Spirit Studio in order to support live editing.</p><blockquote class="css-1tpedpo"><strong>Note:</strong> The Chrome extension is only needed to live edit your animations on your web page. You don&#x27;t need the Chrome extension to be installed to play or control your animations.</blockquote></div></div></div><div class="faq-item css-1200alc"><div id="do-you-offer-an-extension-for-other-browsers"></div><div class="title css-bvjhbj"><h3 class="css-2mhypy e1wd9dw01">Do you offer an extension for other browsers?</h3></div><div class="content css-hwuxv0" style="opacity:0;height:0"><div style="transform:translate3d(20px,0,0)"><p class="css-0 e1wd9dw01">The extension is currently available for Chrome only.</p></div></div></div><div class="faq-item css-1200alc"><div id="i-cannot-select-elements-in-an-iframe"></div><div class="title css-bvjhbj"><h3 class="css-2mhypy e1wd9dw01">I cannot select elements in an iframe</h3></div><div class="content css-hwuxv0" style="opacity:0;height:0"><div style="transform:translate3d(20px,0,0)"><p class="css-0 e1wd9dw01">We are working hard to support hierarchical browsing contexts (like iframes). Currently the browser extension can access elements in the active document (parent browsing context).</p><p class="css-0 e1wd9dw01">This means that, at least for now, you won&#x27;t be able to select elements in an iframe, like codepen, codesandbox or jsbin examples.</p><blockquote class="css-1tpedpo">Although you can not select elements within an iframe, you can use the Web Player to play/control the animations. A workaround is to create the animation in a separate HTML file.</blockquote></div></div></div><div class="faq-item css-1200alc"><div id="how-to-embed-my-animation-with-the-web-player"></div><div class="title css-bvjhbj"><h3 class="css-2mhypy e1wd9dw01">How to embed my animation with the web player?</h3></div><div class="content css-hwuxv0" style="opacity:0;height:0"><div style="transform:translate3d(20px,0,0)"><p class="css-0 e1wd9dw01">The web player is open-source and can be found here:<!-- --> <a href="https://github.com/spirit/spirit" rel="noopener" target="_blank">https://github.com/spirit/spirit</a>.</p><p class="css-0 e1wd9dw01">The Web Player is developed to be powerful, yet easy to use. We decided to offer a simple version of the player that even Javascript newbies can understand and a slightly more advanced API to give you the control you need.</p><p class="css-0 e1wd9dw01"><a href="https://docs.spiritapp.io/web-player/simple-api.html" rel="noopener" target="_blank">Simple API:</a> </p><style data-emotion-css="k9m3qa">.css-k9m3qa{position:relative;max-width:100%;margin-bottom:2em;}</style><div class="css-k9m3qa"><style data-emotion-css="zat3ve">.css-zat3ve{background:#fbfbfb;margin:0;padding:16px 16px;overflow:auto;line-height:1.5;}</style><pre class="css-zat3ve"><style data-emotion-css="uhm0vc">.css-uhm0vc{color:#333;background:none;font-size:15px;font-family:'Inconsolata',monospace;text-align:left;white-space:pre;word-space:normal;word-break:normal;word-wrap:normal;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}@media (max-width:875px){.css-uhm0vc{font-size:14px;}}.css-uhm0vc .token.comment,.css-uhm0vc .token.prolog,.css-uhm0vc .token.doctype,.css-uhm0vc .token.cdata{color:#ababab;}.css-uhm0vc .token.punctuation{color:#666;}.css-uhm0vc .namespace{opacity:0.7;}.css-uhm0vc .token.property,.css-uhm0vc .token.tag,.css-uhm0vc .token.constant,.css-uhm0vc .token.symbol,.css-uhm0vc .token.deleted{color:#13b76c;}.css-uhm0vc .token.boolean,.css-uhm0vc .token.number{color:#1084e6;}.css-uhm0vc .token.selector,.css-uhm0vc .token.attr-name,.css-uhm0vc .token.string,.css-uhm0vc .token.char,.css-uhm0vc .token.builtin,.css-uhm0vc .token.inserted{color:#1084e6;}.css-uhm0vc .token.operator,.css-uhm0vc .token.entity,.css-uhm0vc .token.url,.css-uhm0vc .language-css .token.string,.css-uhm0vc .style .token.string,.css-uhm0vc .token.variable{color:#4EA8FF;}.css-uhm0vc .token.atrule,.css-uhm0vc .token.attr-value{color:#333;}.css-uhm0vc .token.function{color:#1084e6;}.css-uhm0vc .token.keyword{color:#4EA8FF;}.css-uhm0vc .token.regex,.css-uhm0vc .token.important{color:#1084e6;}.css-uhm0vc .token.important,.css-uhm0vc .token.bold{font-weight:bold;}.css-uhm0vc .token.italic{font-style:italic;}.css-uhm0vc .token.entity{cursor:help;}</style><code class="code-block css-uhm0vc"><span class="token comment">// auto load and play infinitely</span>
11spirit<span class="token punctuation">.</span><span class="token function">loadAnimation</span><span class="token punctuation">(</span><span class="token punctuation">{</span> path<span class="token operator">:</span> <span class="token string">'./my-animation.json'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div><p class="css-0 e1wd9dw01"><a href="https://docs.spiritapp.io/web-player/extended-api/" rel="noopener" target="_blank">Extended API:</a></p><div class="css-k9m3qa"><pre class="css-zat3ve"><code class="code-block css-uhm0vc"><span class="token comment">//load GSAP from CDN</span>
12spirit<span class="token punctuation">.</span><span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
13  <span class="token comment">//load animation</span>
14  spirit<span class="token punctuation">.</span><span class="token function">load</span><span class="token punctuation">(</span><span class="token string">'./my-animation.json'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>
15    <span class="token comment">//returns animation groups</span>
16    <span class="token parameter">groups</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
17      <span class="token comment">//get intro group and play it</span>
18      groups<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'intro'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">play</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
19    <span class="token punctuation">}</span>
20  <span class="token punctuation">)</span>
21<span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div><br/><p class="css-0 e1wd9dw01">Make sure to check out the <a href="/getstarted">Getting Started</a> page and watch the<!-- --> <a href="https://www.youtube.com/channel/UCFcDvk4xHeaFs5f5EycuZZA" rel="noopener" target="_blank">video tutorials</a> <!-- -->to get you up and running in no time.</p></div></div></div></div></div></section><div class="css-pm3agd"><p class="css-0 e1wd9dw01">Can&#x27;t find your answer? Drop us<!-- --> <a href="mailto:[email protected]">an email</a> and we&#x27;ll get back to you as soon as we can.</p></div></div></main><style data-emotion-css="us6j8h">.css-us6j8h{border-top:1px solid #efefef;padding:calc(5% + 1em) 2em;}@media(max-width:600px){.css-us6j8h{padding-top:0;}}</style><footer class="footer css-us6j8h"><style data-emotion-css="obu5zj">.css-obu5zj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:14px;max-width:71.25rem;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}@media(min-width:800px){.css-obu5zj{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}}@media(min-width:1000px){.css-obu5zj{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}}.css-obu5zj a{color:inherit;}@media (hover:hover){.css-obu5zj a:hover{-webkit-transition:color .2s ease;transition:color .2s ease;color:#4EA8FF;}}@media(max-width:600px){.css-obu5zj{margin:0 -2em;padding:0;width:auto;}}</style><style data-emotion-css="st7xgg">.css-st7xgg{padding:0 2em;width:100%;max-width:71.25rem;margin:0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:14px;max-width:71.25rem;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}@media(min-width:800px){.css-st7xgg{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}}@media(min-width:1000px){.css-st7xgg{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}}.css-st7xgg a{color:inherit;}@media (hover:hover){.css-st7xgg a:hover{-webkit-transition:color .2s ease;transition:color .2s ease;color:#4EA8FF;}}@media(max-width:600px){.css-st7xgg{margin:0 -2em;padding:0;width:auto;}}</style><div class="css-st7xgg"><style data-emotion-css="4f408d">.css-4f408d{list-style:none;margin:0;padding:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;width:100%;}@media(min-width:800px){.css-4f408d{width:100%;}}@media(min-width:1000px){.css-4f408d{width:60%;}}@media(max-width:600px){.css-4f408d{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}}</style><ul class="topics css-4f408d"><style data-emotion-css="1b1h0sq">.css-1b1h0sq{-webkit-flex:1;-ms-flex:1;flex:1;}@media(max-width:600px){.css-1b1h0sq{padding:0 8%;border-bottom:1px solid #efefef;position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent;}.css-1b1h0sq::before{content:"";position:absolute;top:27px;right:8%;width:14px;height:7px;background:url(/c2640d0f7b7481bbc7d7c5846f1b6381.svg);-webkit-transition:-webkit-transform .1s .1s ease-out;-webkit-transition:transform .1s .1s ease-out;transition:transform .1s .1s ease-out;}.css-1b1h0sq.footer-topic-open::before{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}}</style><li class=" css-1b1h0sq"><style data-emotion-css="y6h65b">.css-y6h65b{font-weight:400;margin-top:0;margin-bottom:2em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}@media(max-width:600px){.css-y6h65b{margin-top:1em;margin-bottom:1em;}}</style><style data-emotion-css="3xad03">.css-3xad03{margin-top:36px;margin-bottom:16px;line-height:1.5;font-weight:700;color:#000;font-size:17px;font-weight:400;margin-top:0;margin-bottom:2em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}@media(max-width:600px){.css-3xad03{margin-top:1em;margin-bottom:1em;}}</style><h5 class="css-3xad03 e1wd9dw01">Spirit</h5><style data-emotion-css="d7gsz0">.css-d7gsz0 ul{list-style:none;margin:0;padding:0;}.css-d7gsz0 li + li{margin-top:0.5em;}@media(max-width:600px){.css-d7gsz0 li + li{margin-top:1em;font-size:15px;}}@media(max-width:600px){.css-d7gsz0{max-height:0;overflow:hidden;-webkit-transition:max-height .25s ease-in-out;transition:max-height .25s ease-in-out;}.footer-topic-open .css-d7gsz0{max-height:var(--max-height,400);}.css-d7gsz0 li:last-of-type{padding-bottom:2em;}}</style><div style="--max-height:0px" class="css-d7gsz0"><ul><style data-emotion-css="1kyoyy3">@media(max-width:600px){.css-1kyoyy3:last-child{padding-bottom:16px;}}</style><li class="css-1kyoyy3"><a href="/getstarted">Get Started</a></li><li class="css-1kyoyy3"><a href="/playground">Playground</a></li><li class="css-1kyoyy3"><a href="https://www.youtube.com/channel/UCFcDvk4xHeaFs5f5EycuZZA" rel="noopener" target="_blank">Tutorials</a></li><li class="css-1kyoyy3"><a href="https://docs.spiritapp.io" rel="noopener" target="_blank">Docs</a></li></ul></div></li><li class=" css-1b1h0sq"><h5 class="css-3xad03 e1wd9dw01">Support</h5><div style="--max-height:0px" class="css-d7gsz0"><ul><li class="css-1kyoyy3"><a href="/faq">FAQ</a></li><li class="css-1kyoyy3"><a href="mailto:[email protected]">Contact</a></li></ul></div></li><li class=" css-1b1h0sq"><h5 class="css-3xad03 e1wd9dw01">Terms</h5><div style="--max-height:0px" class="css-d7gsz0"><ul><li class="css-1kyoyy3"><a href="/terms">Terms of Service</a></li><li class="css-1kyoyy3"><a href="/privacy">Privacy Policy</a></li></ul></div></li></ul><style data-emotion-css="ckw7xj">.css-ckw7xj{width:100%;margin-left:auto;margin-top:64px;}@media(min-width:800px){.css-ckw7xj{width:100%;margin-top:64px;}}@media(min-width:1000px){.css-ckw7xj{width:35%;margin-top:0;}}@media(max-width:600px){.css-ckw7xj{padding:0 8%;margin-top:16px;}}</style><div class="social css-ckw7xj"><style data-emotion-css="ydqua4">.css-ydqua4{font-size:13px;color:#ccc;}</style><p class="css-ydqua4 e1wd9dw01">Copyright © <!-- -->2026<!-- --> Inlet.</p></div></div></footer></div></div><div id="app-overlays"></div></div></div>
21<script src="/polyfill-io.js"></script>
21<script>
22  
23  
24  if(true) {
25    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
26    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
27    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
28    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
29  }
30  if (typeof ga === "function") {
31    ga('create', 'UA-106053532-1', 'auto', {});
32      
33      
34      
35      
36      
37      }</script>
37<script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/faq/";/*]]>*/</script>
37<script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"app":["/app-93530084ba20a0237c77.js"],"component---node-modules-gatsby-plugin-offline-app-shell-js":["/component---node-modules-gatsby-plugin-offline-app-shell-js-5f84b615c2cc64017e84.js"],"component---src-pages-404-tsx":["/component---src-pages-404-tsx-73a2c109ae2cd068a9c9.js"],"component---src-pages-discontinue-tsx":["/component---src-pages-discontinue-tsx-9b447eee26fe5fb2f4af.js"],"component---src-pages-download-index-tsx":["/component---src-pages-download-index-tsx-970d4528f37b731ddbc3.js"],"component---src-pages-faq-tsx":["/component---src-pages-faq-tsx-d5d8ba4d1b7eb474c84d.js"],"component---src-pages-getstarted-tsx":["/component---src-pages-getstarted-tsx-cb834680ae1366c0c4a6.js"],"component---src-pages-index-tsx":["/component---src-pages-index-tsx-34a06bb7f49845582ad7.js"],"component---src-pages-playground-tsx":["/component---src-pages-playground-tsx-7dda870d66e53a4888ec.js"],"component---src-pages-privacy-tsx":["/component---src-pages-privacy-tsx-4754dc0003dc335c33fd.js"],"component---src-pages-terms-tsx":["/component---src-pages-terms-tsx-41da5b704ef90d032aec.js"],"component---src-pages-docs-account-mdx":["/component---src-pages-docs-account-mdx-9b5fc7829211dcb67412.js"],"component---src-pages-docs-api-access-mdx":["/component---src-pages-docs-api-access-mdx-33b999054afd58c0d584.js"],"component---src-pages-docs-api-create-mdx":["/component---src-pages-docs-api-create-mdx-5fefefe5b5d8010ffc67.js"],"component---src-pages-docs-api-custom-cdn-mdx":["/component---src-pages-docs-api-custom-cdn-mdx-02fd957f959236f8b931.js"],"component---src-pages-docs-api-events-mdx":["/component---src-pages-docs-api-events-mdx-cad0d5b0253e1d8e05e5.js"],"component---src-pages-docs-api-gsap-plugins-mdx":["/component---src-pages-docs-api-gsap-plugins-mdx-03c41ee013e6d7adc0c2.js"],"component---src-pages-docs-api-index-mdx":["/component---src-pages-docs-api-index-mdx-c1dc94bd8308255b2bc8.js"],"component---src-pages-docs-api-load-mdx":["/component---src-pages-docs-api-load-mdx-8cb847ce83edfc4108fc.js"],"component---src-pages-docs-api-shorthand-mdx":["/component---src-pages-docs-api-shorthand-mdx-0d8526cc9f24faef1a3a.js"],"component---src-pages-docs-api-timeline-construction-mdx":["/component---src-pages-docs-api-timeline-construction-mdx-60d731fe229d4800a423.js"],"component---src-pages-docs-basics-connect-mdx":["/component---src-pages-docs-basics-connect-mdx-738580d0a0efe0d533bd.js"],"component---src-pages-docs-basics-create-animation-group-mdx":["/component---src-pages-docs-basics-create-animation-group-mdx-0a6704f25b2740ad446b.js"],"component---src-pages-docs-basics-create-index-mdx":["/component---src-pages-docs-basics-create-index-mdx-318083cad55ee1557695.js"],"component---src-pages-docs-basics-create-resolve-elements-mdx":["/component---src-pages-docs-basics-create-resolve-elements-mdx-356dff3c0ec8fa30c996.js"],"component---src-pages-docs-browser-support-mdx":["/component---src-pages-docs-browser-support-mdx-00cb2b74000254333442.js"],"component---src-pages-docs-examples-index-mdx":["/component---src-pages-docs-examples-index-mdx-554e726b28053c6b3420.js"],"component---src-pages-docs-examples-tutorial-animated-menu-icon-mdx":["/component---src-pages-docs-examples-tutorial-animated-menu-icon-mdx-b7747e1ee83fd393f451.js"],"component---src-pages-docs-import-export-mdx":["/component---src-pages-docs-import-export-mdx-dbcd173184259b41df1f.js"],"component---src-pages-docs-index-mdx":["/component---src-pages-docs-index-mdx-c921c8617eae4f5351c8.js"],"component---src-pages-docs-installation-mdx":["/component---src-pages-docs-installation-mdx-b109098a3afc5999ddfc.js"],"component---src-pages-docs-learn-mdx":["/component---src-pages-docs-learn-mdx-5b64c8cfd225378a9657.js"],"component---src-pages-docs-studio-container-mdx":["/component---src-pages-docs-studio-container-mdx-5479f72e53e70e2dc36e.js"],"component---src-pages-docs-webplayer-mdx":["/component---src-pages-docs-webplayer-mdx-4eaa20c36b39a7a732cb.js"],"component---src-pages-docs-studio-index-mdx":["/component---src-pages-docs-studio-index-mdx-bc6fad8fd03522a8777c.js"],"youtube-overlay":["/youtube-overlay-cf70a3729c60b11a8c59.js"],"carousel-animations":["/carousel-animations-d5e31cdf196d3b14e6be.js"]};/*]]>*/</script>
37<script src="/webpack-runtime-8183a9682167c470dea1.js" async=""></script>
37<script src="/85-e11d03c2b8d0b87f4026.js" async=""></script>
37<script src="/86-d1eface8ee5f23fad0d4.js" async=""></script>
37<script src="/87-06be2e33357cd636172c.js" async=""></script>
37<script src="/88-dae92ce6f4bec8eb34c4.js" async=""></script>
37<script src="/84-d09ccb1d9bf9b8499319.js" async=""></script>
37<script src="/90-277df97b80f981b5c3c6.js" async=""></script>
37<script src="/91-0521b97df0dc9fdc3c33.js" async=""></script>
37<script src="/92-34de958f1abbbf331bd9.js" async=""></script>
37<script src="/93-1b1fefc1b6869b305bf0.js" async=""></script>
37<script src="/94-2d506cb716894ef6e697.js" async=""></script>
37<script src="/83-022dcfda84307b1756a2.js" async=""></script>
37<script src="/95-fbb45d9efd6eddba206e.js" async=""></script>
37<script src="/82-bae1c15a61c6fcb255b1.js" async=""></script>
37<script src="/96-db9a12207b2f1be0c10d.js" async=""></script>
37<script src="/81-e3501696180ad0c51930.js" async=""></script>
37<script src="/97-ab0b6efa34af97a74fc4.js" async=""></script>
37<script src="/80-5685e39c58c42096d4fa.js" async=""></script>
37<script src="/98-db78e19e2b30913f8f4f.js" async=""></script>
37<script src="/79-c0fa549509c074ef9a7e.js" async=""></script>
37<script src="/99-9842c0659258754f3dde.js" async=""></script>
37<script src="/78-ad3244631aa85070ee8c.js" async=""></script>
37<script src="/100-40f119864eae919c5ed4.js" async=""></script>
37<script src="/77-fcccebf3a38f8b8337d7.js" async=""></script>
37<script src="/101-1393a624da33556ee28d.js" async=""></script>
37<script src="/76-83ad56cf35d1cdb6ef90.js" async=""></script>
37<script src="/102-536398e5512e3f5b0d23.js" async=""></script>
37<script src="/75-3e7130721e2fd1a2bcc0.js" async=""></script>
37<script src="/103-a2218be90c9f46357a4a.js" async=""></script>
37<script src="/74-296d7beed316ef7ce67f.js" async=""></script>
37<script src="/104-52f17c19a9081b67c37a.js" async=""></script>
37<script src="/73-377a1a8a5007f29e9161.js" async=""></script>
37<script src="/105-46955fbb838f55015154.js" async=""></script>
37<script src="/72-ae44ee874f807d62c399.js" async=""></script>
37<script src="/106-b5be0cd03c385b3ae350.js" async=""></script>
37<script src="/71-ce7e4ed37166c25088f3.js" async=""></script>
37<script src="/107-d85e6974ae97f01f365d.js" async=""></script>
37<script src="/70-1ffe453c413a6ddba5f7.js" async=""></script>
37<script src="/108-9849219617bdf11eb630.js" async=""></script>
37<script src="/69-149f0395620aa9c8f0a4.js" async=""></script>
37<script src="/109-09fca45de7393190b41d.js" async=""></script>
37<script src="/68-3eca234d411195f5cfac.js" async=""></script>
37<script src="/110-04b499d6f054aaeca330.js" async=""></script>
37<script src="/67-2ee8c2900213baae200d.js" async=""></script>
37<script src="/111-0116d2a5da0f585ad140.js" async=""></script>
37<script src="/66-743a1e7dee7351dfdc45.js" async=""></script>
37<script src="/112-43ea43063addabfcd5a1.js" async=""></script>
37<script src="/65-169b8253ae1f2bbd9d24.js" async=""></script>
37<script src="/113-b0c1dc74702ecb3bcfde.js" async=""></script>
37<script src="/64-60bce2926a578edde214.js" async=""></script>
37<script src="/114-9f05e05395c51a1e655a.js" async=""></script>
37<script src="/63-76ccd1cbd0ce36b0eed6.js" async=""></script>
37<script src="/115-3ea3377f4909ce4d18aa.js" async=""></script>
37<script src="/62-3656114a860c6a5473ca.js" async=""></script>
37<script src="/116-098448c9e65192e4e860.js" async=""></script>
37<script src="/61-30582d7d85d4891c3eea.js" async=""></script>
37<script src="/117-5f50283a8da1745d0dc6.js" async=""></script>
37<script src="/60-b053ab043f1d6a7cb7bf.js" async=""></script>
37<script src="/118-640c99a9c983ae678aed.js" async=""></script>
37<script src="/59-72bfb88ece1cd1873286.js" async=""></script>
37<script src="/119-500a2e5dfc33ce73362a.js" async=""></script>
37<script src="/58-83dc0745efa9916f02b3.js" async=""></script>
37<script src="/120-1136f77804eb00784a47.js" async=""></script>
37<script src="/57-00d28e824a317bf27bed.js" async=""></script>
37<script src="/121-7eb4809dd0880e45468f.js" async=""></script>
37<script src="/16-c2f409fbdc870e8c9a4e.js" async=""></script>
37<script src="/122-3beddab13c3dfc6c1191.js" async=""></script>
37<script src="/15-d9f64bbececc550bc333.js" async=""></script>
37<script src="/123-6d5f4098bb6f90e159a7.js" async=""></script>
37<script src="/14-de60c00a81d993063a8b.js" async=""></script>
37<script src="/124-75ff468be77ac951672e.js" async=""></script>
37<script src="/13-3aea77e2b05cdc11ac2e.js" async=""></script>
37<script src="/125-96d28d06363de3ed5f0e.js" async=""></script>
37<script src="/12-df703a331e986a6851ab.js" async=""></script>
37<script src="/126-03df89670e42a83845eb.js" async=""></script>
37<script src="/11-ddf5cf9af32bcb660a02.js" async=""></script>
37<script src="/127-3fea1ceaa4819739efc6.js" async=""></script>
37<script src="/10-beefd60aaadeb863165d.js" async=""></script>
37<script src="/128-60fea3d4e731170c01b6.js" async=""></script>
37<script src="/9-e393339280ac14b5122d.js" async=""></script>
37<script src="/129-fd432e4ef2c68d37a886.js" async=""></script>
37<script src="/8-2aade2a260a37b2f6a9a.js" async=""></script>
37<script src="/130-859b6815f1990171bf57.js" async=""></script>
37<script src="/7-52831a00796a047b81aa.js" async=""></script>
37<script src="/131-df7de5374ef6160073a7.js" async=""></script>
37<script src="/6-d3b1a9ae9f95732b748a.js" async=""></script>
37<script src="/132-03b65bd2e70347a259ea.js" async=""></script>
37<script src="/5-9f5d155d2b83a12bcb96.js" async=""></script>
37<script src="/133-37f2857d60ef685e79c7.js" async=""></script>
37<script src="/4-82ca2287011ca59c0c6f.js" async=""></script>
37<script src="/134-1a709321b3b565f02aae.js" async=""></script>
37<script src="/3-779466b0d57b9e2a921f.js" async=""></script>
37<script src="/135-210382c7dcfe16e1784d.js" async=""></script>
37<script src="/2-82ab216937dadcb8400b.js" async=""></script>
37<script src="/136-7ed326de217771c4fa8a.js" async=""></script>
37<script src="/1-6f6c4d4a11cb69cfe664.js" async=""></script>
37<script src="/137-77eb4582aa6919e68988.js" async=""></script>
37<script src="/0-632ffa25b609b7f06ae3.js" async=""></script>
37<script src="/138-c72ec611a3714e6aa660.js" async=""></script>
37<script src="/56-76104a4c94c4f21f95e1.js" async=""></script>
37<script src="/139-60618653e359be0b8a4d.js" async=""></script>
37<script src="/app-93530084ba20a0237c77.js" async=""></script>
37<script src="/140-3710fe2de3276834ba4c.js" async=""></script>
37<script src="/commons-d7ccb9dea3f8a76e6924.js" async=""></script>
37<script src="/141-15c20819537f91f4862e.js" async=""></script>
37<script src="/142-24e146bd46b16662faa9.js" async=""></script>
37<script src="/component---src-pages-faq-tsx-d5d8ba4d1b7eb474c84d.js" async=""></script>
37<script src="/89-bc03e54a96d061eb8416.js" async=""></script>
37</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.