Improve timeline page animation

Instead of just leaving all elements like they are when
bounce-in is done, when they leave from view, make them bounce out
and hidden again to let them bounce-in again.

1 files changed, 35 insertions, 2 deletions

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;
 	};