new version redesign

LICENSE

@@ -4,7 +4,7 @@ You can use the core/public GSAP files in an open source project as long as you
 
 MIT License
 
-Copyright (c) 2019-2022 Michael Schwartz
+Copyright (c) 2019-2024 Michael Schwartz
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -8,7 +8,7 @@ I love making vector animations but finding an app to make vector animations on
 Version
 -------------
 
-1.000-release
+1.001-alpha
 
 License
 -------------
@@ -20,17 +20,13 @@ Tech
 
 svgMotion uses a number of open source projects to work properly:
 
-* [SweetAlert](https://sweetalert.js.org/guides/) - For the awesome and stylish alert dialogs
-* [AlertifyJS](http://alertifyjs.com/) - For the awesome and stylish notification dialogs
+* [Tailwind CSS](https://tailwindcss.com/) - A low-level CSS framework that's entirely utility-first and provides users with low-level CSS classes in PostCSS that can be used to define components and designs independently.
 * [Font Awesome](https://fontawesome.com/) - a font and icon toolkit
-* [GifShot](https://yahoo.github.io/gifshot/) - Library to create gif animations from an image sequence
-* [Greensock](https://greensock.com/) - Library responsible for the whole animation process
-* [jQuery](http://jquery.com/) - duh
-* [JQuery MiniColors](https://labs.abeautifulsite.net/jquery-minicolors/index.html) - For the color picker
 * [JSZip](https://stuk.github.io/jszip/) - package zip files in javascript
-* [Normalize](https://github.com/necolas/normalize.css) - CSS reset library
 * [FileSaver.js](https://github.com/eligrey/FileSaver.js/) - Client-side solution for saving files
-* [Codemirror](https://github.com/codemirror/codemirror) - JavaScript component that provides a code editor in the browser
+* [GifShot](https://yahoo.github.io/gifshot/) - Library to create gif animations from an image sequence
+* [Greensock](https://greensock.com/) - Library responsible for the whole animation process
+* [panzoom](https://github.com/anvaka/panzoom/) - Used to pan and zoom the canvas
 
 Development
 -------------
@@ -39,8 +35,6 @@ Want to contribute? Great!
 
 You can submit a pull request or simply share the project :)
 
-*As of March 11th, 2022 svgMotion is no longer an active project. All updates as of that date and on are solely contributor based implementations.*
-
 Of course, svgMotion is free and open source, so you can always fork the project and have fun :)
 
 [![ko-fi](https://az743702.vo.msecnd.net/cdn/kofi2.png?v=0)](https://ko-fi.com/michaelsboost)

index.html

@@ -6,13 +6,28 @@
     <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 name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, interactive-widget=resizes-content">
+    <meta property="og:url"         content="https://michaelsboost.github.io/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" />
+    <meta property="og:description" content="A vector animation tool." />
+    <meta property="og:image"       content="https://raw.githubusercontent.com/michaelsboost/svgMotion/gh-pages/imgs/header.png" />
+    <link rel="shortcut icon" href="release/imgs/logo.svg" type="image/x-icon">
+    <!-- Chrome, Firefox OS and Opera -->
+    <meta name="theme-color" content="#ffffff">
+    <!-- Windows Phone -->
+    <meta name="msapplication-navbutton-color" content="#ffffff">
+    <!-- iOS Safari -->
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="apple-mobile-web-app-title" content="svgMotion">
+    <link rel="apple-touch-icon" href="release/imgs/logo.png">
+    <meta property="og:type"        content="website" />
+    <meta property="og:title"       content="svgMotion" />
+    <meta property="og:description" content="A vector animation tool." />
+    <link rel="stylesheet" href="css/imports.css">
+    <link rel="apple-touch-icon" href="release/imgs/logo.svg">
+    <link rel="icon" type="image/png" href="release/imgs/logo.svg" />
 
     <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
     <link rel="stylesheet" href="assets/bootstrap/css/bootstrap-grid.min.css">
@@ -270,10 +285,6 @@ <h3 class="mbr-section-title mbr-fonts-style align-center mb-4 display-2">
 
                 <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>

release/css/imports.css

@@ -0,0 +1,51 @@
+/* imports */
+@import url('libraries.css');
+
+.timeline {
+  position: relative;
+  height: 8px;
+  margin-left: 15px;
+  margin-right: 15px;
+  overflow: visible;
+}
+.progress-bar, .timeline-track {
+  height: 8px;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.timeline-track {
+  background-color: #999;
+  opacity: .6;
+}
+.progress-bar {
+  background-color: #3d99ff;
+  height: 8px;
+  top: 0;
+  width: 0;
+  pointer-events: none;
+}
+.seek-bar {
+  width: 100%;
+  position: absolute;
+  height: 24px;
+  top: -12px;
+  left: 0;
+  background-color: transparent;
+}
+.playhead {
+  position: absolute;
+  top: -5px;
+  transform: translate(-50%,0);
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  border: 1px solid #3d99ff;
+  background-color: #3d99ff;
+
+  touch-action: manipulation;
+  cursor: ew-resize;
+  user-select: none;
+  left: 0%;
+}