Merge branch 'master' into allow-internal-dns-api

2 files changed, 115 insertions, 2 deletions

diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css
index 07e17e15..c7137fde 100644
--- a/pydis_site/static/css/home/timeline.css
+++ b/pydis_site/static/css/home/timeline.css
@@ -3652,6 +3652,14 @@ mark {
         -webkit-animation-name: cd-bounce-2-inverse;
         animation-name: cd-bounce-2-inverse
     }
+    .cd-timeline__img--bounce-out {
+        -webkit-animation: cd-bounce-out-1 0.6s;
+        animation: cd-bounce-out-1 0.6s;
+    }
+    .cd-timeline__content--bounce-out {
+        -webkit-animation: cd-bounce-out-2 0.6s;
+        animation: cd-bounce-out-2 0.6s;
+    }
 }
 
 @-webkit-keyframes cd-bounce-1 {
@@ -3755,3 +3763,75 @@ mark {
         transform: translateX(0)
     }
 }
+
+@-webkit-keyframes cd-bounce-out-1 {
+    0% {
+        opacity: 1;
+        -webkit-transform: scale(1);
+        transform: scale(1)
+    }
+
+    60% {
+        -webkit-transform: scale(1.2);
+        transform: scale(1.2)
+    }
+
+    100% {
+        opacity: 0;
+        -webkit-transform: scale(0.5);
+        transform: scale(0.5)
+    }
+}
+
+@keyframes cd-bounce-out-1 {
+    0% {
+        opacity: 1;
+        -webkit-transform: scale(1);
+        transform: scale(1);
+    }
+
+    60% {
+        -webkit-transform: scale(1.2);
+        transform: scale(1.2);
+    }
+
+    100% {
+        opacity: 0;
+        -webkit-transform: scale(0.5);
+        transform: scale(0.5);
+    }
+}
+
+@-webkit-keyframes cd-bounce-out-2 {
+    0% {
+        opacity: 1;
+        -webkit-transform: translateX(0);
+        transform: translateX(0)
+    }
+    60% {
+        -webkit-transform: translateX(20px);
+        transform: translateX(20px)
+    }
+    100% {
+        opacity: 0;
+        -webkit-transform: translateX(-100px);
+        transform: translateX(-100px)
+    }
+}
+
+@keyframes cd-bounce-out-2 {
+    0% {
+        opacity: 1;
+        -webkit-transform: translateX(0);
+        transform: translateX(0)
+    }
+    60% {
+        -webkit-transform: translateX(20px);
+        transform: translateX(20px)
+    }
+    100% {
+        opacity: 0;
+        -webkit-transform: translateX(-100px);
+        transform: translateX(-100px)
+    }
+}
diff --git a/pydis_site/static/js/timeline/main.js b/pydis_site/static/js/timeline/main.js
index a4bf4f31..2ff7df57 100644
--- a/pydis_site/static/js/timeline/main.js
+++ b/pydis_site/static/js/timeline/main.js
@@ -1,5 +1,5 @@
 (function(){
-  // Vertical Timeline - by CodyHouse.co
+  // Vertical Timeline - by CodyHouse.co (modified)
 	function VerticalTimeline( element ) {
 		this.element = element;
 		this.blocks = this.element.getElementsByClassName("cd-timeline__block");
@@ -32,17 +32,36 @@
 		var self = this;
 		for( var i = 0; i < this.blocks.length; i++) {
 			(function(i){
-				if( self.contents[i].classList.contains("cd-timeline__content--hidden") && self.blocks[i].getBoundingClientRect().top <= window.innerHeight*self.offset ) {
+				if((self.contents[i].classList.contains("cd-timeline__content--hidden") || self.contents[i].classList.contains("cd-timeline__content--bounce-out")) && self.blocks[i].getBoundingClientRect().top <= window.innerHeight*self.offset ) {
 					// add bounce-in animation
 					self.images[i].classList.add("cd-timeline__img--bounce-in");
 					self.contents[i].classList.add("cd-timeline__content--bounce-in");
 					self.images[i].classList.remove("cd-timeline__img--hidden");
 					self.contents[i].classList.remove("cd-timeline__content--hidden");
+					self.images[i].classList.remove("cd-timeline__img--bounce-out");
+					self.contents[i].classList.remove("cd-timeline__content--bounce-out");
 				}
 			})(i);
 		}
 	};
 
+	VerticalTimeline.prototype.hideBlocksScroll = function () {
+		if ( ! "classList" in document.documentElement ) {
+			return;
+		}
+		var self = this;
+		for( var i = 0; i < this.blocks.length; i++) {
+			(function(i){
+				if(self.contents[i].classList.contains("cd-timeline__content--bounce-in") && self.blocks[i].getBoundingClientRect().top > window.innerHeight*self.offset ) {
+					self.images[i].classList.remove("cd-timeline__img--bounce-in");
+					self.contents[i].classList.remove("cd-timeline__content--bounce-in");
+					self.images[i].classList.add("cd-timeline__img--bounce-out");
+					self.contents[i].classList.add("cd-timeline__content--bounce-out");
+				}
+			})(i);
+		}
+	}
+
 	var verticalTimelines = document.getElementsByClassName("js-cd-timeline"),
 		verticalTimelinesArray = [],
 		scrolling = false;
@@ -60,11 +79,25 @@
 				(!window.requestAnimationFrame) ? setTimeout(checkTimelineScroll, 250) : window.requestAnimationFrame(checkTimelineScroll);
 			}
 		});
+
+		function animationEnd(event) {
+			if (event.target.classList.contains("cd-timeline__img--bounce-out")) {
+				event.target.classList.add("cd-timeline__img--hidden");
+				event.target.classList.remove("cd-timeline__img--bounce-out");
+			} else if (event.target.classList.contains("cd-timeline__content--bounce-out")) {
+				event.target.classList.add("cd-timeline__content--hidden");
+				event.target.classList.remove("cd-timeline__content--bounce-out");
+			}
+		}
+
+		window.addEventListener("animationend", animationEnd);
+		window.addEventListener("webkitAnimationEnd", animationEnd);
 	}
 
 	function checkTimelineScroll() {
 		verticalTimelinesArray.forEach(function(timeline){
 			timeline.showBlocks();
+			timeline.hideBlocksScroll();
 		});
 		scrolling = false;
 	};