diff --git a/css/style.css b/css/style.css
index 0527770..58d145c 100644
--- a/css/style.css
+++ b/css/style.css
@@ -182,6 +182,12 @@ header h1 {
     -moz-animation: cd-bounce-1 0.6s;
     animation: cd-bounce-1 0.6s;
   }
+  .cssanimations .cd-timeline-img.bounce-out {
+    visibility: hidden;
+    -webkit-animation: cd-bounce-3 0.6s;
+    -moz-animation: cd-bounce-3 0.6s;
+    animation: cd-bounce-3 0.6s;
+  }
 }
 
 @-webkit-keyframes cd-bounce-1 {
@@ -241,6 +247,68 @@ header h1 {
     transform: scale(1);
   }
 }
+
+@-webkit-keyframes cd-bounce-3 {
+  0% {
+    opacity: 1;
+    -webkit-transform: scale(0.5);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale(1.2);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(0);
+  }
+}
+@-moz-keyframes cd-bounce-3 {
+  0% {
+    opacity: 1;
+    -webkit-transform: scale(0.5);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale(1.2);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(0);
+  }
+}
+@keyframes cd-bounce-3 {
+  0% {
+    opacity: 1;
+    -webkit-transform: scale(0.5);
+    -moz-transform: scale(0.5);
+    -ms-transform: scale(0.5);
+    -o-transform: scale(0.5);
+    transform: scale(0.5);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale(1.2);
+    -moz-transform: scale(1.2);
+    -ms-transform: scale(1.2);
+    -o-transform: scale(1.2);
+    transform: scale(1.2);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(0);
+    -moz-transform: scale(0);
+    -ms-transform: scale(0);
+    -o-transform: scale(0);
+    transform: scale(0);
+  }
+}
+
 .cd-timeline-content {
   position: relative;
   margin-left: 60px;
@@ -293,7 +361,7 @@ header h1 {
   border: 7px solid transparent;
   border-right: 7px solid white;
 }
-@media only screen and (min-width: 768px) {
+@media only screen and (min-width: 1170px) {
   .cd-timeline-content h2 {
     font-size: 20px;
     font-size: 1.25rem;
@@ -357,6 +425,11 @@ header h1 {
     -moz-animation: cd-bounce-2 0.6s;
     animation: cd-bounce-2 0.6s;
   }
+  .cssanimations .cd-timeline-content.bounce-out {
+    -webkit-animation: cd-bounce-4-inverse 0.6s;
+    -moz-animation: cd-bounce-4-inverse 0.6s;
+    animation: cd-bounce-4-inverse 0.6s;
+  }
 }
 
 @media only screen and (min-width: 1170px) {
@@ -366,6 +439,11 @@ header h1 {
     -moz-animation: cd-bounce-2-inverse 0.6s;
     animation: cd-bounce-2-inverse 0.6s;
   }
+  .cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-out {
+    -webkit-animation: cd-bounce-4 0.6s;
+    -moz-animation: cd-bounce-4 0.6s;
+    animation: cd-bounce-4 0.6s;
+  }
 }
 @-webkit-keyframes cd-bounce-2 {
   0% {
@@ -481,3 +559,51 @@ header h1 {
     transform: translateX(0);
   }
 }
+
+@-webkit-keyframes cd-bounce-4 {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(100px, 0, 0);
+    transform: translate3d(100px, 0, 0);
+  }
+}
+
+@keyframes cd-bounce-4 {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(100px, 0, 0);
+    transform: translate3d(100px, 0, 0);
+  }
+}
+
+@-webkit-keyframes cd-bounce-4-inverse {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(-100px, 0, 0);
+    transform: translate3d(-100px, 0, 0);
+  }
+}
+
+@keyframes cd-bounce-4-inverse {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3d(-100px, 0, 0);
+    transform: translate3d(-100px, 0, 0);
+  }
+}
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
index 1cec44d..78a1fd1 100644
--- a/js/main.js
+++ b/js/main.js
@@ -9,10 +9,16 @@ jQuery(document).ready(function($){
 	});
 
 	//on scolling, show/animate timeline blocks when enter the viewport
+	//fadeout/animate timeline when scrollup the viewport
 	$(window).on('scroll', function(){
 		$timeline_block.each(function(){
-			if( $(this).offset().top <= $(window).scrollTop()+$(window).height()*0.75 && $(this).find('.cd-timeline-img').hasClass('is-hidden') ) {
-				$(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden').addClass('bounce-in');
+			if( $(this).offset().top < $(window).scrollTop()+$(window).height()*0.75 && $(this).find('.cd-timeline-img').is('.is-hidden, .bounce-out') ) {
+                    $(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden bounce-out').addClass('bounce-in');
+            }
+			if($(this).offset().top >= $(window).scrollTop()+$(window).height()*0.75 && $(this).find('.cd-timeline-img').is('.bounce-in')) {
+				$(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('bounce-in').addClass('bounce-out');   
+			} else if($(this).offset().top >= $(window).scrollTop()+$(window).height()*0.80 && $(this).find('.cd-timeline-img').is('.bounce-out')) {
+				$(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('bounce-out').addClass('is-hidden');   
 			}
 		});
 	});