index.html

<!DOCTYPE html>
<html>
  <head>
    <!-- Site made with Mobirise Website Builder v5.5.8, https://mobirise.com -->
    <title>svgMotion: A free and open source vector animation tool.</title>
    <meta name="description" content="A free and open source vector animation tool">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="generator" content="Mobirise v5.5.8, mobirise.com">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
    <link rel="shortcut icon" href="assets/images/logo.svg" type="image/x-icon">
    <meta property="og:url"         content="https://michaelsboost.com/svgMotion" />
    <meta property="og:type"        content="website" />
    <meta property="og:title"       content="svgMotion" />
    <meta property="og:description" content="A vector animation tool" />
    <meta property="og:image"       content="https://raw.githubusercontent.com/michaelsboost/svgMotion/gh-pages/header.png" />
    
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap-grid.min.css">
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap-reboot.min.css">
    <link rel="stylesheet" href="assets/dropdown/css/style.css">
    <link rel="stylesheet" href="assets/socicon/css/styles.css">
    <link rel="stylesheet" href="assets/theme/css/style.css">
    <link rel="preload" href="https://fonts.googleapis.com/css?family=Jost:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript>
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Jost:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i&display=swap">
    </noscript>
    <link rel="preload" as="style" href="assets/mobirise/css/mbr-additional.css">
    <link rel="stylesheet" href="assets/mobirise/css/mbr-additional.css" type="text/css">
  </head>
  <body>
    <section data-bs-version="5.1" class="menu menu2 cid-sCO9eiXOnr" once="menu" id="menu2-0">
      <nav class="navbar navbar-dropdown navbar-fixed-top navbar-expand-lg">
        <div class="container">
          <div class="navbar-brand">
            <span class="navbar-logo">
              <a href="index.html#home">
                <img src="assets/images/logo.svg" alt="svgMotion" style="height: 3rem;">
              </a>
            </span>
            <span class="navbar-caption-wrap"><a class="navbar-caption text-black display-7" href="index.html#home">svgMotion</a></span>
          </div>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-bs-toggle="collapse" data-target="#navbarSupportedContent" data-bs-target="#navbarSupportedContent" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <div class="hamburger">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </div>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav nav-dropdown" data-app-modern-menu="true">
              <li class="nav-item">
               <a class="nav-link link text-black text-primary display-4" href="index.html#learn">Learn</a>
              </li>
              <li class="nav-item">
                <a class="nav-link link text-black text-primary display-4" href="index.html#downloads">Downloads</a>
              </li>
              <li class="nav-item">
                <a class="nav-link link text-black text-primary display-4" href="index.html#creator">Creator</a>
              </li>
              <li class="nav-item">
                <a class="nav-link link text-black text-primary display-4" href="index.html#share">Share</a>
              </li>
              <li class="nav-item">
                <a class="nav-link link text-black text-primary display-4" href="https://michaelsboost.com/donate/" target="_blank">
                  <svg style="isolation:isolate; height: 26px;" viewBox="0 0 512 512">
                    <g transform="matrix(2.1 0 0 2.1 -302 -230)">
                      <g transform="rotate(45 294 225.115)">
                        <rect height="141" width="124.00001" x="231.99999" y="185" fill="#e85b46"></rect>
                        <circle cx="294" cy="187" r="62.76942" fill="#e85b46"></circle>
                      </g>
                      <g transform="rotate(-45 237.721 225.721)">
                        <rect height="141" width="124.00001" x="175.72065" y="185.60572" fill="#e85b46"></rect>
                        <circle cx="237.72066" cy="187.60572" r="62.76942" fill="#e85b46"></circle>
                      </g>
                    </g>
                  </svg>
                </a>
              </li>
            </ul>

            <div class="navbar-buttons mbr-section-btn">
             <a class="btn btn-primary display-4" href="release/">Launch Now</a>
            </div>
          </div>
        </div>
      </nav>
    </section>

    <section data-bs-version="5.1" class="header16 cid-sCOaccBTl2" id="home">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-12 col-lg-10">
            <h1 class="mbr-section-title mbr-fonts-style mb-3 display-1">
              <strong>svgMotion</strong>
            </h1>
            <p class="mbr-text mbr-fonts-style display-7">A free and open source vector animation tool.</p>
            <div class="mbr-section-btn mt-3">
              <a class="btn btn-primary display-4" href="release/">Launch Now!</a>
            </div>
            <div class="video-wrapper mt-4">
              <iframe class="mbr-embedded-video" src="https://www.youtube.com/embed/aVbSVMdjlDM?rel=0&amp;amp;mute=0&amp;showinfo=0&amp;autoplay=0&amp;loop=0" width="1280" height="720" frameborder="0" allowfullscreen></iframe>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section data-bs-version="5.1" class="video2 cid-sCOdQMmJrj" id="learn">
      <div class="container">
        <div class="mbr-section-head">
          <h4 class="mbr-section-title mbr-fonts-style mb-0 display-2">
            <strong>Learn the basics to svgMotion</strong></h4>
          <h5 class="mbr-section-subtitle mbr-fonts-style mb-0 mt-2 display-7">A getting started guide to help you learn how to use svgMotion.</h5>
        </div>
        <div class="row justify-content-center mt-4">
          <div class="col-12 col-md-10 video-block">
            <div class="video-wrapper">
              <iframe class="mbr-embedded-video" src="https://www.youtube.com/embed/Jh5t8xbshbM?rel=0&amp;amp;mute=0&amp;showinfo=0&amp;autoplay=0&amp;loop=0" width="1280" height="720" frameborder="0" allowfullscreen></iframe>
            </div>
<!--            <p class="mbr-text pt-2 mbr-fonts-style display-4">Designed, produced and directed by <a href="https://michaelsboost.com/" class="text-primary">Michael Schwartz</a>.</p>-->
          </div>
        </div>
      </div>
    </section>

    <section data-bs-version="5.1" class="content2 cid-sY4kngake7" id="downloads">
      <div class="container">
        <div class="mbr-section-head">
          <h4 class="mbr-section-title mbr-fonts-style align-center mb-0 display-2">
            <strong>The Power of svgMotion</strong>
          </h4>
          <h5 class="mbr-section-subtitle mbr-fonts-style align-center mb-0 mt-2 display-5">See what you can do with svgMotion!!</h5>
        </div>
        <div class="row mt-4">
          <div class="item features-image сol-12 col-md-6 col-lg-3">
            <div class="item-wrapper">
              <div class="item-img">
                <a href="https://michaelsboost.gumroad.com/l/ouomy" target="_blank">
                  <img src="assets/store/bouncing-ball.gif" title="Bouncing Ball Tween">
                </a>
              </div>
            </div>
          </div>
          <div class="item features-image сol-12 col-md-6 col-lg-3">
            <div class="item-wrapper">
              <div class="item-img">
                <a href="https://michaelsboost.gumroad.com/l/bltibf" target="_blank">
                  <img src="assets/store/framebyframe.gif" title="Frame By Frame Walk Cycle">
                </a>
              </div>
            </div>
          </div>
          <div class="item features-image сol-12 col-md-6 col-lg-3">
            <div class="item-wrapper">
              <div class="item-img">
                <a href="https://michaelsboost.gumroad.com/l/atucg" target="_blank">
                  <img src="assets/store/flying-plane-small.gif" title="Flying Plane Following Path">
                </a>
              </div>
            </div>
          </div>
          <div class="item features-image сol-12 col-md-6 col-lg-3">
            <div class="item-wrapper">
              <div class="item-img">
                <a href="https://michaelsboost.gumroad.com/l/utakf" target="_blank">
                  <img src="assets/store/character-rig-animation.gif" title="Character Rig Animation">
                </a>
              </div>
            </div>
          </div>
        </div>
        
        <div class="row mt-4">
          <div class="item features-image сol-12 col-md-6 col-lg-3">
            <div class="item-wrapper">
              <div class="item-img">
                <a href="https://michaelsboost.gumroad.com/l/lzggo" target="_blank">
                  <img src="assets/store/hamburger-menu.gif" title="Hamburger menu">
                </a>
              </div>
            </div>
          </div>
          <div class="item features-image сol-12 col-md-6 col-lg-3">
            <div class="item-wrapper">
              <div class="item-img">
                <a href="https://michaelsboost.gumroad.com/l/jqmiu" target="_blank">
                  <img src="assets/store/countdown.gif" title="Countdown Timer">
                </a>
              </div>
            </div>
          </div>
          <div class="item features-image сol-12 col-md-6 col-lg-3">
            <div class="item-wrapper">
              <div class="item-img">
                <a href="https://michaelsboost.gumroad.com/l/bwrib" target="_blank">
                  <img src="assets/store/newspaper.gif" title="Newspaper with Magnifying Glass Following Path">
                </a>
              </div>
            </div>
          </div>
          <div class="item features-image сol-12 col-md-6 col-lg-3">
            <div class="item-wrapper">
              <div class="item-img">
                <a href="https://michaelsboost.gumroad.com/l/avqbu" target="_blank">
                  <img src="assets/store/x-ray.gif" title="X-ray ClipPath's">
                </a>
              </div>
            </div>
          </div>
        </div>
<!--
        <div class="row mt-4">
          <div class="item features-image сol-12 col-md-6 col-lg-4">
            <div class="item-wrapper">
              <div class="item-img">
                <a href="https://michaelsboost.gumroad.com/l/lzggo" target="_blank">
                  <img src="assets/store/hamburger-menu.gif" title="Hamburger menu">
                </a>
              </div>
            </div>
          </div>
          <div class="item features-image сol-12 col-md-6 col-lg-4">
            <div class="item-wrapper">
              <div class="item-img">
                <img src="assets/images/product5.jpg" alt="" title="">
                <a href="https://michaelsboost.gumroad.com/l/jqmiu" target="_blank">
                  <img src="assets/store/countdown.gif" title="Countdown Timer">
                </a>
              </div>
            </div>
          </div>
          <div class="item features-image сol-12 col-md-6 col-lg-4">
            <div class="item-wrapper">
              <div class="item-img">
                <a href="https://michaelsboost.gumroad.com/l/bwrib" target="_blank">
                  <img src="assets/store/newspaper.gif" title="Newspaper with Magnifying Glass Following Path">
                </a>
              </div>
            </div>
          </div>
          <div class="item features-image сol-12 col-md-6 col-lg-4">
            <div class="item-wrapper">
              <div class="item-img">
                <img src="assets/images/product3.jpg" alt="" title="">
              </div>
            </div>
          </div>
        </div>
-->
      </div>
    </section>

    <section data-bs-version="5.1" class="testimonials1 cid-sCOgBwvf4e" id="creator">
      <div class="container">
        <h3 class="mbr-section-title mbr-fonts-style align-center mb-4 display-2">
          <strong>The Creator of svgMotion</strong><br></h3>
        <div class="row align-items-center">
          <div class="col-12 col-md-6">
            <div class="image-wrapper">
              <img src="assets/images/developer-720x720.jpg" alt="Michael Schwartz">
            </div>
          </div>
          <div class="col-12 col-md">
            <div class="text-wrapper">
              <p class="mbr-text mbr-fonts-style mb-4 display-7">I love making vector animations but finding an app to make vector animations on a phone simply didn't exist. Desktop users have <a href="https://www.adobe.com/products/animate.html" class="text-primary" target="_blank">Animate CC</a>, <a href="https://www.adobe.com/products/aftereffects.html" class="text-primary" target="_blank">After Effects</a>, <a href="https://www.toonboom.com/" class="text-primary" target="_blank">Toon Boom</a>, <a href="https://rive.app/" class="text-primary" target="_blank">Rive</a>, <a href="https://blender.org/" class="text-primary" target="_blank">Blender</a>, <a href="https://www.synfig.org/" class="text-primary" target="_blank">Synfig Studio</a>, <a href="https://www.haikuanimator.com/" class="text-primary" target="_blank">Haiku Animator</a>, <a href="https://www.keyshapeapp.com/" class="text-primary" target="_blank">Keyshape</a>, <a href="https://glaxnimate.mattbas.org/" class="text-primary" target="_blank">Glaxnimate</a>, <a href="https://maurycyliebner.github.io/index" class="text-primary" target="_blank">Enve</a> etc: If you're on a Chromebook you have <a href="https://www.animatron.com/studio/" class="text-primary" target="_blank">Animatron Studio</a>, <a href="https://tweenui.com/animator/" class="text-primary" target="_blank">TweenUI</a>, <a href="https://www.wickeditor.com/" class="text-primary" target="_blank">Wick Editor</a>, <a href="https://www.expressivesuite.com/" class="text-primary" target="_blank">Expressive Animator</a>, and even <a href="http://anigen.org/" class="text-primary" target="_blank">aniGen</a> but mobile users have been left in the dark far too long. That's why I decided to build <a href="https://michaelsboost.github.io/svgMotion" class="text-primary" target="_blank">svgMotion</a>!</p>

              <p class="name mbr-fonts-style mb-1 display-4">
                <a href="https://michaelsboost.com/" target="_blank"><strong>Michael Schwartz</strong></a>

                <span>&nbsp;</span>

                <a href="http://facebook.com/michaelsboost" target="_blank">
                  <span class="socicon-facebook socicon mbr-iconfont mbr-iconfont-social"></span>
                </a>
                &nbsp;
                <a href="http://twitter.com/michaelsboost" target="_blank">
                  <span class="socicon-twitter socicon mbr-iconfont mbr-iconfont-social"></span>
                </a>
                &nbsp;
                <a href="http://instagram.com/michaelsboost" target="_blank">
                  <span class="socicon-instagram socicon mbr-iconfont mbr-iconfont-social"></span>
                </a>
                &nbsp;
                <a href="https://michaelsboost.com/youtube" target="_blank">
                  <span class="socicon-youtube socicon mbr-iconfont mbr-iconfont-social"></span>
                </a>
                &nbsp;
                <a href="https://github.com/sponsors/michaelsboost" target="_blank">
                  <span class="socicon-github socicon mbr-iconfont mbr-iconfont-social"></span>
                </a>
                &nbsp;
                <a href="https://www.paypal.com/paypalme/mikethedj4" target="_blank">
                  <span class="socicon-paypal socicon mbr-iconfont mbr-iconfont-social"></span>
                </a>
                &nbsp;
                <a href="https://michaelsboost.com/donate/" target="_blank">
                  <strong>$</strong>
                </a>
              </p>
              <p class="position mbr-fonts-style display-4">
                <strong>Lead Project Developer</strong>
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section data-bs-version="5.1" class="social1 cid-sCOdhP45QK" id="share">
      <div class="container">
        <div class="media-container-row">
          <div class="col-12">
            <h3 class="mbr-section-title mb-3 align-center mbr-fonts-style display-2">
              <strong>Share this Page!</strong>
            </h3>
            <div>
              <div class="mbr-social-likes align-center">
                <span class="btn btn-social socicon-bg-facebook facebook m-2">
                  <i class="socicon socicon-facebook"></i>
                </span>
                <span class="btn btn-social twitter socicon-bg-twitter m-2">
                  <i class="socicon socicon-twitter"></i>
                </span>
                <span class="btn btn-social vkontakte socicon-bg-vkontakte m-2">
                  <i class="socicon socicon-vkontakte"></i>
                </span>
                <span class="btn btn-social odnoklassniki socicon-bg-odnoklassniki m-2">
                  <i class="socicon socicon-odnoklassniki"></i>
                </span>
                <span class="btn btn-social pinterest socicon-bg-pinterest m-2">
                  <i class="socicon socicon-pinterest"></i>
                </span>
                <span class="btn btn-social mailru socicon-bg-mail m-2">
                  <i class="socicon socicon-mail"></i>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section data-bs-version="5.1" class="footer3 cid-sCOdq38RbG" once="footers" id="footer3-f">
      <div class="container">
        <div class="media-container-row align-center mbr-white">
          <div class="row row-links">
            <ul class="foot-menu">
              <li class="foot-menu-item mbr-fonts-style display-7">
                <a href="#home" class="text-primary">Home</a>
              </li>
              <li class="foot-menu-item mbr-fonts-style display-7">
                <a href="index.html#learn" class="text-primary">Learn</a>
              </li>
              <li class="foot-menu-item mbr-fonts-style display-7">
                <a href="index.html#downloads" class="text-primary">Downloads</a>
              </li>
              <li class="foot-menu-item mbr-fonts-style display-7">
                <a href="index.html#creator" class="text-primary">Creator</a>
              </li>
              <li class="foot-menu-item mbr-fonts-style display-7">
                <a href="index.html#share" class="text-primary">Share</a>
              </li>
              <li class="foot-menu-item mbr-fonts-style display-7">
                <a href="https://michaelsboost.com/donate/" class="text-primary" target="_blank"><span style="color: #e85b46;">❤</span></a>
              </li>
            </ul>
          </div>

          <div class="row row-copirayt">
            <p class="mbr-text mb-0 mbr-fonts-style mbr-white align-center display-7">
              © Copyright 2021 - 2022 <a href="https://michaelsboost.com/" class="text-primary">michaelsboost.com</a>. All Rights Reserved.
            </p>
          </div>
        </div>
      </div>
    </section>

    <script src="assets/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="assets/smoothscroll/smooth-scroll.js"></script>
    <script src="assets/ytplayer/index.js"></script>
    <script src="assets/dropdown/js/navbar-dropdown.js"></script>
    <script src="assets/playervimeo/vimeo_player.js"></script>
    <script src="assets/sociallikes/social-likes.js"></script>
    <script src="assets/theme/js/script.js"></script>
  </body>
</html>