Updated to v2.0

- Based on the CodyHouse Framework
- Replaced jQuery with Vanilla JS
- SCSS and JS refectoring

Co-Authored-By: Sebastiano Guerriero <sebastiano-guerriero@users.noreply.github.com>

README.md

@@ -1,12 +1,17 @@
-Vertical Timeline
-=========
+# Responsive Vertical Timeline
 
 An easy to customize, responsive timeline.
 
-[Article on CodyHouse](http://codyhouse.co/gem/vertical-timeline/)
+[Article on CodyHouse](https://codyhouse.co/gem/vertical-timeline)
 
-[Demo](http://codyhouse.co/demo/vertical-timeline/index.html)
+[Demo](https://codyhouse.co/demo/vertical-timeline)
 
-[Terms](http://codyhouse.co/terms/)
+[License](https://codyhouse.co/license)
 
-Icons: [Nucleo](https://nucleoapp.com)
+## Dependencies
+
+This experiment is built upon the [CodyHouse Framework](https://github.com/CodyHouse/codyhouse-framework).
+
+## Credits
+
+Icons: [Nucleo Library](https://nucleoapp.com/)

assets/css/style.scss

@@ -0,0 +1,261 @@
+@import '../../../../codyhouse-framework/main/assets/css/_global.scss'; // ⚠️ make sure to import the CodyHouse framework
+@import url('https://fonts.googleapis.com/css?family=Droid+Serif|Open+Sans:400,700'); // custom font
+
+// -------------------------------------------------
+
+// Responsive Vertical Timeline - by CodyHouse.co
+
+// -------------------------------------------------
+
+:root {
+  // colors
+  @include defineColorHSL(--cd-color-1, 206, 21%, 24%); // Navy
+  @include defineColorHSL(--cd-color-2, 205, 38%, 89%); // Blue
+  @include defineColorHSL(--cd-color-3, 207, 10%, 55%); // Grey
+  @include defineColorHSL(--cd-color-4, 111, 51%, 60%); // Green
+  @include defineColorHSL(--cd-color-5, 356, 53%, 49%); // Red
+  @include defineColorHSL(--cd-color-6, 47, 85%, 61%);  // Yellow
+
+  // header
+  --cd-header-height: 200px;
+
+  // font
+  --font-primary: 'Droid Serif', serif;
+  --font-secondary: 'Open Sans', sans-serif;
+}
+
+@supports(--css: variables) {
+  :root {
+    @include breakpoint(md) {
+      --cd-header-height:  300px;
+    }
+  }
+}
+
+.cd-main-header {
+  height: var(--cd-header-height);
+  background: var(--cd-color-1);
+  color: var(--color-white);
+  @include fontSmooth;
+
+  h1 {
+    font-family: var(--font-secondary);
+    color: inherit;
+  }
+}
+
+.cd-timeline {
+  overflow: hidden;
+  padding: var(--space-lg) 0;
+  color: var(--cd-color-3);
+  background-color: lightness(var(--cd-color-2), 1.05);
+  font-family: var(--font-primary);
+
+  h2 {
+    font-family: var(--font-secondary);
+    font-weight: 700;
+  }
+}
+
+.cd-timeline__container {
+  position: relative;
+  padding: var(--space-md) 0;
+
+  &::before { // this is the timeline vertical line
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 18px;
+    height: 100%;
+    width: 4px;
+    background: var(--cd-color-2);
+  }
+
+  @include breakpoint(md) {
+    &::before {
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+  }
+}
+
+.cd-timeline__block {
+  display: flex;
+  position: relative;
+  z-index: 1; // make sure content is above the timeline vertical line
+  margin-bottom: var(--space-lg);
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  @include breakpoint(md) {
+    &:nth-child(even) {
+      flex-direction: row-reverse; // for even blocks -> lay out content from right to left
+    }
+  }
+}
+
+.cd-timeline__img {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  box-shadow: 0 0 0 4px var(--color-white), inset 0 2px 0 rgba(#000, 0.08), 0 3px 0 4px rgba(#000, 0.05);
+
+  img {
+    width: 24px;
+    height: 24px;
+  }
+
+  @include breakpoint(md) {
+    width: 60px;
+    height: 60px;
+    order: 1; // flex order -> place the image after cd-timeline__content
+    margin-left: calc(5% - 30px);
+    will-change: transform;
+
+    .cd-timeline__block:nth-child(even) & {
+      margin-right: calc(5% - 30px);
+    }
+  }
+}
+
+.cd-timeline__img--picture {
+  background-color: var(--cd-color-4);
+}
+
+.cd-timeline__img--movie {
+  background-color: var(--cd-color-5);
+}
+
+.cd-timeline__img--location {
+  background-color: var(--cd-color-6);
+}
+
+.cd-timeline__content {
+  flex-grow: 1; // expand element so that it takes up all the available space inside its parent
+  position: relative;
+  margin-left: var(--space-md);
+  background: var(--color-white);
+  border-radius: var(--radius);
+  padding: var(--space-md);
+  box-shadow: 0 3px 0 var(--cd-color-2); 
+
+  &::before { // triangle next to content block
+    content: '';
+    position: absolute;
+    top: 16px;
+    right: 100%;
+    @include triangle(left, 7px, var(--color-white));
+  }
+
+  h2 {
+    color: var(--cd-color-1);
+  }
+
+  @include breakpoint(md) {
+    width: 45%;
+    flex-grow: 0; // prevent element from growing inside its parent
+    will-change: transform;
+    margin: 0;
+    font-size: 0.8em;
+    --line-height-multiplier: 1.2;
+
+    &::before { // triangle
+      top: 24px;
+    }
+
+    .cd-timeline__block:nth-child(odd) &::before { // change triangle direction
+      right: auto;
+      left: 100%;
+      @include triangle(right, 7px, var(--color-white)); 
+    }
+  }
+}
+
+.cd-timeline__date {
+  color: alpha(var(--cd-color-3), 0.7);
+
+  @include breakpoint(md) {
+    position: absolute;
+    width: 100%;
+    left: 120%;
+    top: 20px;
+
+    .cd-timeline__block:nth-child(even) & {
+      left: auto;
+      right: 120%;
+      text-align: right;
+    }
+  }
+}
+
+@include breakpoint(md) { // animations
+  .cd-timeline__img--hidden, .cd-timeline__content--hidden {
+    visibility: hidden;
+  }
+
+  .cd-timeline__img--bounce-in {
+    animation: cd-bounce-1 0.6s;
+  }
+
+  .cd-timeline__content--bounce-in {
+    animation: cd-bounce-2 0.6s;       
+  }
+
+  .cd-timeline__block:nth-child(even) .cd-timeline__content--bounce-in {
+    animation-name: cd-bounce-2-inverse; 
+  }
+}
+
+
+@keyframes cd-bounce-1 {
+  0% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  60% {
+    opacity: 1;
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);    
+  }
+}
+
+@keyframes cd-bounce-2 {
+  0% {
+    opacity: 0;
+    transform: translateX(-100px);   
+  }
+
+  60% {
+    opacity: 1;
+    transform: translateX(20px);       
+  }
+
+  100% {
+    transform: translateX(0);       
+  }
+}
+
+@keyframes cd-bounce-2-inverse {
+  0% {
+    opacity: 0;
+    transform: translateX(100px);   
+  }
+
+  60% {
+    opacity: 1;
+    transform: translateX(-20px);
+  }
+
+  100% {
+    transform: translateX(0);    
+  }
+}

js/main.js → assets/js/main.js

@@ -1,25 +1,25 @@
 (function(){
-    // Vertical Timeline - by CodyHouse.co
+  // Vertical Timeline - by CodyHouse.co
 	function VerticalTimeline( element ) {
 		this.element = element;
-		this.blocks = this.element.getElementsByClassName("js-cd-block");
-		this.images = this.element.getElementsByClassName("js-cd-img");
-		this.contents = this.element.getElementsByClassName("js-cd-content");
+		this.blocks = this.element.getElementsByClassName("cd-timeline__block");
+		this.images = this.element.getElementsByClassName("cd-timeline__img");
+		this.contents = this.element.getElementsByClassName("cd-timeline__content");
 		this.offset = 0.8;
 		this.hideBlocks();
 	};
 
 	VerticalTimeline.prototype.hideBlocks = function() {
-		//hide timeline blocks which are outside the viewport
 		if ( !"classList" in document.documentElement ) {
-			return;
+			return; // no animation on older browsers
 		}
+		//hide timeline blocks which are outside the viewport
 		var self = this;
 		for( var i = 0; i < this.blocks.length; i++) {
 			(function(i){
 				if( self.blocks[i].getBoundingClientRect().top > window.innerHeight*self.offset ) {
-					self.images[i].classList.add("cd-is-hidden"); 
-					self.contents[i].classList.add("cd-is-hidden"); 
+					self.images[i].classList.add("cd-timeline__img--hidden"); 
+					self.contents[i].classList.add("cd-timeline__content--hidden"); 
 				}
 			})(i);
 		}
@@ -32,12 +32,12 @@
 		var self = this;
 		for( var i = 0; i < this.blocks.length; i++) {
 			(function(i){
-				if( self.contents[i].classList.contains("cd-is-hidden") && self.blocks[i].getBoundingClientRect().top <= window.innerHeight*self.offset ) {
+				if( self.contents[i].classList.contains("cd-timeline__content--hidden") && 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-is-hidden");
-					self.contents[i].classList.remove("cd-is-hidden");
+					self.images[i].classList.remove("cd-timeline__img--hidden");
+					self.contents[i].classList.remove("cd-timeline__content--hidden");
 				}
 			})(i);
 		}