Merge branch 'v3.2.1' into instance-remove

greyliances · Oct 12, 2020 · 351866c · 351866c
2 parents 2d210e8 + 225fadd
commit 351866c
Show file tree

Hide file tree

Showing 10 changed files with 379 additions and 196 deletions.
diff --git a/documentation/assets/css/documentation.css b/documentation/assets/css/documentation.css
@@ -414,6 +414,10 @@ article {
   height: 100%;
 }
 
+.demo-content.vertical {
+  flex-direction: row;
+}
+
 .demo-title {
   position: absolute;
   top: 0;
@@ -644,6 +648,7 @@ input.progress[value]::-webkit-slider-thumb {
   height: auto;
   padding-left: 38px;
   transition: opacity .5s ease;
+  white-space: nowrap
 }
 
 .demo.active .label {

diff --git a/documentation/examples/anime-ease-visualizer.html b/documentation/examples/anime-ease-visualizer.html
@@ -17,7 +17,7 @@
   <link rel="icon" type="image/png" href="../assets/img/favicon.png">
   <link href="../assets/css/animejs.css" rel="stylesheet">
   <link href="../assets/css/documentation.css" rel="stylesheet">
-  <script src="../../lib/anime.min.js"></script>
+  <!-- <script src="../../lib/anime.min.js"></script> -->
   <style>
     .easings {
       display: flex;
@@ -335,9 +335,16 @@
       <button value="easeInOutBack" >Back</button>
       <button value="easeInOutBounce" >Bounce</button>
       <button value="easeInOutElastic" >Elastic</button>
+      <label>Steps</label>
+      <button value="steps(2)" >steps(2)</button>
+      <button value="steps(5)" >steps(5)</button>
+      <button value="steps(10)" >steps(10)</button>
+      <button value="steps(20)" >steps(20)</button>
     </div>
   </div>
-  <script>
+  <script type="module">
+
+  import anime from '../../src/index.js';
 
   var pathEl = document.querySelector('.curve');
   var presetsEls = document.querySelectorAll('.options button');
@@ -407,8 +414,6 @@
 
   presetsEls[0].click();
 
-  pathEl.setAttribute('d', getCoordinates(presetsEls[0].value));
-
   </script>
 </body>
 </html>
diff --git a/documentation/examples/anime-svg-lines-animations.html b/documentation/examples/anime-svg-lines-animations.html
@@ -53,7 +53,7 @@
 <body>
   <div class="anim">
     <div class="item"></div>
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400">
+    <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" viewBox="0 0 600 400">
       <g fill="none" fill-rule="evenodd" stroke-width="2">
         <line class="line-1" stroke="#F96F82" x1="51.5" x2="149.5" y1="51.5" y2="149.5" stroke-linecap="square"/>
         <line class="line-2s" stroke="#F96F82" x1="149.5" x2="51.5" y1="51.5" y2="149.5" stroke-linecap="square"/>

diff --git a/documentation/examples/anime-svg-path-animation-responsive.html b/documentation/examples/anime-svg-path-animation-responsive.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>SVG line drawing | anime.js</title>
+  <title>SVG responsive path animation | anime.js</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
   <meta property="og:title" content="anime.js">
@@ -15,59 +15,104 @@
   <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
   <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
   <link rel="icon" type="image/png" href="../assets/img/favicon.png">
+  <link href="../assets/css/animejs.css" rel="stylesheet">
   <link href="../assets/css/documentation.css" rel="stylesheet">
-  <!-- <script src="../../lib/anime.min.js"></script> -->
   <style>
     body {
       display: flex;
       align-items: center;
       justify-content: center;
+      flex-direction: column;
       position: absolute;
       overflow: hidden;
       width: 100%;
       height: 100%;
     }
+    h2 {
+      margin-bottom: 20px;
+    }
     .container {
       position: relative;
-      width: 512px;
-      height: 224px;
+      margin-bottom: 20px;
     }
-
     .container > svg {
       width: 100%;
+      box-shadow: 0px 0px 1px 1px red;
+      overflow: visible;
     }
 
-    .color-green {
+    .dom-el {
       position: absolute;
-      top: .5rem;
-      left: .5rem;
-      width: 1rem;
-      height: 1rem;
-      background-color: currentColor;
+      top: -1rem;
+      left: -1rem;
+      width: 2rem;
+      height: 2rem;
+      border: 2px solid currentColor;
     }
   </style>
 </head>
 <body>
-<div class="container">
+<h2>No specified width</h2>
+<div class="container no-specified-width">
   <svg viewBox="0 0 256 112">
-    <path fill="none" stroke="#FFF" d="M8,56 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z"/>
+    <path id="noSpecifiedWidth" fill="none" stroke="#FFF" d="M8,56 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z"/>
+    <rect class="rect-el" fill="none" stroke="yellow" stroke-width="2" x="-10" y="-10" width="20" height="20"/>
+  </svg>
+  <div class="dom-el color-green"></div>
+</div>
+<h2>Specified width</h2>
+<div class="container specified-width">
+  <svg viewBox="0 0 256 112" width="200" height="200">
+    <path id="specifiedWidth" fill="none" stroke="#FFF" d="M8,56 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z"/>
+    <rect class="rect-el" fill="none" stroke="yellow" stroke-width="2" x="-10" y="-10" width="20" height="20"/>
+  </svg>
+  <div class="dom-el color-green"></div>
+</div>
+<h2>preserveAspectRatio with specified width</h2>
+<div class="container preserveAspectRatio">
+  <svg viewBox="0 0 256 112" width="200" height="200" preserveAspectRatio="xMidYMid slice">
+    <path id="preserveAspectRatio" fill="none" stroke="#FFF" d="M8,56 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z"/>
+    <rect class="rect-el" fill="none" stroke="yellow" stroke-width="2" x="-10" y="-10" width="20" height="20"/>
   </svg>
-  <div class="color-green"></div>
-  </div>
+  <div class="dom-el color-green"></div>
+</div>
+
 </div>
   <script type="module">
   import anime from '../../src/index.js';
-  var path = anime.path('path');
 
+  const path = anime.path('#noSpecifiedWidth');
   anime({
-    targets: '.color-green',
+    targets: ['.no-specified-width .dom-el', '.no-specified-width .rect-el'],
     translateX: path('x'),
     translateY: path('y'),
     rotate: path('angle'),
     duration: 3000,
     loop: true,
     easing: 'linear'
   });
+
+  const specifiedWidthPath = anime.path('#specifiedWidth');
+  anime({
+    targets: ['.specified-width .dom-el', '.specified-width .rect-el'],
+    translateX: specifiedWidthPath('x'),
+    translateY: specifiedWidthPath('y'),
+    rotate: specifiedWidthPath('angle'),
+    duration: 3000,
+    loop: true,
+    easing: 'linear'
+  });
+
+  const preserveAspectRatioPath = anime.path('#preserveAspectRatio');
+  anime({
+    targets: ['.preserveAspectRatio .dom-el', '.preserveAspectRatio .rect-el'],
+    translateX: preserveAspectRatioPath('x'),
+    translateY: preserveAspectRatioPath('y'),
+    rotate: preserveAspectRatioPath('angle'),
+    duration: 3000,
+    loop: true,
+    easing: 'linear'
+  });
   </script>
 </body>
 </html>