iamrobert/anime=js-external.html

## anime=js-external.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Inline Anime SVG</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
/* + SVG ANIMATION (anime.js)
  ======================================================================*/

.svg-animation {
  contain: layout;
}
.svg-animation svg .on-path, .svg-animation svg .on-path * {
  transform-origin: center;
  transform-box: fill-box;
}
#bannerload {
  background: #black;
}
.m800-order-2 {
  width: 50%;
}
</style>
<link rel="preload" as="image" href="/svg/home.svg">
</head>

<body>

<!--BANNER SLIDER-->
<div class="onload-hidez" id="bannerload">
  <div class="banner-border" id="mainslider">
    <div id="noize" class="js-tilt">
      <div class="grid-container fluid no-padding home-banner">
        <div class="grid-x align-center-middle">
          <div class="cell m800-6 small-order-2 m800-order-1 align-self-middle">
            <div class="banner-text">
              <h2 class="ani-pause chrs">We design digital brands that adapt &amp; thrive in a disruptive world.</h2>
              <h3 class="wrds ani-pause ani-quick p-lead-text">Attention is the new currency; brands resonate when understood. We make your brand clear, consistent and compelling. We help companies flourish in the connected age.</h3>
              <p class="mt-p no-margin-bottom button-delay ani-pause hide-for-m800-only-vis"><a href="/contact" class="button small">Get in touch</a></p>
            </div>
          </div>
          <div class="cell m800-6 small-order-1 m800-order-2">
            <div class="svg-animation" id="js-home-banner"> </div>
          </div>
        </div>
      </div>
    </div>
    <div class="down-arrow"> <a aria-hidden="true" href="#first" data-smooth-scroll>aaa</a> </div>
  </div>
  <script>


                  function fetchXML  (url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function (evt) {
      if (xhr.readyState === 4) {
        callback(xhr.responseXML);
      }
    };
    xhr.send(null);
  };

  //Fetch the document
  fetchXML("/svg/home.svg",function(newSVGDoc){
    //import it into the current DOM
    var n = document.importNode(newSVGDoc.documentElement,true);
    document.getElementById('js-home-banner').appendChild(n);
    homeBannerAni();
  });
                </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="svg/xml-fetch.js"></script>
  <script>
function homeBannerAni() {

  //portfolioAni();
 // iamLogoAni();

  var homeBanner = null;

  if (!document.querySelector('#js-home-banner')) {
    return;
  }

  homeBanner = anime.timeline({
    loop: false,
    autoplay: true
  });

  // g#hand, g#screen, g#top-fingers


  homeBanner

    .add({
      targets: ['#hand', '#top-fingers'],
      translateX: '110%',
      opacity: 0,
          begin: function (anim) {
        homeBkgAni();
      }
    }, 0)

    .add({
      // targets: '#screen',
      targets: ['#i-search', '#i-world', '#i-logo', '#i-text-1', '#i-text-2', '#i-text-3'],
      opacity: 0
    }, 0)

    .add({
      targets: ['#hand', '#top-fingers'],
      opacity: 1,
      translateX: [{
          value: '-10%',
          delay: 1350,
          easing: 'cubicBezier(.82,.34,.23,.74)'
        },
        {
          value: '0%',
          duration: 150,
          delay: 0,
          easing: 'cubicBezier(0.12, 0, 0.39, 0)'
        }
      ],
      scaleX: [{
          value: -1,
          duration: 100,
          delay: 500,
          easing: 'easeOutExpo'
        },
        {
          value: 1,
          duration: 900
        },
      ],
      scaleY: [{
          value: -1,
          duration: 100,
          delay: 500,
          easing: 'easeOutExpo'
        },
        {
          value: 1,
          duration: 900
        }
      ]
    }, '+=0')

    .add({
      targets: ['#hand', '#screen', '#top-fingers'],
      easing: 'easeInOutSine',
      duration: 550,
      complete: function (anim) {
        homeShakeAni();
      }
    }, '+=100')

    .add({
      targets: ['#i-search', '#i-world'],
      opacity: 1,
      easing: 'easeInOutCirc',
      rotateX: 10,
      duration: 500,
      complete: function (anim) {
        homeGlobeAni();
      }
    }, '-=200')

    .add({
      targets: ['#i-text-1', '#i-text-2', '#i-text-3', '#i-logo'],
      opacity: 1,
      easing: 'easeInOutCirc',
      duration: 500,
      rotateX: 10,
      // delay: anime.stagger(300, {easing: 'easeOutQuad'})
      delay: anime.stagger(300),
//      complete: function (anim) {
//        homeBkgAni();
//      }
    }, '+=300')

    .add({
      targets: '#i-text-1 g rect.color-change',
      fill: ['#9c1d21', '#761116'],
      easing: 'easeOutExpo',
      duration: 1000
    }, '+=200')

    .add({
        targets: '#i-text-1 rect.opacity-0',
        opacity: [0, 1],
        easing: 'easeOutExpo',
        duration: 700
    }, '-=300');
}


/* + CELL PHONE SHAKE
  ======================================================================*/
function homeShakeAni() {

  var xMax = 1;
  var yMax = 1;
  var rotateMax = -0.5;

  var shake = anime({
    targets: ['#hand', '#top-fingers', '#screen'],
    easing: 'easeOutBounce',
    duration: 350,
    loop: 1,
    elasticity: 880,
    // direction: 'alternate',
    autoplay: true,

    translateX: [{
        value: xMax * -1
      },
      {
        value: xMax
      },
      {
        value: xMax / -2
      },
      {
        value: xMax / 2
      },
      {
        value: 0
      }
    ],

    translateY: [{
        value: yMax / 2
      },
      {
        value: yMax * -1
      },
      {
        value: yMax
      },
      {
        value: yMax / -2
      },
      {
        value: 0
      }
    ],

    rotate: [{
        value: rotateMax * -2
      },
      {
        value: rotateMax
      },
      {
        value: rotateMax / -2
      },
      {
        value: rotateMax / 2
      },
      {
        value: 0
      }
    ]
  });
}

/* + GLOBE ANIMATION
  ======================================================================*/
function homeGlobeAni() {

  var loop = anime({
    targets: '#i-world path',
    rotateY: '360',
    // direction: 'alternate',
    loop: true,
    easing: 'cubicBezier(.5, .05, .1, .3)',
    // delay: anime.stagger(150),
    duration: 1700
  });
}


/* + BACKGROUND ANIMATION
  ======================================================================*/
function homeBkgAni() {

  if (!document.querySelector('#js-home-banner')) {
    return;
  }

  var randomOpacity = function () {
    return anime.random(0, 0.3);
  };

  var bkg = document.getElementById('home-bkg');
  if (bkg) {
    bkg.classList.add('on-path');
  }

  var loopInfinity = anime({
    targets: ['#home-bkg g.odd > g'],
    loop: true,
    // direction: 'alternate',
    keyframes: [{
        rotateY: -360,
        easing: 'cubicBezier(.41,.12,.26,1)',
        duration: 6000,
        endDelay: 1000
      },
      {
        rotateX: 360,
        easing: 'cubicBezier(.41,.12,.26,1)',
        duration: 6000,
        endDelay: 1000
      }
    ]
  });

  var loopInfinity2 = anime({
    targets: ['#home-bkg g.even > g'],
    loop: true,
    keyframes: [{
        rotateX: -360,
        easing: 'cubicBezier(.41,.12,.26,1)',
        duration: 6000,
        endDelay: 1000
      },
      {
        rotateY: 360,
        easing: 'cubicBezier(.41,.12,.26,1)',
        duration: 6000,
        endDelay: 1000
      }
    ]
  });

  var recursiveOpacity = function () {
    return anime({
      targets: ['#home-bkg g > g'],
      direction: 'alternate',
      complete: function () {
        loopOpacity = recursiveOpacity();
      },
      opacity: [1, randomOpacity],
      easing: 'cubicBezier(.41,.12,.26,1)',
      duration: 1500,
      delay: anime.stagger(7500, {
        grid: [7, 7]
      })
    });
  }

  var loopOpacity = recursiveOpacity();

  // INTERSECTION LOGIC
var observer = new IntersectionObserver(function (entries) {
    if (entries[0].intersectionRatio > 0) {
      loopInfinity.play();
      loopInfinity2.play();
      loopOpacity.play();
    } else {
      loopInfinity.pause();
      loopInfinity2.pause();
      loopOpacity.pause();
    }
  });
  observer.observe(document.querySelector('#js-home-banner'));
}


homeBannerAni();
</script>
</div>
<!--/BANNER SLIDER-->
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Inline Anime SVG</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<style>
	/* + SVG ANIMATION (anime.js)
	======================================================================*/

	.svg-animation {
	contain: layout;
	}
	.svg-animation svg .on-path, .svg-animation svg .on-path * {
	transform-origin: center;
	transform-box: fill-box;
	}
	#bannerload {
	background: #black;
	}
	.m800-order-2 {
	width: 50%;
	}
	</style>
	<link rel="preload" as="image" href="/svg/home.svg">
	</head>

	<body>

	<!--BANNER SLIDER-->
	<div class="onload-hidez" id="bannerload">
	<div class="banner-border" id="mainslider">
	<div id="noize" class="js-tilt">
	<div class="grid-container fluid no-padding home-banner">
	<div class="grid-x align-center-middle">
	<div class="cell m800-6 small-order-2 m800-order-1 align-self-middle">
	<div class="banner-text">
	<h2 class="ani-pause chrs">We design digital brands that adapt & thrive in a disruptive world.</h2>
	<h3 class="wrds ani-pause ani-quick p-lead-text">Attention is the new currency; brands resonate when understood. We make your brand clear, consistent and compelling. We help companies flourish in the connected age.</h3>
	<p class="mt-p no-margin-bottom button-delay ani-pause hide-for-m800-only-vis"><a href="/contact" class="button small">Get in touch</a></p>
	</div>
	</div>
	<div class="cell m800-6 small-order-1 m800-order-2">
	<div class="svg-animation" id="js-home-banner"> </div>
	</div>
	</div>
	</div>
	</div>
	<div class="down-arrow"> <a aria-hidden="true" href="#first" data-smooth-scroll>aaa</a> </div>
	</div>
	<script>



	function fetchXML (url, callback) {
	var xhr = new XMLHttpRequest();
	xhr.open('GET', url, true);
	xhr.onreadystatechange = function (evt) {
	if (xhr.readyState === 4) {
	callback(xhr.responseXML);
	}
	};
	xhr.send(null);
	};

	//Fetch the document
	fetchXML("/svg/home.svg",function(newSVGDoc){
	//import it into the current DOM
	var n = document.importNode(newSVGDoc.documentElement,true);
	document.getElementById('js-home-banner').appendChild(n);
	homeBannerAni();
	});
	</script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<script src="svg/xml-fetch.js"></script>
	<script>
	function homeBannerAni() {

	//portfolioAni();
	// iamLogoAni();

	var homeBanner = null;

	if (!document.querySelector('#js-home-banner')) {
	return;
	}

	homeBanner = anime.timeline({
	loop: false,
	autoplay: true
	});

	// g#hand, g#screen, g#top-fingers



	homeBanner

	.add({
	targets: ['#hand', '#top-fingers'],
	translateX: '110%',
	opacity: 0,
	begin: function (anim) {
	homeBkgAni();
	}
	}, 0)

	.add({
	// targets: '#screen',
	targets: ['#i-search', '#i-world', '#i-logo', '#i-text-1', '#i-text-2', '#i-text-3'],
	opacity: 0
	}, 0)

	.add({
	targets: ['#hand', '#top-fingers'],
	opacity: 1,
	translateX: [{
	value: '-10%',
	delay: 1350,
	easing: 'cubicBezier(.82,.34,.23,.74)'
	},
	{
	value: '0%',
	duration: 150,
	delay: 0,
	easing: 'cubicBezier(0.12, 0, 0.39, 0)'
	}
	],
	scaleX: [{
	value: -1,
	duration: 100,
	delay: 500,
	easing: 'easeOutExpo'
	},
	{
	value: 1,
	duration: 900
	},
	],
	scaleY: [{
	value: -1,
	duration: 100,
	delay: 500,
	easing: 'easeOutExpo'
	},
	{
	value: 1,
	duration: 900
	}
	]
	}, '+=0')

	.add({
	targets: ['#hand', '#screen', '#top-fingers'],
	easing: 'easeInOutSine',
	duration: 550,
	complete: function (anim) {
	homeShakeAni();
	}
	}, '+=100')

	.add({
	targets: ['#i-search', '#i-world'],
	opacity: 1,
	easing: 'easeInOutCirc',
	rotateX: 10,
	duration: 500,
	complete: function (anim) {
	homeGlobeAni();
	}
	}, '-=200')

	.add({
	targets: ['#i-text-1', '#i-text-2', '#i-text-3', '#i-logo'],
	opacity: 1,
	easing: 'easeInOutCirc',
	duration: 500,
	rotateX: 10,
	// delay: anime.stagger(300, {easing: 'easeOutQuad'})
	delay: anime.stagger(300),
	// complete: function (anim) {
	// homeBkgAni();
	// }
	}, '+=300')

	.add({
	targets: '#i-text-1 g rect.color-change',
	fill: ['#9c1d21', '#761116'],
	easing: 'easeOutExpo',
	duration: 1000
	}, '+=200')

	.add({
	targets: '#i-text-1 rect.opacity-0',
	opacity: [0, 1],
	easing: 'easeOutExpo',
	duration: 700
	}, '-=300');
	}




	/* + CELL PHONE SHAKE
	======================================================================*/
	function homeShakeAni() {

	var xMax = 1;
	var yMax = 1;
	var rotateMax = -0.5;

	var shake = anime({
	targets: ['#hand', '#top-fingers', '#screen'],
	easing: 'easeOutBounce',
	duration: 350,
	loop: 1,
	elasticity: 880,
	// direction: 'alternate',
	autoplay: true,

	translateX: [{
	value: xMax * -1
	},
	{
	value: xMax
	},
	{
	value: xMax / -2
	},
	{
	value: xMax / 2
	},
	{
	value: 0
	}
	],

	translateY: [{
	value: yMax / 2
	},
	{
	value: yMax * -1
	},
	{
	value: yMax
	},
	{
	value: yMax / -2
	},
	{
	value: 0
	}
	],

	rotate: [{
	value: rotateMax * -2
	},
	{
	value: rotateMax
	},
	{
	value: rotateMax / -2
	},
	{
	value: rotateMax / 2
	},
	{
	value: 0
	}
	]
	});
	}

	/* + GLOBE ANIMATION
	======================================================================*/
	function homeGlobeAni() {

	var loop = anime({
	targets: '#i-world path',
	rotateY: '360',
	// direction: 'alternate',
	loop: true,
	easing: 'cubicBezier(.5, .05, .1, .3)',
	// delay: anime.stagger(150),
	duration: 1700
	});
	}


	/* + BACKGROUND ANIMATION
	======================================================================*/
	function homeBkgAni() {

	if (!document.querySelector('#js-home-banner')) {
	return;
	}

	var randomOpacity = function () {
	return anime.random(0, 0.3);
	};

	var bkg = document.getElementById('home-bkg');
	if (bkg) {
	bkg.classList.add('on-path');
	}

	var loopInfinity = anime({
	targets: ['#home-bkg g.odd > g'],
	loop: true,
	// direction: 'alternate',
	keyframes: [{
	rotateY: -360,
	easing: 'cubicBezier(.41,.12,.26,1)',
	duration: 6000,
	endDelay: 1000
	},
	{
	rotateX: 360,
	easing: 'cubicBezier(.41,.12,.26,1)',
	duration: 6000,
	endDelay: 1000
	}
	]
	});

	var loopInfinity2 = anime({
	targets: ['#home-bkg g.even > g'],
	loop: true,
	keyframes: [{
	rotateX: -360,
	easing: 'cubicBezier(.41,.12,.26,1)',
	duration: 6000,
	endDelay: 1000
	},
	{
	rotateY: 360,
	easing: 'cubicBezier(.41,.12,.26,1)',
	duration: 6000,
	endDelay: 1000
	}
	]
	});

	var recursiveOpacity = function () {
	return anime({
	targets: ['#home-bkg g > g'],
	direction: 'alternate',
	complete: function () {
	loopOpacity = recursiveOpacity();
	},
	opacity: [1, randomOpacity],
	easing: 'cubicBezier(.41,.12,.26,1)',
	duration: 1500,
	delay: anime.stagger(7500, {
	grid: [7, 7]
	})
	});
	}

	var loopOpacity = recursiveOpacity();

	// INTERSECTION LOGIC
	var observer = new IntersectionObserver(function (entries) {
	if (entries[0].intersectionRatio > 0) {
	loopInfinity.play();
	loopInfinity2.play();
	loopOpacity.play();
	} else {
	loopInfinity.pause();
	loopInfinity2.pause();
	loopOpacity.pause();
	}
	});
	observer.observe(document.querySelector('#js-home-banner'));
	}


	homeBannerAni();
	</script>
	</div>
	<!--/BANNER SLIDER-->
	</body>
	</html>