<!--
;''                 ''                                       ;;;,                                                            ;;;                                                                        
'''                 ''                                       @@@;                                                           `@@@                                                                        
'''                 ''                                       @@@;                                                           `@@@                                                                        
'''                 ''                                       @@@;                                                           `@@@                                                                        
'''                 ''                                       @@@;                                                           `@@@                                                                        
'''                 ''                                       @@@;                                 `                         `@@@                                                                        
'''                 ''                                       @@@;                                ;`                         `@@@                                                                        
'''                 ''                                       @@@;                                @`                         `@@@                                                                        
'''                 ''                                       @@@;                                @`                         `@@@                                                                        
'''          `@     ''                                       @@@;                               :@`                         `@@@                                                                        
'''    @@@'  @@@    ''                                       @@@;                               @@`                         `@@@                                                                        
'''    @@@' ;@@@'   ''                                       @@@;                               @@`                         `@@@                                                                        
'''    @@@' @@@@@   ''                                       @@@;                              ,@@`                         `@@@                                                                        
'''    @@@' @@@@@   ''                                       @@@;                              @@@`                         `@@@                                                                        
'''    @@@',@@@@#   ''         @@@;              @@@#        @@@;   .'''.        @@@`          @@@''''          '@@@`       `@@@           @@@'        ''';    ''    .'''      '''  @@@           ,@@@, 
'''    @@@'#@@@@+   ''        @@@@@'            @@@@@@       @@@;   @@@@        @@@@@         .@@@@@@@         '@@@@@;      `@@@          @@@@@+       #@@@    @@    '@@@      @@@ #@@@#          @@@@@.
'''    @@@'@@@@@:   ''       @@@@@@@           #@@@@@@`      @@@;   @@@@       #@@@@@@        @@@@@@@@         @@@@@@@      `@@@         @@@@@@@`      :@@@    @@.   #@@#      @@@ @@@@@         @@@@@@@
'''    @@@'@@@@@`   ''      `@@@@@@@@          @@@@@@@`      @@@;   @@@#       @@@@@@@        @@@@@@@@        @@@@@@@@      `@@@         @@@@@@@@      `@@@   .@@'   @@@:      @@@'@@@@@:        @@@@@@@
'''    @@@;@@@@@    ''      @@@@@@@@@         +@@@@@@@`      @@@;  ;@@@.      '@@@@@@@'      `@@@@@@@@        @@@@@@@@      `@@@        #@@@@@@@@       @@@   ;@@@   @@@`      @@@@@@@@@@       ;@@@@@@@
'''    @@@@@@ +@    ''      @@@@`#@@@:        @@@@@@@@`      @@@;  @@@@       @@@@`+@@@      :@@@@@@@@       :@@@@@@@@      `@@@        @@@@`+@@@;      @@@`  #@@@   @@@       @@@@@@@@@@       @@@#`@@@
'''    @@@@@.  @    ''     `@@@.  @@@@        @@@@@@@@`      @@@;  @@@@       @@@,  @@@      :@@@@@@@@       @@@@@@@@@      `@@@        @@@,  @@@@      @@@.  @@@@   @@@       @@@@' @@@@       @@@   @@
'''    @@@@@        ''     '@@@   +@@@       ,@@@@   #`      @@@; .@@@;       @@@   ;@@`       @@@`          @@@@'   @      `@@@       ;@@@   '@@@      #@@'  @@@@  .@@@       @@@@  ,@@@       @@@    @
'''    @@@@@        ''     @@@@   .@@@       +@@@,    `      @@@; @@@@       :@@@    @@:       @@@`          @@@@    .      `@@@       @@@@   `@@@      ;@@#  @@@@  ;@@@       @@@@   @@@       @@@    `
'''    @@@@:        ''     @@@#    @@@`      @@@@            @@@; @@@@       +@@#    @@+       @@@`         `@@@'           `@@@       @@@#    @@@`     `@@@  @@@@. #@@;       @@@,   @@@       @@@@    
'''    @@@@         ''     @@@;    @@@.      @@@@            @@@; @@@#       @@@+    @@@       @@@`         ,@@@`           `@@@       @@@'    @@@,      @@@ .@@@@' @@@`       @@@    @@@`      @@@@#   
'''    @@@@         ''     @@@,    @@@:      @@@+            @@@;;@@@.       @@@;````@@@       @@@`         ;@@@            `@@@       @@@:    @@@;      @@@ ;@@@@# @@@        @@@    @@@`      @@@@@;  
'''    @@@@         ''     @@@.    @@@;      @@@:            @@@;@@@@        @@@@@@@@@@@       @@@`         +@@@            `@@@       @@@,    @@@+      @@@ #@@@@@ @@@        @@@    @@@`      #@@@@@` 
'''    @@@@         ''     @@@`    @@@'      @@@.            @@@;@@@@        @@@@@@@@@@@       @@@`         #@@@            `@@@       @@@.    @@@+      @@@`@@@@@@ @@@        @@@    @@@`      ,@@@@@@ 
'''    @@@#         ''     @@@`    @@@+      @@@`            @@@'@@@;        @@@@@@@@@@@       @@@`         @@@@            `@@@       @@@.    @@@#      '@@:@@@@@@`@@@        @@@    @@@`       @@@@@@ 
'''    @@@'         ''     @@@`    @@@+      @@@.            @@@+@@@+        @@@@@@@@@@@       @@@`         @@@@            `@@@       @@@.    @@@#      .@@+@@@@@@:@@+        @@@    @@@`       #@@@@@+
'''    @@@'         ''     @@@`    @@@'      @@@.            @@@;@@@@        @@@+;;;;;;;       @@@`         #@@@            `@@@       @@@.    @@@+       @@@@@@'@@@@@,        @@@    @@@`        @@@@@@
'''    @@@'         ''     @@@.    @@@'      @@@:            @@@;@@@@        @@@:              @@@`         #@@@            `@@@       @@@,    @@@+       @@@@@'.@@@@@         @@@    @@@`        `@@@@@
'''    @@@'         ''     @@@,    @@@:      @@@+            @@@;;@@@:       @@@'              @@@`         '@@@            `@@@       @@@:    @@@;       @@@@@. @@@@@         @@@    @@@`         ,@@@@
'''    @@@'         ''     @@@:    @@@.      @@@@            @@@; @@@@       @@@#              @@@`         :@@@            `@@@       @@@'    @@@,       @@@@@  @@@@@         @@@    @@@`          '@@@
'''    @@@'         ''     @@@+    @@@`      @@@@            @@@; @@@@       #@@@              @@@.         .@@@:           `@@@       @@@#    @@@`       +@@@@  @@@@@         @@@    @@@`           @@@
'''    @@@'         ''     @@@@   ,@@@       #@@@            @@@; @@@@`      ;@@@      #       @@@'          @@@@           `@@@       @@@@   `@@@        :@@@@  @@@@+         @@@    @@@`           @@@
'''    @@@'         ''     '@@@   #@@@       ;@@@@   ,,      @@@; ,@@@#      `@@@.     @       @@@@  '       @@@@`   @      `@@@       ;@@@   '@@@        `@@@@  '@@@:         @@@    @@@`      @    @@@
'''    @@@'         ''     `@@@`  @@@@        @@@@# +@,      @@@;  @@@@       @@@@    @@       @@@@@@@       @@@@@..@@      `@@@        @@@.  @@@@         @@@'  ,@@@`         @@@    @@@`      @@`  @@@
'''    @@@'         ''      @@@@ +@@@:        @@@@@@@@,      @@@;  @@@@       @@@@@ `@@@       #@@@@@@       '@@@@@@@@      `@@@        @@@@ +@@@'         @@@.   @@@          @@@    @@@`      @@@@@@@@
'''    @@@'         ''      @@@@@@@@@         @@@@@@@@,      @@@;  '@@@:      '@@@@@@@@@       :@@@@@@        @@@@@@@@      `@@@        @@@@@@@@@          @@@    @@@          @@@    @@@`      @@@@@@@@
'''    @@@'         ''      `@@@@@@@@         `@@@@@@@,      @@@;   @@@@       @@@@@@@@#        @@@@@@        @@@@@@@@      `@@@         @@@@@@@@          #@@    @@@          @@@    @@@`      @@@@@@@+
'''    @@@'         ''       @@@@@@@           @@@@@@@,      @@@;   @@@@       #@@@@@@@         @@@@@@        `@@@@@@@      `@@@         @@@@@@@`          ;@@    @@#          @@@    @@@`      @@@@@@@ 
'''    @@@'         ''        @@@@@+            @@@@@@       @@@;   @@@@`       @@@@@@,         ,@@@@@         #@@@@@#      `@@@          @@@@@+           `@@    +@'          @@@    @@@`      .@@@@@@ 
:::    :::,         ::        `@@@'             `@@@@        ###;   ,###+        @@@@,           +@@@           +@@@:       `###           @@@+             @+    ,@.          ###    ###`        @@@@  
-->
<!DOCTYPE html>
<html>


<!-- Mirrored from koole.com/animation/?v=1.0.1 by HTTrack Website Copier/3.x [XR&CO'2014], Sun, 12 May 2024 00:23:52 GMT -->
<head>
	<!-- FORCE RELOAD OF THIS FILE -->
	<meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0">
	<meta http-equiv="expires" content="Sat, 31 Oct 2014 00:00:00 GMT">
	<meta http-equiv="pragma" content="no-cache">

	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
	<meta name="description" content="Koole animation" />

	<title>Koole animation</title>

	<link rel="stylesheet" type="text/css" href="animation_assets/css/style.css" />

	<!-- load GreenSock GSAP from CDN -->
	<script>
		// Segregate your own version by defining a window.GreenSockGlobals object where everything will be attached. 
		// EXAMPLE: rc.TweenMax.to(target, 1, {x:100, ease: rc.Sine.easeInOut});
		var rc = window.GreenSockGlobals = {};
	</script>
	<script src="../../cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>

	<!-- load main.js, ADD VERSION NUMBER -->
	<script src="animation_assets/js/main8ff3.js?v=202105250725"></script>

</head>

<body>
	<div id="animation_container">

		<div id="scaling_animation_container">

			<img id="static_background_image" src="animation_assets/img/static_background_no_frame_tinyPNG.png">

			<!-- animated assets -->

			<img id="trainYellow" class="absolute0" src="animation_assets/svg/TREIN2.svg">
			<img id="trainOrange" class="absolute0" src="animation_assets/svg/TREIN.svg">
			<img id="terminal" class="absolute0" src="animation_assets/img/KOOLETERMINAL.png">
			<!-- <img id="terminal" class="absolute0" src="animation_assets/svg/KOOLETERMINAL.svg"> -->
			<!-- KOOLETERMINAL.svg = 399KB vs. KOOLETERMINAL.png = 36KB-->
			<img id="robotarm" class="absolute0" src="animation_assets/svg/robotArm.svg">
			<img id="truck" class="absolute0" src="animation_assets/svg/truck.svg">
			<img id="boatBlue" class="absolute0" src="animation_assets/svg/SCHIPBLUE.svg">
			<img id="tanker" class="absolute0" src="animation_assets/svg/TANKER.svg">
			<img id="crane" class="absolute0" src="animation_assets/svg/KRAAN.svg">
			<img id="bicycle" class="absolute0" src="animation_assets/svg/BICYCLE.svg">
			<img id="bicycle" class="absolute0" src="animation_assets/svg/BICYCLE.svg">
			<img id="bicycle2" class="absolute0" src="animation_assets/svg/FIETS_BLOND.svg">

			<img id="tankBig" class="absolute0" src="animation_assets/img/tankBigShadow.png">
			<img id="tankBig2" class="absolute0" src="animation_assets/img/tankBigShadow.png">
			<img id="tankBig3" class="absolute0" src="animation_assets/img/tankBigShadow.png">
			<img id="tankSmall" class="absolute0" src="animation_assets/img/tankSmallShadow.png">
			<img id="tree" class="absolute0" src="animation_assets/svg/TREE.svg">
			<img id="tree2" class="absolute0" src="animation_assets/svg/TREE.svg">
			<img id="tree3" class="absolute0" src="animation_assets/svg/TREE.svg">
			<img id="iconbio" class="absolute0" src="animation_assets/svg/BIO_FUEL.svg">
			<img id="iconaviation" class="absolute0" src="animation_assets/svg/AVIATION_FUEL.svg">

			<img id="bicycle3" class="absolute0" src="animation_assets/svg/FIETS_BLOND_LINKS.svg">
			<img id="tankSmall2" class="absolute0" src="animation_assets/img/tankSmallShadow.png">

			<div id="globecontainer" class="absolute0">
				<img id="globe" class="absolute0" src="animation_assets/svg/GLOBE.svg">
				<div id="globetrotter1" class="globetrotter absolute0"></div>
				<div id="globetrotter2" class="globetrotter absolute0"></div>
				<div id="globetrotter3" class="globetrotter absolute0"></div>
				<div id="globetrotter4" class="globetrotter absolute0"></div>
				<div id="globetrotter5" class="globetrotter absolute0"></div>
				<div id="globetrotter6" class="globetrotter absolute0"></div>
				<div id="globetrotter7" class="globetrotter absolute0"></div>
				<div id="globetrotter8" class="globetrotter absolute0"></div>
				<div id="globetrotter9" class="globetrotter absolute0"></div>
			</div>

			<img id="extratree" class="absolute0" src="animation_assets/img/tree.png">
			<img id="extratree2" class="absolute0" src="animation_assets/img/tree.png">
			<img id="extratree3" class="absolute0" src="animation_assets/img/tree.png">
			<img id="extratree4" class="absolute0" src="animation_assets/img/tree.png">

			<img id="drone" class="absolute0" src="animation_assets/svg/DRONE.svg">
			<img id="drone2" class="absolute0" src="animation_assets/svg/DRONE.svg">

			<img id="smoke1" class="absolute0 transform_center" src="animation_assets/svg/smoke.svg">
			<img id="smoke2" class="absolute0 transform_center" src="animation_assets/svg/smoke.svg">
			<img id="smoke3" class="absolute0 transform_center" src="animation_assets/svg/smoke.svg">
			<img id="smoke4" class="absolute0 transform_center" src="animation_assets/svg/smoke.svg">
			<img id="smoke5" class="absolute0 transform_center" src="animation_assets/svg/smoke.svg">
			<img id="smoke6" class="absolute0 transform_center" src="animation_assets/svg/smoke.svg">
			<img id="smoke7" class="absolute0 transform_center" src="animation_assets/svg/smoke.svg">
			<img id="smoke8" class="absolute0 transform_center" src="animation_assets/svg/smoke.svg">
			<img id="smoke9" class="absolute0 transform_center" src="animation_assets/svg/smoke.svg">
			<img id="smoke10" class="absolute0 transform_center" src="animation_assets/svg/smoke.svg">
			<img id="smoke11" class="absolute0 transform_center" src="animation_assets/svg/smoke.svg">
			<img id="smoke12" class="absolute0 transform_center" src="animation_assets/svg/smoke.svg">
			<img id="smoke13" class="absolute0 transform_center" src="animation_assets/svg/smoke.svg">
			<img id="smoke14" class="absolute0 transform_center" src="animation_assets/svg/smoke.svg">
			<img id="smoke15" class="absolute0 transform_center" src="animation_assets/svg/smoke.svg">
			<img id="smoke16" class="absolute0 transform_center" src="animation_assets/svg/smoke.svg">

			<img id="chemicals" class="icon" src="animation_assets/svg/CHEMICALS.svg">
			<img id="oilminerals" class="icon" src="animation_assets/svg/oilminerals.svg">
			<img id="biofuel" class="icon" src="animation_assets/svg/biofuel.svg">
			<img id="edibles" class="icon" src="animation_assets/svg/edibels.svg">

			<img id="cartire" class="icon" src="animation_assets/svg/CARTIRE.svg">
			<img id="plastic" class="icon" src="animation_assets/svg/PLASTIC.svg">
			<img id="food" class="icon" src="animation_assets/svg/FOOD.svg">
			<img id="cosmetics" class="icon" src="animation_assets/svg/COSMETICS.svg">


			<div id="hotspots_container">
				<div id="click_close_popup"></div>
			</div>

			<!-- <img id="animation_overlay" src="animation_assets/img/animation-overlay.png"> -->
			<img id="animation_overlay" src="animation_assets/img/animation-overlay-round-shapes-tinyPNG.png">


		</div> <!-- end of scaling_animation_container -->

		<div id="infopopup">
			
			<h2 id="popupheader">Title</h2>
			<p id="popuptext">Text.</p>
			<a id="popuplink" target="_parent" href="https://www.google.com/">Read more</a>

			<div id="popupclosecontainer">
				<img id="popupclose" src="animation_assets/svg/cancel.svg">
			</div>
		</div>

	</div> <!-- end of animation_container -->

</body>


<!-- Mirrored from koole.com/animation/?v=1.0.1 by HTTrack Website Copier/3.x [XR&CO'2014], Sun, 12 May 2024 00:24:03 GMT -->
</html>