Merge branch 'v3.1.0'

juliangarnier · Jul 25, 2019 · 282ae7a · 282ae7a
2 parents c8dacab + 5e52c78
commit 282ae7a
Show file tree

Hide file tree

Showing 47 changed files with 882 additions and 3,103 deletions.
diff --git a/README.md b/README.md
@@ -37,13 +37,13 @@ or manual [download](https://github.com/juliangarnier/anime/archive/master.zip).
 #### ES6 modules
 
 ```javascript
-import anime from 'lib/anime.es.js';
+import anime from 'animejs/lib/anime.es.js';
 ```
 
 #### CommonJS
 
 ```javascript
-const anime = require('lib/anime.js');
+const anime = require('anime');
 ```
 
 #### File include

diff --git a/documentation/assets/css/animejs.css b/documentation/assets/css/animejs.css
@@ -63,7 +63,6 @@
   margin: 0;
   padding: 0;
   border: 0;
-  font-size: 100%;
   font: inherit;
   vertical-align: baseline;
 }

diff --git a/documentation/assets/css/documentation.css b/documentation/assets/css/documentation.css
@@ -367,7 +367,6 @@ article {
   z-index: 1;
   display: flex;
   align-items: center;
-  flex-pack: center;
   justify-content: center;
   width: 100%;
   min-height: 200px;

diff --git a/documentation/assets/css/website.css b/documentation/assets/css/website.css
@@ -114,7 +114,6 @@ a:hover .arrow:before,
 .nav-bar-content {
   display: flex;
   flex-shrink: 0;
-  flex-direction: row;
   grid-column: 1/13;
   justify-content: space-between;
   flex-direction: row;

diff --git a/documentation/assets/js/website.js b/documentation/assets/js/website.js
@@ -235,7 +235,7 @@ var logoAnimation = (function() {
     targets: '.dot',
     scale: 1,
     rotate: '1turn',
-    scaleY: {value: .5, delay: 0, duration: 150, delay: 230},
+    scaleY: {value: .5, duration: 150, delay: 230},
     translateX: 430,
     translateY: [
       {value: 244, duration: 100},

diff --git a/documentation/examples/advanced-staggering-2.html b/documentation/examples/advanced-staggering-2.html
@@ -13,13 +13,14 @@
   <meta name="twitter:site" content="@juliangarnier">
   <meta name="twitter:description" content="Javascript Animation Engine">
   <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" href="../assets/img/icons/favicon.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">
   <style>
 
     :root {
-      font-size: 24px;
+      font-size: 20px;
     }
 
     body {
@@ -28,121 +29,130 @@
       justify-content: center;
       align-items: center;
       height: 100vh;
+      background-color: #000;
     }
 
     .stagger-visualizer {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      align-items: center;
       position: relative;
+      width: 32rem;
+      height: 16rem;
+    }
+
+    .dots-wrapper {
+      position: absolute;
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
       align-items: center;
       width: 100%;
-      max-width: 912px;
-      transform: translate3d(0,0,0);
+      height: 100%;
     }
 
     .stagger-visualizer .dot {
       position: relative;
-      width: 2px;
-      height: 2px;
-      margin: 18px;
-      background-color: currentColor;
-    }
-
-    .stagger-visualizer .cursor {
-      position: absolute;
-      z-index: 1;
-      top: 0;
-      left: 0;
-      width: 24px;
-      height: 24px;
-      margin: 7px;
-      background-color: currentColor;
+      width: calc(1rem - 8px);
+      height: calc(1rem - 8px);
+      margin: 4px;
       border-radius: 50%;
+      background-color: currentColor;
     }
 
   </style>
 </head>
 <body>
 
   <div class="stagger-visualizer">
-    <div class="cursor color-red"></div>
+    <div class="dots-wrapper"></div>
   </div>
 
 </body>
 <script type="module">
 
   import anime from '../../src/index.js';
 
-  const staggerVisualizerEl = document.querySelector('.stagger-visualizer');
-  const fragment = document.createDocumentFragment();
-  const numberOfElements = 24*11;
-
-  for (let i = 0; i < numberOfElements; i++) {
-    const dotEl = document.createElement('div');
-    dotEl.classList.add('dot');
-    fragment.appendChild(dotEl);
-  }
-
-  staggerVisualizerEl.appendChild(fragment);
-
-  let index = anime.random(0, numberOfElements);
-  let nextIndex = 0;
-
-  function animateGrid() {
-
-    nextIndex = anime.random(0, numberOfElements);
-
-    anime.set('.cursor', {
-      translateX: anime.stagger('-38px', {grid: [24, 11], from: index, axis: 'x'}),
-      translateY: anime.stagger('-38px', {grid: [24, 11], from: index, axis: 'y'})
-    });
-    anime.timeline({
-      easing: 'easeInOutQuad',
-      complete: animateGrid
-    })
-    .add({
-      targets: '.cursor',
-      keyframes: [
-        { scale: .625 }, 
-        { scale: 1.125 },
-        { scale: 1 }
-      ],
-      duration: 600
-    })
-    .add({
-      targets: '.dot',
-      keyframes: [
-        {
-          translateX: anime.stagger('-4px', {grid: [24, 11], from: index, axis: 'x'}),
-          translateY: anime.stagger('-4px', {grid: [24, 11], from: index, axis: 'y'}),
-          duration: 200
-        }, {
-          translateX: anime.stagger('4px', {grid: [24, 11], from: index, axis: 'x'}),
-          translateY: anime.stagger('4px', {grid: [24, 11], from: index, axis: 'y'}),
-          scale: anime.stagger([9, 2], {grid: [24, 11], from: index}),
-          duration: 400
-        }, {
-          translateX: 0,
-          translateY: 0,
-          scale: 1,
-          duration: 600,
-        }
-      ],
-      delay: anime.stagger(30, {grid: [24, 11], from: index})
-    }, '-=600')
-    .add({
-      targets: '.cursor',
-      translateX: { value: anime.stagger('-38px', {grid: [24, 11], from: nextIndex, axis: 'x'}), duration: anime.random(400, 1200) },
-      translateY: { value: anime.stagger('-38px', {grid: [24, 11], from: nextIndex, axis: 'y'}), duration: anime.random(400, 1200) },
-      easing: 'easeOutSine'
-    }, '-=1100')
-
-    index = nextIndex;
-
-  }
-
-  animateGrid();
+  var advancedStaggeringAnimation = (function() {
+
+    var staggerVisualizerEl = document.querySelector('.stagger-visualizer');
+    var dotsWrapperEl = staggerVisualizerEl.querySelector('.dots-wrapper');
+    var dotsFragment = document.createDocumentFragment();
+    var grid = [32, 16];
+    var cellSize = 1;
+    var numberOfElements = grid[0] * grid[1];
+    var animation;
+    var paused = true;
+
+    for (var i = 0; i < numberOfElements; i++) {
+      var dotEl = document.createElement('div');
+      dotEl.classList.add('dot');
+      dotsFragment.appendChild(dotEl);
+    }
+
+    dotsWrapperEl.appendChild(dotsFragment);
+
+    var index = anime.random(0, numberOfElements-1);
+    var nextIndex = 0;
+
+    function play() {
+
+      paused = false;
+      if (animation) animation.pause();
+
+      nextIndex = anime.random(0, numberOfElements-1);
+
+      var saturation = 75;
+
+      var colorStart = anime.random(0, 256);
+      var colorEnd = anime.random(0, 256);
+      var colorRangeValue = [colorStart, colorEnd];
+      var luminosityStart = anime.random(60, 80);
+      var luminosityEnd = anime.random(20, 40);
+      var luminosityRangeValue = [luminosityStart, luminosityEnd];
+
+      function staggeredGridColors(el, i, total) {
+        var hue = Math.round(anime.stagger(colorRangeValue, {grid: grid, from: index})(el, i, total));
+        var luminosity = Math.round(anime.stagger(luminosityRangeValue, {grid: grid, from: index})(el, i, total));
+        return 'hsl(' + hue + ', ' + saturation + '%, ' + luminosity + '%)';
+      }
+
+      animation = anime({
+        targets: '.stagger-visualizer .dot',
+        keyframes: [
+          {
+            zIndex: function(el, i, total) {
+              return Math.round(anime.stagger([numberOfElements, 0], {grid: grid, from: index})(el, i, total));
+            },
+            translateX: anime.stagger('-.001rem', {grid: grid, from: index, axis: 'x'}),
+            translateY: anime.stagger('-.001rem', {grid: grid, from: index, axis: 'y'}),
+            duration: 200
+          }, {
+            translateX: anime.stagger('.075rem', {grid: grid, from: index, axis: 'x'}),
+            translateY: anime.stagger('.075rem', {grid: grid, from: index, axis: 'y'}),
+            scale: anime.stagger([2, .2], {grid: grid, from: index}),
+            backgroundColor: staggeredGridColors,
+            duration: 450
+          }, {
+            translateX: 0,
+            translateY: 0,
+            scale: 1,
+            duration: 500,
+          }
+        ],
+        delay: anime.stagger(60, {grid: grid, from: index}),
+        easing: 'easeInOutQuad',
+        complete: play
+      }, 30)
+
+      index = nextIndex;
+
+    }
+
+    play();
+
+  })();
 
 </script>
 </html>
diff --git a/documentation/examples/advanced-staggering.html b/documentation/examples/advanced-staggering.html
@@ -13,9 +13,10 @@
   <meta name="twitter:site" content="@juliangarnier">
   <meta name="twitter:description" content="Javascript Animation Engine">
   <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" href="../assets/img/icons/favicon.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">
   <style>
 
     :root {
@@ -76,6 +77,7 @@
   const staggerVisualizerEl = document.querySelector('.stagger-visualizer');
   const fragment = document.createDocumentFragment();
   const numberOfElements = 16*16;
+  var animation;
 
   for (let i = 0; i < numberOfElements; i++) {
     const dotEl = document.createElement('div');
@@ -90,13 +92,16 @@
 
   function animateGrid() {
 
+    if (animation) animation.pause();
+
     nextIndex = anime.random(0, numberOfElements);
 
     anime.set('.cursor', {
       translateX: anime.stagger('-1rem', {grid: [16, 16], from: index, axis: 'x'}),
       translateY: anime.stagger('-1rem', {grid: [16, 16], from: index, axis: 'y'})
     });
-    anime.timeline({
+
+    animation = anime.timeline({
       easing: 'easeInOutQuad',
       complete: animateGrid
     })

diff --git a/documentation/examples/anime-DOM-stress-test.html b/documentation/examples/anime-DOM-stress-test.html
@@ -13,8 +13,9 @@
   <meta name="twitter:site" content="@juliangarnier">
   <meta name="twitter:description" content="Javascript Animation Engine">
   <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" href="../assets/img/icons/favicon.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>
   <!-- <script src="../assets/js/anime/anime.2.0.2.js"></script> -->
@@ -45,23 +46,22 @@
   function createEl(i) {
     var el = document.createElement('div');
     var hue = Math.round(360 / numberOfEls * i);
-    var angle = i;
     el.classList.add('el');
     //el.style.border = '5px solid hsl(' + hue + ', 50%, 50%)';
     el.style.backgroundColor = 'hsl(' + hue + ', 50%, 50%)';
     wrapperEl.appendChild(el);
     anime({
       targets: el,
-      translateX: Math.sin(angle) * distance + 'rem',
-      translateY: Math.cos(angle) * distance + 'rem',
+      translateX: Math.sin(i) * distance + 'rem',
+      translateY: Math.cos(i) * distance + 'rem',
       scale: [
-        {value: [0, 1]},
-        {value: 0}
+        {value: [.1, 2]},
+        {value: .1}
       ],
       easing: 'easeInOutSine',
       loop: true,
       duration: duration,
-      startTime: i * (duration / numberOfEls)
+      delay: i * (duration / numberOfEls)
     });
   };