Updates JS libraries

index.html

@@ -98,9 +98,7 @@ <h2 class="fullview__item-title">Rome</h2>
 	</main>
 	<script src="js/imagesloaded.pkgd.min.js"></script>
 	<script src="js/three.min.js"></script>
-	<script src="js/TweenLite.min.js"></script>
-	<script src="js/CSSPlugin.min.js"></script>
-	<script src="js/EasePack.min.js"></script>
+	<script src="js/gsap.min.js"></script>
 	<script src="js/GridToFullscreenEffect.js"></script>
 	<script src="js/basicDemo.js"></script>
 	<script>

index2.html

@@ -92,9 +92,7 @@ <h2 class="fullview__item-title">Nature</h2>
 	</main>
 	<script src="js/imagesloaded.pkgd.min.js"></script>
 	<script src="js/three.min.js"></script>
-	<script src="js/TweenLite.min.js"></script>
-	<script src="js/CSSPlugin.min.js"></script>
-	<script src="js/EasePack.min.js"></script>
+	<script src="js/gsap.min.js"></script>
 	<script src="js/GridToFullscreenEffect.js"></script>
 	<script src="js/basicDemo.js"></script>
 	<script>

index3.html

@@ -92,9 +92,7 @@ <h2 class="fullview__item-title">Tokyo</h2>
     </main>
     <script src="js/imagesloaded.pkgd.min.js"></script>
     <script src="js/three.min.js"></script>
-    <script src="js/TweenLite.min.js"></script>
-    <script src="js/CSSPlugin.min.js"></script>
-    <script src="js/EasePack.min.js"></script>
+    <script src="js/gsap.min.js"></script>
     <script src="js/GridToFullscreenEffect.js"></script>
     <script src="js/basicDemo.js"></script>
     <script>

index4.html

@@ -92,9 +92,7 @@ <h2 class="fullview__item-title">Wisma Green</h2>
 	</main>
 	<script src="js/imagesloaded.pkgd.min.js"></script>
 	<script src="js/three.min.js"></script>
-	<script src="js/TweenLite.min.js"></script>
-	<script src="js/CSSPlugin.min.js"></script>
-	<script src="js/EasePack.min.js"></script>
+	<script src="js/gsap.min.js"></script>
 	<script src="js/GridToFullscreenEffect.js"></script>
 	<script src="js/basicDemo.js"></script>
 	<script>

index5.html

@@ -92,9 +92,7 @@ <h2 class="fullview__item-title">Jump in</h2>
 	</main>
 	<script src="js/imagesloaded.pkgd.min.js"></script>
 	<script src="js/three.min.js"></script>
-	<script src="js/TweenLite.min.js"></script>
-	<script src="js/CSSPlugin.min.js"></script>
-	<script src="js/EasePack.min.js"></script>
+	<script src="js/gsap.min.js"></script>
 	<script src="js/GridToFullscreenEffect.js"></script>
 	<script src="js/basicDemo.js"></script>
 	<script>

index6.html

@@ -98,9 +98,7 @@ <h2 class="fullview__item-title">Inner life</h2>
 	</main>
 	<script src="js/imagesloaded.pkgd.min.js"></script>
 	<script src="js/three.min.js"></script>
-	<script src="js/TweenLite.min.js"></script>
-	<script src="js/CSSPlugin.min.js"></script>
-	<script src="js/EasePack.min.js"></script>
+	<script src="js/gsap.min.js"></script>
 	<script src="js/GridToFullscreenEffect.js"></script>
 	<script src="js/basicDemo.js"></script>
 	<script>

js/GridToFullscreenEffect.js

@@ -2,7 +2,7 @@
  * A grid items to fullscreen transition
  * @module GridToFullscreenEffect
  * @author Daniel Velasquez
- * @version 1.0.0
+ * @version 1.1.0
  */
 
 class GridToFullscreenEffect {
@@ -130,18 +130,17 @@ class GridToFullscreenEffect {
     const textures = [];
     for (let i = 0; i < images.length; i++) {
       const imageSet = images[i];
-      const largeTexture = new THREE.Texture(imageSet.large.image);
+      const loader = new THREE.TextureLoader();
+      const largeTexture = loader.load(imageSet.large.image.src);
 
       // So It doesnt get resized to the power of 2
       largeTexture.generateMipmaps = false;
       largeTexture.wrapS = largeTexture.wrapT = THREE.ClampToEdgeWrapping;
       largeTexture.minFilter = THREE.LinearFilter;
-      largeTexture.needsUpdate = true;
-      const smallTexture = new THREE.Texture(imageSet.small.image);
+      const smallTexture = loader.load(imageSet.small.image.src);
       smallTexture.generateMipmaps = false;
       smallTexture.wrapS = smallTexture.wrapT = THREE.ClampToEdgeWrapping;
       smallTexture.minFilter = THREE.LinearFilter;
-      smallTexture.needsUpdate = true;
       const textureSet = {
         large: {
           element: imageSet.large.element,
@@ -207,7 +206,7 @@ class GridToFullscreenEffect {
     );
 
     const segments = 128;
-    var geometry = new THREE.PlaneBufferGeometry(1, 1, segments, segments);
+    var geometry = new THREE.PlaneGeometry(1, 1, segments, segments);
     function isFunction(functionToCheck) {
       return (
         functionToCheck &&
@@ -263,10 +262,10 @@ class GridToFullscreenEffect {
     this.isAnimating = true;
     if (this.options.onToGridStart)
       this.options.onToGridStart({ index: this.currentImageIndex });
-    this.tween = TweenLite.to(
+    this.tween = gsap.to(
       this.uniforms.uProgress,
-      this.options.timing.duration,
       {
+        duration: this.options.timing.duration,
         value: 0,
         ease: this.options.easings.toGrid,
         onUpdate: () => {
@@ -375,10 +374,10 @@ class GridToFullscreenEffect {
     if (this.options.onToFullscreenStart)
       this.options.onToFullscreenStart({ index: this.currentImageIndex });
 
-    this.tween = TweenLite.to(
+    this.tween = gsap.to(
       this.uniforms.uProgress,
-      this.options.timing.duration,
       {
+        duration: this.options.timing.duration,
         value: 1,
         ease: this.options.easings.toFullscreen,
         onUpdate: () => {