title: Why is anime.js example not working when I use the code but works on codepen?
body: <p>So, I have been trying to work with an amazing animation from anime.js, <a href="https://codepen.io/juliangarnier/pen/LMrRNW" rel="nofollow noreferrer">which is this one</a>.</p>
  
  <p>But this animation does not work when I use it after copying the code but it works on codepen. I have taken the code exactly as it is.</p>
  
  <p>Following is how I added anime.js and other js files:</p>
  
  <pre><code>&lt;script type="text/javascript" src="https://codepen.io/juliangarnier/pen/75efae7724dbc3c055e918057fc4aca5"&gt;&lt;/script&gt;
      &lt;script src="anime-master/lib/anime.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/sphere.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><code>sphere.js</code> is the file that has the js code from codepen. And everything else is exactly the same. Is there anything I am doing wrong or I am missing here.
  I would really appreciate any help.</p>
  
  <p>After inspecting the following js code of the animation, the error states:</p>
  
  <blockquote>
    <p>UncaughtReferenceError anime is not defined 
    at <code>anime.set()</code> part of the following code.</p>
  </blockquote>
  
  <pre><code>function fitElementToParent(el, padding) {
      var timeout = null;
      function resize() {
          if (timeout) clearTimeout(timeout);
          anime.set(el, {scale: 1});
          var pad = padding || 0;
          var parentEl = el.parentNode;
          var elOffsetWidth = el.offsetWidth - pad;
          var parentOffsetWidth = parentEl.offsetWidth;
          var ratio = parentOffsetWidth / elOffsetWidth;
          timeout = setTimeout(anime.set(el, {scale: ratio}), 10);
      }
      resize();
      window.addEventListener('resize', resize);
  }
  
  var sphereAnimation = (function() {
  
      var sphereEl = document.querySelector('.sphere-animation');
      var spherePathEls = sphereEl.querySelectorAll('.sphere path');
      var pathLength = spherePathEls.length;
      var hasStarted = false;
      var aimations = [];
  
      fitElementToParent(sphereEl);
  
      var breathAnimation = anime({
          begin: function() {
              for (var i = 0; i &lt; pathLength; i++) {
                  aimations.push(anime({
                      targets: spherePathEls[i],
                      stroke: {value: ['rgba(255,75,75,1)', 'rgba(80,80,80,.35)'], duration: 500},
                      translateX: [2, -4],
                      translateY: [2, -4],
                      easing: 'easeOutQuad',
                      autoplay: false
                  }));
              }
          },
          update: function(ins) {
              aimations.forEach(function(animation, i) {
                  var percent = (1 - Math.sin((i * .35) + (.0022 * ins.currentTime))) / 2;
                  animation.seek(animation.duration * percent);
              });
          },
          duration: Infinity,
          autoplay: false
      });
  
      var introAnimation = anime.timeline({
          autoplay: false
      })
          .add({
              targets: spherePathEls,
              strokeDashoffset: {
                  value: [anime.setDashoffset, 0],
                  duration: 3900,
                  easing: 'easeInOutCirc',
                  delay: anime.stagger(190, {direction: 'reverse'})
              },
              duration: 2000,
              delay: anime.stagger(60, {direction: 'reverse'}),
              easing: 'linear'
          }, 0);
  
      var shadowAnimation = anime({
          targets: '#sphereGradient',
          x1: '25%',
          x2: '25%',
          y1: '0%',
          y2: '75%',
          duration: 30000,
          easing: 'easeOutQuint',
          autoplay: false
      }, 0);
  
      function init() {
          introAnimation.play();
          breathAnimation.play();
          shadowAnimation.play();
      }
  
      init();
  
  })();
  </code></pre>