June 12, 2014 | 197 Feedbacks

Vertical Timeline

Today's resource is an easy to customize, responsive timeline. We used some CSS3 tricks and a bit of jQuery to create some bounce animations that affect desktop users only, while on mobile the structure is more minimal.

Browser support

ie
Chrome
Firefox
Safari
Opera

We all are quite familiar with vertical timelines: all instant messaging applications use them. A current trend in web design is to use a similar structure, but to show a process rather than a sequence of events. That is why timeline-like structures are often used for the “How it works” page.

The inspiration for this nugget came from the Zurb University page. The result is very clean yet dynamic, with room for big illustrations in the center.

Icons: Nucleo Library

Creating the structure

We wrapped the entire timeline into a <section> element. The .cd-timeline-block div represents a “block” of content. We finally split the image/icon and the text content into 2 separates divs.

</div>

<h2>Title of section 1</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>

</div>

</div>

</div>

</section>

Adding style

We used a ::before selector in absolute position to create the vertical line. Images/icons are in absolute position too, this way it was super easy to create the responsive structure simply by adding a margin-left to the text content.

#cd-timeline {

position: relative;

padding: 2em 0;

margin-top: 2em;

margin-bottom: 2em;

}

#cd-timeline::before {

/* this is the vertical line */

content: '';

position: absolute;

top: 0;

left: 18px;

height: 100%;

width: 4px;

background: #d7e4ed;

}

2 bounce-in animations, both for the image/icon and the text content, have been created and are visible only for desktop users. For the animation to work we had to create 2 classes: .is-hidden, which is used to hide by default all the content blocks that are off the viewport; when the user scrolls down, we add a .bounce-in class to both the .cd-timeline-img and .cd-timeline-content to make the elements visible and trigger the animation.

.cssanimations .cd-timeline-img.is-hidden {

visibility: hidden;

}

.cssanimations .cd-timeline-img.bounce-in {

visibility: visible;

animation: cd-bounce-1 0.6s;

}

@keyframes cd-bounce-1 {

0% {

opacity: 0;

transform: scale(0.5);

}

60% {

opacity: 1;

transform: scale(1.2);

}

100% {

transform: scale(1);

}

Events handling

As explained in the “Adding style” section, we used jQuery to hide content blocks which are off the viewport, using the class .is-hidden. When user scrolls and a new block enters the viewport, we add the class .bounce-in to both .cd-timeline-img and .cd-timeline-content (and remove the .is-hidden class) to trigger the animation.

$(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');

}

});

Changelog

Jun 17, 2015

Minor js improvements

Jun 12, 2014

Resource released by CodyHouse

Sebastiano Guerriero

UI/UX designer, with a huge passion for Nutella. Co-Founder of CodyHouse. You can follow him on Twitter or Dribbble.

Nicklas

Elliot Condon does something similar on his website (http://www.elliotcondon.com/ ), but with a colored stem in the middle. Pretty cool.
- Sebastiano Guerriero
  
  Cool effect indeed! We’ll keep this in mind for a future resource
Marc Tannous

Sebastiano, can you please provide a little bit of extra code here in the comments for people who are just starting out as to how elliot condon did the effect with the color change as you scroll? The link provided by the other commentor, I mean.

Thank you, keep up the great free snippets,
- Sebastiano Guerriero
  
  Hey Marc, I think I’m gonna make a different version of this timeline, with the cool effect you see on Condon’s website, and publish it as a new resource. Stay tuned ;)
- Nicklas
  
  The basic idea is not to color the stem itself, but rather to use a background color and then put masking images on top of it. See this image from his website: http://www.elliotcondon.com/wp-content/themes/elliotcondon/images/sprite.png The (seemingly) white area in the dark part is actually transparent, and that is where the background color shines through. It’s pretty clever!
  - Marc Tannous
    
    I have some ideas regarding how to do it but I am not a developer, and that’s why I’d love the guys from codyhouse to come up with a variant that includes this.
Mihai

How is this looking in IE8 ?

Does it look like boxes stack on top of each other or really bad ?
- Sebastiano Guerriero
  
  Hey @mslujitoru:disqus, I honestly haven’t checked on IE older than 9 (where it works just fine).
http://camgould.com/ Cam

I like! Smooth and lite. Thanks Sebastiano!
http://www.iopan.co.uk/ Richard Proffitt

Perfect, ideal for my online résumé…
chan ho Lee

Thanks Sebastiano, um.. how do i fixed header?
Ae SuPattra

Thanks Sebastiano, your timeline is so amazing.

If I want to add new div, it’s about year for separating timeline by year.
How’s the code it will be? I try to do but every after new div I insert (new div align center), the block will show the same side as the above, it’s not switch side.
- http://codyhouse.co/ Sebastiano Guerriero
  
  Hey @aesupattra:disqus, you need to insert a new inside the section #cd-timeline (with a class .cd-timeline-block), then create the “year” element, and give it an absolute position to handle its position (on a side for mobile devices, in the center on desktop devices)
  - Ae SuPattra
    
    Many thanks about your suggestion, I will try it :)
Filip Meštrić

Hello,

First of all, thanks for the wonderful example! It works like a charm!

I started to browse through the source code and I wanted to make position of each timeline box position either left or right from the line, but couldn’t find a way You define position. Could you point that out?

Thanks in Advance!
-Filip
- http://codyhouse.co/ Sebastiano Guerriero
  
  Hey Filip Meštrić,
  
  Inside the CSS file you should play with this piece of code:
  
  .cd-timeline-block:nth-child(even) .cd-timeline-content {
  float: right; } .cd-timeline-block:nth-child(even) .cd-timeline-content::before { top: 24px; left: auto; right: 100%; border-color: transparent; border-right-color: white; } .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more { float: right; } .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date { left: auto; right: 122%; text-align: right;
  }
  - http://filip-mestric.iz.hr/ Filip Meštrić
    
    Thank you for fast and nice reply!
torii

This is beautiful! I am so glad I did another search for vertical timelines, because there were almost none that I could use a couple months ago when I checked. Question: Can you help me troubleshoot why the “bounce-in” isn’t working? I’ve had to modify this to work in the Weebly environment, so here is some of my HTML:

{main-wrap-1:content global=”false”}
Jan 14

{main-wrap-2:content global=”false”}
Jan 18

{main-wrap-3:content global=”false”}
Jan 24

and CSS:

/* CUSTOM for timeline content areas
——————————————————————————–*/
#main-wrap-1 {
padding: 20px 0;
}

#main-wrap-1 .container {
padding:50px 0;
}

#main-wrap-2 {
padding: 20px 0;
}
#main-wrap-2 .container {
padding:50px 0;
}

#main-wrap-3 {
padding: 20px 0;
}
#main-wrap-3 .container {
padding:50px 0;
}

____________________________________________
the Weebly can’t have any file structure so all the js and image are in files/theme/ , so this is how the js is called in the html:

any ideas??

Thank you!!!
Dylan van den Brink

Hello,

Very nice example, but i have a question. I played a bit with changing the desktop design to show it like the mobile design, I want to place the vertical line to the side and the content on the right of the line.

So i changed the code a bit and it works but with the changes the bounce animations are also on on mobile devices and they just don’t work that well on there, so how do i change the code to show the animations only if the user is on a larger device?

Thanks in advance!
- http://codyhouse.co/ Sebastiano Guerriero
  
  Hi Dylan, make sure to remove the animations on mobile (animation: cd-bounce-1 0.6s; and animation: cd-bounce-2 0.6s;) and put them back – on the same elements – on large devices by using a media query:
  
  @media only screen and (min-width: 1170px) {
  
  …
  }
Manoel

Hi Sebatiano! This code is awesome. Really smotth and modern. I’m having some bugs in IE 10…..the animation and position are not working. Do you have any suggestion on how to fix it?

Here´s the link: http://sustentabilidade.cnseg.org.br/?page_id=2747
- http://codyhouse.co/ Sebastiano Guerriero
  
  Hi Manoel, looks like something is off with the media queries. You could try by changing the 1170px breakpoint to something lower.
  - Manoel
    
    Thanks a lot for your answer Sebastiano! I’ve changed the media querie but it only fixed the positioning. Is there any fix for the bounce “animation” to work on IE?
    - http://codyhouse.co/ Sebastiano Guerriero
      
      Make sure to have the cd-bounce animation inside your media query
      
      @media only screen and (min-width: 1170px) {
      
      .cd-timeline-img {
      
      width: 60px;
      
      height: 60px;
      
      left: 50%;
      
      margin-left: -30px;
      
      /* Force Hardware Acceleration in WebKit */
      
      -webkit-transform: translateZ(0);
      
      -webkit-backface-visibility: hidden;
      
      }
      
      .cssanimations .cd-timeline-img.is-hidden {
      
      visibility: hidden;
      
      }
      
      .cssanimations .cd-timeline-img.bounce-in {
      
      visibility: visible;
      
      -webkit-animation: cd-bounce-1 0.6s;
      
      -moz-animation: cd-bounce-1 0.6s;
      
      animation: cd-bounce-1 0.6s;
      
      }
      
      }
Lodu Chand

Hi Sebastiano, great stuff! I really like the icons, where are they from?
- http://codyhouse.co/ Sebastiano Guerriero
  
  Hey @lodu_chand:disqus, thanks. I created those icons on the fly while working on the resource
Alex

Hi I am just starting out, how would I integrate this into my wordpress website? Would I upload the files given to me on the download or should I post the code straight on the theme? Sorry for the lack of knowledge just started to learn how to create websites. Thanks in advance Sebastiano.
Tom

Beautiful layout Sebastiano. I was wondering if there is any license restrictions, personal or commercial, to using your code?
- http://codyhouse.co/ Sebastiano Guerriero
  
  Here is the terms page ;) http://codyhouse.co/terms/
Michael Browne

Hi Sebastiano is there a way to implement this into an email. I am not sure how it could be done maybe without the bounce in effect?? Any ideas?
- http://codyhouse.co/ Sebastiano Guerriero
  
  Hi Michael, you should remove for sure the bounce effect. Also you may want to stick with the style we used for small devices (eliminating the media queries > 1170px and their content)
  - Michael Browne
    
    Hi Sebastiano, I have got it to work responsively in a mail which is great I just want to know if its possible to reduce the gaps between the circular markers on the timeline and bring it all closer together.
    - http://codyhouse.co/ Sebastiano Guerriero
      
      the gasps depend by the height of the content (.cd-timeline-content), therefore I think the only way to reduce the distance is by adding less content (or using a smaller font-size ;))
http://www.brinfosolutions.in/ Em Ji Madhu

hello there.. First of all i love this work of you… its really awesome.. i tried so many timelines.. but this one is what i wanted.. thank you so much for sharing this with me.. i have a problem though.. i have implemented this on my site..

but just like in the picture one it collapses with my menu… i have implemented absolute to my theme.. i havent edited anything… i try to remove or change some properties.. but nothing works on it.. can you please help me to solve this one? please..

and i have inculded other image which is a present layout of that page.. so please help me sir..

Thanks in advance…!
- http://codyhouse.co/ Sebastiano Guerriero
  
  Looks like a problem with the clear property to me. Are you sure you cleared all of your floating elements (before adding the timeline)?
labadz

This is a brilliant timeline, but I noticed in the downloaded resources that the sass files / css files are MUCH more robust than what is presented here. I would be interested in knowing why you used Bourbon, and set up your file structure the way you did. Would it be possible to get this in perhaps a more detailed tutorial?
- http://codyhouse.co/ Sebastiano Guerriero
  
  I think we’ll publish a tutorial soon to explain why we use that structure for our files. About Bourbon, we use it because it’s very lightweight compared to Compass (anyway using a a different SASS mixin library should not be an issue since we use just a few mixins in our resources)

MartinBuchalik

A great piece of code!
One idea for performance stabilisation:
Add another class “unchanged” to
When the bounce-in and everything else is done, simply remove this class, so that the check for scrolling doesn’t affect this item.

var $timeline_block = $('.cd-timeline-block.unchanged');

[...]

$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');

$timeline_block.removeClass('unchanged');

}

});

The page otherwise cannot be scrolled smoothly (on FF 31.0 , Win 8.1 64 bit) when there are more than ca. 30 items.

Tomáš Zajac

Awesome code! But one question, is it possible to be preloaded more than one item?
- http://codyhouse.co/ Sebastiano Guerriero
  
  Hi @tom_zajac:disqus, the way you preload the items depends by the .bounce-in class. You can manage that class to preload more items
Aquib

Hey, Sebastiano Guerriero I think mine is not working on Chrome, it get still timeline on the left and all the block on the right without animation, can you please see this issue.
- Aquib
  
  okay, I got it. I actually have to zoom out my browser to work
Kris Jolls

Lost and re-found this! Has anyone implemented this into a WordPress site? I’m about to give it a whirl as I want the client to be able to manage the content.

Love the design Great Work.
Sony AK

Hei hei, I create website based on this lovely code! See at http://www.corruptdb.org
Hiral Patwa

Hey! Thanks a lot for this tutorial, it has helped me a lot!
I was hoping to implement this on my wordpress website, could you help me out in how to do so?

Thanks once again!

Avvist

Hey.
This looks great!
One question;

How can I choose which side the timeline-block is placed on?
I’d like to keep the vertical line as a separator between two projects sharing a timeline. Is it possible?
Thanks in advance!

http://codyhouse.co/ Sebastiano Guerriero

If you’re trying to move the vertical line, you can just play with its top/right/left/bottom values (the vertical line is the ::before pseudo element of the #cd-timeline)

Avvist

Dear Sebastiano.
Thanks for the reply! :) – This was not quite what I was trying to achieve, though. I may have been a little vague, so please let me try again.

By default, the timeline blocks are alternating between left side and right side of the vertical line.
This is perfect, but sometimes I’d like to have two or three blocks on the same side of the line.

So I would like to keep the vertical line in center, but pick which side the block is placed on. Can I use e.g. float:left?

I’ve attached an image trying to illustrate the same. :)

Hope you can help me. :)

Thanks again!

http://codyhouse.co/ Sebastiano Guerriero

oh I see now! You have to look for this piece of code:

.cd-timeline-block:nth-child(even) .cd-timeline-content {

float: right;

}

.cd-timeline-block:nth-child(even) .cd-timeline-content::before {

top: 24px;

left: auto;

right: 100%;

border-color: transparent;

border-right-color: white;

}

.cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {

float: right;

}

.cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {

left: auto;

right: 122%;

text-align: right;

}

Basically here we are saying ‘on even blocks we want to change the positioning of the content’. If you want more control, use a class instead (replacing .cd-timeline-block:nth-child(even)). This way you can add this class to the .cd-timeline-block when you want the block to move to the right.

Avvist

Dear Sebastiano.

Thank you! You are the best! :D

I almost got it. But I have one last struggle, and hope maybe you can help me with that as well. :)

I changed .cd-timeline-block:nth-child(even) to .cd-timeline-block-right, and adjusted throughout the css. Now the blocks are placed perfectly! But —

The bounce-in animation is not working on the blocks placed on the right hand side.

I believe this is because I have now hampered with the generic structure of your code, so that things are not properly assigned in the js-file. I located the following in main.js;

var $timeline_block = $(‘.cd-timeline-block’);

– How can I reference the other class as well, .cd-timeline-block-right, so that this is included in your js-magic?

My js-skills are, as you probably see, practically non-existent.
So this got me stuck. Fingers crossed, hoping you can help me out! :)

/a
Tony Farrell

Would you post up the updated CSS that you used to achieve the effect, and a little implementation code. [email protected] thank you

vernita

Is there a way to squeeze the divs and icons up so that you can see all the icons on the timeline and the divs on each side slide in at the same time?

ie make the width of cd.timeline.block not take up the whole width of the screen, but rather just take up the width of the cd.timeline.block content?
http://www.ingenieroperales.com/ jesus israel perales martinez

Wow!
Ramon Lopez

Can I somewhere turn off all the bounce in, so all the elements are shown right from the start? I’m using this in a Polymer core_header_panel. The first two blocks are shown correctly but the rest does not get bounced in. I have the feeling the scroll event in the JS is not triggered.
- http://codyhouse.co/ Sebastiano Guerriero
  
  Yes, for the images/icons you can remove the visibility:hidden added by default, and remove the .bounce.in class. Same thing for the .cd-timeline-content. Plus make sure to remove the jQuery part where you assign the .bounce-in class
augie

The first time I visited the page the bounce in worked. But now any time I go to this page all the elements are shown from the start. Do you know why?
- https://www.rebelmouse.com/Josh_Derocher/ Josh Derocher
  
  I’m having the same issue.
Junchao Gu

thanks a lot for your post. trying out with my project demo on my person blog now :P
David

if you add two links at the bottom of an cd-timeline-content it changes it float to left or right, so you get a wrong order on the right site.
Solution: create a Partent div with a on class like (mine: cd-timeline-multi-btn) and change in the style.css at linenr: 354. delete the class cd-read-more and put in your new class of the parent div.
then you can put all “buttons” in the parent div and get on left and right the same order.

here the css line:

.cd-timeline-block:nth-child(even) .cd-timeline-content .cd-timeline-multi-btn{
float: right;
}
laurence

Hi, could you please help. When opening in firefox 33.1 all timeline boxes are aligned on the same side?

Thank you
- csakip
  
  It wraps to left side on screens smaller than 1170px – being responsive.
  - laurence
    
    Hi,
    Thank you for the reply. Actually, same screen, same resolution but two different browsers and the line does not appear and the alignment is left only on firefox 33.1 Here is the link. WOuld be great if you could help me out.Many thanks in advance. Sitecore User Experience | Discovery
    
    | |
    | | | | | |
    | Sitecore User Experience | Discoveryuser experience, know your customer, omnichannel, single view of your customer, customer loyalty | | |
    | View on interactiveinfluence.com | Preview by Yahoo |
    | |
    | |
    
    From: Disqus
    To: [email protected]
    Sent: Monday, December 1, 2014 10:56 AM
    Subject: Re: New comment posted on Vertical Timeline
    
    #yiv9342295267 #yiv9342295267 a:hover, #yiv9342295267 a:hover span {color:#1188d2!important;}#yiv9342295267 .yiv9342295267button-cta:hover {color:#ffffff!important;background-color:#1188d2!important;}#yiv9342295267 .yiv9342295267button-cta:hover span {color:#ffffff!important;}#yiv9342295267 #yiv9342295267 #yiv9342295267 #yiv9342295267outlook a {padding:0;}#yiv9342295267 body {width:100% !important;}#yiv9342295267 .yiv9342295267ReadMsgBody {width:100%;}#yiv9342295267 .yiv9342295267ExternalClass {width:100%;display:block;}#yiv9342295267 _filtered #yiv9342295267 {}#yiv9342295267 .yiv9342295267content {width:100%;}#yiv9342295267 table {border-collapse:collapse;}#yiv9342295267 h2.yiv9342295267headline {font-weight:700;font-size:20px!important;margin-bottom:5px;}#yiv9342295267 .yiv9342295267button-cta {display:block!important;padding:0!important;}#yiv9342295267 div.yiv9342295267header {padding-top:20px;}#yiv9342295267 div.yiv9342295267footer {padding-bottom:20px;}#yiv9342295267 #yiv9342295267 #yiv9342295267 p.yiv9342295267mod-tools a:hover {color:white!important;background:#8c989f!important;}#yiv9342295267 _filtered #yiv9342295267 {}#yiv9342295267 td.yiv9342295267avatar img, #yiv9342295267 td.yiv9342295267spacer img {width:28px!important;}#yiv9342295267 | |
    | | Settings | |
    | |
    
    | |
    
    | |
    |
    A new comment was posted on CodyHouse
    |
    | |
    |
    | |
    csakip
    It wraps to left side on screens smaller than 1170px – being responsive.5:56 a.m., Monday Dec. 1 | |
    |
    | | Reply to csakip | |
    
    |
    | |
    
    |
    
    | csakip’s comment is in reply to laurence: |
    | |
    | | Hi, could you please help. When opening in firefox 33.1 all timeline boxes are aligned on the same side?Thank youRead more |
    |
    | |
    
    | |
    
    | |
    | You’re receiving this message because you’re signed up to receive notifications about replies to disqus_tw5pHuLzxk. You can unsubscribe from emails about replies to disqus_tw5pHuLzxk by replying to this email with “unsubscribe” or reduce the rate with which these emails are sent by adjusting your notification settings. | | |
    
    | |
David

Thank you vey much for your wonderful timeline.

Would you be able to share with us the steps to replace the icons and the background color? There are only 3 types of images you have created. It would be nice if we can use our own.

I noticed the images are in .svg format, so does this mean it is easier if we also use .svg images? Please keep in mind I am not very good in programming in general. Thanks again.
- http://codyhouse.co/ Sebastiano Guerriero
  
  Hi David, just replace the images inside the Images folder with your own. SVG format is preferable for high definition devices, but you can use a another format if you prefer (in which case make sure to update the CSS as well). In order to change the background colors of the circles, look for .cd-timeline-img.cd-picture inside the CSS and update the background-color property.
- pastGazer
  
  David – I had the same question and played with it and it is relatively easy to replace the images – but it is hard to line them up. Using the SVG allows you to create a minimalist image that is largely transparent – allowing the background of the timeline image to show through. So, in short, the svg is definitely easier to apply to this particular timeline. But you can create as many images as you like and just call them for the particular item in the timeline. If you create the all the same size and play with your css to line one up properly then all the others will work as well.
Lukas Malz

Hi Sebastiano,
your timeline is great and exactly what I wanted for my Website, but I got one problem :/

It doesn’t render any styles. It’s just plain text (and links and stuff…).
I’m using ZURB’s foundation framework. Could it be that the timeline doesn’t work with it?

Sorry for bad english, if there is some.
- pastGazer
  
  Lukas, I am using Foundation Zurb as well and it works in Chrome and IE11. Unfortunately it doesn’t work in any older browsers, so am having issues on that front. I just wrapped the code with the normal ZURB grid though. You might check to be sure you are putting the main.js down at the bottom of your code, just before the body close.
zeion

Hi, this looks great.
I want to customize it to be horizontal instead, any tips for doing that?
http://whiterabbitjapan.com Max Hodges

aren’t you missing id=”cd-timeline” in your section element?
- http://codyhouse.co Claudia Romano
  
  Fixed ;)
Alic

I think your demo is broken…
- http://codyhouse.co Claudia Romano
  
  Hi Alic, which browser are you using?
  - Alic
    
    Firefox, but it is good again. Probably some connection problems yesterday.
Guest

Thanks for sharing’m making a Skin for Esotalk forum of a look like this getting http://esotalk.org/forum/1566-timeline/p1#p7026
http://www.thibaut-roy.fr/ Thibaut Roy

Hey ! Thanks for your great tutorial ! I have just one problem with it : is there a way to use it without modernizr ? If not, could you give me a minimal modernizr file ? Thanks in advance !
- http://codyhouse.co Claudia Romano
  
  Hi Thibaut, glad you liked it! :)
  We used Modernizr to check if the browser supports css Animations. You can download a custom version here: http://modernizr.com/download/
roncali

Thanks, I love this vertical timeline. This resource, has GNU licence? Could I use it in my projects?
- http://codyhouse.co Claudia Romano
  
  Glad you like it! You can give a look at our terms page:
  http://codyhouse.co/terms/
kelvin atawura

Just noticed that this timeline was inspired by the zurb university who also make zurb foundation. So wondered and actually thought l ask how well does this timeline works with with foundation. Would it result in any sort of issues if l include it in my foundation project?
- http://codyhouse.co/ Sebastiano Guerriero
  
  Hi Kelvin, you shouldn’t have any conflict since we’re using custom classes (.cd-something)
Guest

請問一下，有沒有其他的icon?
The other icon?
Adam Chen

請問一下，有沒有其他的icon?
The other icon?
- Guest
  
  Sorry
  Nothing
Jorge Piquer

Hey great work. I’m trying to make it so the boxes are hidden again when you scroll up. I tried just adding coding to the .js to reverse switching ‘bounce-in’ and ‘is-hidden’. I’m guessing I need to change some other stuff in the if statement because it’s not working. Any suggestions would be appreciated. This is what I added:

var scrollBottom = $(window).scrollTop() + $(window).height();

$(window).on(‘scroll’, function(){

$timeline_block.each(function(){

if( $(this).offset().bottom <= $(window).scrollBottom()+$(window).height()*.75 && $(this).find('.cd-timeline-img').hasClass('bounce-in') ) {

$(this).find('.cd-timline-img, .cd-timeline-content').removeClass('bounce-in').addClass('is-hidden');

}

});

})
- Gary Chapman
  
  At a glance I can see:
  
  – there’s no $(window).scrollBottom() method in jQuery
  – ‘cd-timline-img’ should be ‘cd-timeline-img’
- zralokh3
  
  Hey Jorge.
  Check out my comment I posted in reply to Robert Millette question with the same problem – take a look a little higher.
  
  I posted a few base examples and a really nice one – that would achieve exactly what you want – Which is: animate elements when they’re in the view , then reverse the animation when you scroll out.
  
  Best of luck ;]
Roshan Sudhakar Pati

please share, how to download the files through bower?
Gary Chapman

Hi Sebastiano,

I absolutely love your timeline, but I’m seeing a bug where the last item in the timeline doesn’t display when the browser is at maximum height. If you shrink the window vertically (or event just open the debug console) then the last item pops into view. Interestingly, if the window is at full height and you shrink the width until all items jump to the same side, then the last item appears, but as soon as you expand again it disappears.

This happens on your demo page, so I’m 99% sure it’s not my bad coding that’s causing this :-)

I’m running Windows 7 and it happens with the following browsers:

IE 11
FF 35.0.1
Chrome 41.0

Cheers

Gary
- http://codyhouse.co Claudia Romano
  
  Hi Gary,
  it’s because the page doesn’t scroll enough to show the last block. You can solve the problem either adding some padding-bottom (if you don’t have additional content below) or reducing the scroll required for it to be visible (e.g., in the js file, on line 6 and 14, replace 0.75 with a 0.9). That should solve it!
  - Gary Chapman
    
    Thanks Claudia, that worked perfectly! What’s your procedure for incorporating these sorts of changes? I notice there are already several pending pull requests in your github repository, some of which are months old.
    - http://codyhouse.co Claudia Romano
      
      Hi Gary. Feel free to send a pull request!
      Btw, pull request don’t have to be merged necessarily.. it doesn’t mean we didn’t check them ;)
Robert Millette

Is it possible to reverse the animation so it bounce in back when scrolling back up?
- zralokh3
  
  Hi Robert.
  
  I must say – I thought about the same thing.
  
  And after a little research I came across a post in stackoverflow.com regarding a similiar issue.
  Here’s the link:
  http://stackoverflow.com/questions/18023859/possible-to-reverse-a-css-animation-on-class-removal
  
  I hope it’ll help you.
  - Robert Millette
    
    Hi, Thanks for the info.
    Did you applied the solution with working results?
    I have opened another Stackoverflow post here:
    
    http://stackoverflow.com/questions/29435628/reverse-scroll-reveal-script
    and Pen here:
    http://codepen.io/anon/pen/QwPPzE
    
    The guys helping me (because I am not very strong at jquery) are close to a solution but its not working very well yet…
    - zralokh3
      
      Hi again Robert.
      
      I was digging around about this and found 3 possible solutions for you, that might help you achieve your goal.
      
      The first solution pretty much comes to mind on it’s own – use transitions. Then just put all your items in a Hidden State from which you begin the transition process. Then using JS , add or remove a class from them, while you scroll up or down. This might get a little tricky if you want to use css animations – but read more about it here: http://stackoverflow.com/questions/18023859/possible-to-reverse-a-css-animation-on-class-removal (I might have send you this link already )
      
      The second solution is css animation detection. You could add bounce-on class when you scroll to a certain item, then when you scroll away – just add a bounce-out class AND on animation end – clear the unused classes, leaving the items in their hidden state. Here’s a littme more info: http://stackoverflow.com/questions/23449068/jquery-css-animations-with-addclass-and-removeclass
      
      The last, third solution is – use GSAP. If you don’t know it – it’s a super cool javascript animation library that works really great and has very good performance. Reading tour post – I think this might be the best solution for you. Read the documentation, create an animation, then attach it to your items, and trigger while scrolling.
      
      I didn’t have time yet to send you a codepen link with an example – but I’ll try to do it soon. Here’s the GSAP link: https://greensock.com/
      
      Also – take a look at the ‘getting started’ video on GSAP website. It should push you in the right direction.
      
      Good Luck!
    - zralokh3
      
      Hey Robert – I found a nice example of the first solution I posted below. This example on codepen.io uses exactly what you want – detecting scroll, applying animation and reversing it – with the use of css classes.
      
      http://codepen.io/ettrics/pen/ogRaRv
      
      I hope this helps :]
      
      Best regards.
- http://codyhouse.co Claudia Romano
  
  @robert_millette:disqus @zralokh3:disqus give a look at this pull request:
  https://github.com/CodyHouse/vertical-timeline/pull/5
  
  Hope this helps!
  - Robert Millette
    
    Thanks Claudia,
    I will have a look. I have found a solution though, I used anijs.js to obtain the look and feel I was looking for. Since I am very poor at jquery anijs was a must for me since its soooo easy to use.
    http://anijs.github.io/
Catster

It doesn’t work in ie8
shimana

please Help me
See :http://stackoverflow.com/questions/30039416/how-to-change-timeline-style
shimana

Hi . tanks
how do change style??
please help me
Sofia

Is it possible to create a Outer-Div and have the overflow:scroll on this div and on scroll animation on this? Because I need to have the htm/body height 100% and width 100% and overflow:hidden, for my off-canvas navigation http://tympanus.net/Development/OffCanvasMenuEffects/index.html to stay in place.
- http://codyhouse.co Claudia Romano
  
  Hi Sofia. Yes you can wrap all your page content in a div (e.g. div.outer-wrapper) and then, in your main.js file, replace $(window).on(‘scroll’) with $(‘div.outer-wrapper’).on(‘scroll’). That should work!
  - Lance N
    
    Hi there!!! Will this work for the demo up top? This demo is not using the .on(‘scroll’)
Mads Hørlyk

Is it possible to have a box on either side? So when scrolling down there would be two boxes sliding in – one from each side
- http://codyhouse.co/ Sebastiano Guerriero
  
  you should start by reducing the size of each .cd-timeline-block to 50% (right now they occupy full width), then add a float left/right to have 2 blocks aligned horizontally. Finally you should use the same class at the same time to both blocs (with 2 opposite animation). Not so straightforward, but you can do that with some work :)
Alex Flom

Great job!
Looks like the “final section” never loads…
This is the last section I see at the demo “Title of section 5″
But in the code there is another one.

Did anyone else had the problem?

I am using Chrome.
- http://codyhouse.co Claudia Romano
  
  Hi Alex, that’s because there’s no additional content below the timeline. In the main.js file, you can replace the $(window).height()*0.9 with $(window).height()*0.7. That fixes it!
Martijn

Hi Sebastiano, really cool stuff, and thanks for sharing!

I’m trying to load different Vimeo video into the sections. They are placed in iFrames. Unfortunately the videos are already visible on load, when I scroll they do move into the page. Do you have any idea how I could make vimeo embeds work with the move-in effect?

Thanks!
Avvist

Hi.

Thanks for a fantastic resource!
If you could please help me with a small issue, I’d greatly appreciate it. :)

I’m trying to set up the timeline with an infinite scroll to load more posts as I scroll down (written in javascript, not jquery).

It works fine with the vertical timeline, and the posts are loaded in correctly — but the animation is not showing on the new elements.

I guess this is because the jQuery-event is not re-triggered, but that’s just what I assume.

I’ve tried to research the issue, but am not able to figure it out.

Can you please guide me with your magic, so that I understand how to move forward?

Thanks again!

/a
- Avvist
  
  Hey.
  
  Actually, I think I’m gonna throw in the towel on this one.
  
  The infinite scroll didn’t want to cooperate on mobile, and I was going down a road I had no business exploring. :)
  
  If you, at some point, feel tempted to make an infinite scroll resource, that would be awesome! Your work is so much more user-friendly and accessible than most of the stuff out there.
  
  Keep up the good work!
  
  /a
John

I am trying to embed this timeline into a page in a CMS. The CSS for the timeline is conflicting with the page CSS. I’ve tried to create a class named “timeline” but either the CSS takes over the whole page or just doesn’t work. It seems to be an issue with the code in the “primary section.”

Any ideas how to fix this??

Thanks for the help and the awesome design.
- http://codyhouse.co/ Sebastiano Guerriero
  
  Hi John, all CodyHouse resources have the cd- prefix applied to each class name, therefore they shouldn’t conflict with third party resources. Try checking the body style, or, if you’re using SASS, make sure to include the variables.scss partial
  - John
    
    I am not using SASS but maybe I should. The universal selectors are taking over the entire page. Anything that has the cd- prefix seems to be fine but the primary section of the css is the problem.
Ricardo Zertuche

Hi! Is there a way to make the layout Pinterest like? The right item is taller so the next left item should load below just the smaller left item, not leaving the white space below the left item.

Thanks!
- Ricardo Zertuche
  
  Nailed it, if you use masonry plugin you can use achieve the layout using this timeline :]
  - Ria Elliger
    
    How did you manage to seperate between the elements on the left side and the ones on the right side to display the marker on the right side?
Simon Stützer

Hey everyone… First: great tutorial.

I just trying to put this code into a wordpress page (Divi theme) inspired by http://elegantcamp.com/schedule/

Howerver, it looks that different for me. The bouncing did not alternate the sites… http://boulder-bundesliga.de/planb/zeitplan-test-2/

Any ideas? Thx a lot.
- Sean Pruszkowski
  
  Hey Simon,
  May I ask how you implemented this CSS into your theme on wordpress?
  I am having trouble figuring out how to do this.
  Any info is appreciated thanks.
Jim

Is there a way to add a circle with only the date-title and not the description box. I want to add a circle when the year is different!
chrismcelwee

This is fantastic. Thank you so much.
llahnoraa

Awesome! Love this. I will post a link soon. It’s for upcoming college 50th anniversary!
mteblog

Tried this on WP but the articles are on the same side – not floating left, right. Any thoughts?
- Kyle
  
  Any solution to this? I have the same problem.
Tai Nguyen

Hi Sebastiano, really great tutorial! Thanks for sharing.

Two questions i hope you can point me to the right direction:
how can I arrange / spread the events proportionally based on its time? For example: 3 events (2005,2007 and 2015), then 2004 should be 1/5 the distance from 2005 to 2015.

Do you have any suggestion for displaying the duration of the event (maybe a strip of color?)

Thank you
Mario Contreras

Great, but how can use it in weebly? is possible?
Andreas

please corect me if iam wrong but to me it look more like a horizontal timeline :)
- Bill Mahr
  
  you are wrong
  
  the line in the timeline, goes up and down.
  - Andreas
    
    iam such a noob thx :)
Rako Nda ᵀᴴᴱ ᴼᴿᴵᴳᴵᴻᴬᴸ

Nice plugin, but its lack a RTL support.
StevenJerez

https://wordpress.org/plugins/timeline-express/ Is this plugin yours?
- http://codyhouse.co Claudia Romano
  
  Hi Steven, no it’s not (even though it’s based on our Vertical Timeline). Thanks for letting us know ;)
Michael Johnson

Any chance you have a stripped version to install into WordPress? Would like the every other bubble, line, and icons. Animation would be a bonus. We tried to install but are having some issues.
- Kyle
  
  Did you find the solution to this? I need help with it.
Jaco van Wijk

As always nice tutorial! I tried to implement this piece of code together with Animated Page Transition #2 to have a different timeline on each tab. But for some reason i cant get the animation to work when you scroll down. Any help?
john asignar

hi :) nice tutorial can you please teach me how to change the first one so that i will pop out on the right side? :) please i need if for my project :D
Kyle

I’ve implemented this into my WordPress page, however, all the blocks go on the left side of the timeline. Its like the :nth-child(even) doesnt work. Any suggestions to get them to alternate?
- Kyle
  
  Also, the conatiner and screen size is larger than 1170px so that is not the issue
  - Donia
    
    I tried this solution, but still can’t get anything to float right. Any other ideas?
    - pastGazer
      
      Have you found a solution yet? Same problem here with IE.
      - Donia
        
        I actually just had an issue with the way I had it laid out in my SCSS file.. Works fine. I haven’t checked for any issues with IE yet but I’ll let you know if something is wrong and I come up with a fix.
      - pastGazer
        
        Thank you. I still cannot get it to work – but unfortunately I am laboring with IE8 so there may not be a solution. It works beautifully in Chrome and Firefox and IE11 – but our Company won’t be transitioning to a more modern browser until mid-2016. UGH…..I’m hoping I can get it to work without the animation and just be a nice timeline down the middle with the elements to right and left. But may have to scratch this one and just create something for IE8 and then bring this out when we transition.
      - Donia
        
        Oh I hear you there. My company just made the decision to stop supporting IE8 and go 9+. Whew! Good luck on finding a solution!
Pankaj kumar

hey i used this in my website but i m not able to chnage the predefined icon to custom icon can you suggent me how to change it?
- Ramin
  
  This might be useful for you. Teach how to use icons using fonts.
  
  https://www.youtube.com/watch?v=eIqre0Wsbro
Jeroen Visschers

Decent plugin, But way too much dependencies. And the css is terrible. For example it sets styling on body/header tags (and can conflict with existing styling). It depends on Modernizr, but this is not explaned in the tutorial. If you can live with the dependencies it’s not a bad timeline-plugin.
- shivabeach
  
  I am glad you said modernizr. I worked all day trying to get it to work with no luck. Then I read your post, added the link to modernizr and bingo. Thanks
  - Nathan Swartz
    
    Hey just wanted to note also that this would be faboo if it didn’t require modernizr. I’ve spent a few hours trying to figure out exactly why modernizr is required and plan to spend a few more trying to get it to work without, but if the original devs (CodyHouse, you rock!) want to throw in a note or two, would be more than happy to give them credit on every single one of my irrelevant social media sources… ;}
pastGazer

Before I ask, please don’t anyone email me to ask why we still use it – TRUST ME it is NOT my choice and I am way down in the food chain on making the decision and just have to survive down here in the dirt. That said – I have to support a site that is IE8 and will be for at least another six months. I LOVE this timeline. I have applied every shiv, shim, modernizr, PIE, etc. I knew I would never get the animation part to work, but just was hoping I could get the layout itself. Got that to work, but of all things, the ONE thing that will NOT show up is the vertical grey timeline itself. That is likely the simplest part of the whole css so I am completely stumped on why this is the case. Any ideas why that part might not work? It shows up when I use Chrome – just not IE8. I’m thinking it must have something to do with this being up in the wrapping section id – but I tried making it a div container instead and still no luck. I’m completely used to people ignoring IE8 questions but if someone out there happens to be in the same boat and has any suggestions I can try, I would appreciate your feedback. If nothing else, I’ll save this code and be ready if/when we ever get to move into a modern browser environment. :-)
- pastGazer
  
  Also – all my entries show up on the left. If anyone found a fix for that, would love to see that posted. Hopefully someone can also give me some idea of why the grey timeline isn’t showing up. I’m thinking of stripping out all the css and just start adding back in one element at a time until I can see what is going wrong.
- http://itsavibe.com Eckardt Kasselman
  
  Try this.
  
  1) Check in style.css on line 352. Remove the double ‘::’ so that it reads #cd-timeline:before instead of #cd-timeline::before.
  
  2) Test again to see if one of the shivs, shims or polyfills translate the pseudo element correctly.
  
  3) If not try implement a specific polyfill using modernizr yep/nope or IE conditional tags.
  
  4) If the polyfill is successful but the element is still not visible look for overflow issues, negative padding or margins.
  - pastGazer
    
    Eckardt – thank you!!! I will give these steps a try. At the very least they are a great digest for trouble-shooting! Thanks so much! I’ll report back on the outcome! Fingers crossed!!
    - http://itsavibe.com Eckardt Kasselman
      
      pastGazer, not a problem! I unfortunately work on a lot of websites that need to be IE8 compliant, another good tool for testing is to run Oracle’s VirtualBox with XP and real IE8. Good luck!
Abhijeet Joshi

Hey ca u tell me that:
How to add social share widget to my particular section.
I mean how can i share my particular section on facebook or twitter or any social media i want.
Note: I want only a particular section on my timeline to be shared when i click on the icon below that section.
Pls help:ASAP
Mlkm

Hi,

Just so you know, this plugin doesn’t work well with the Foundation layout : the main container (“cd-container”) partially collapses as if there were only the visible blocks inside.
When you scroll down and some new blocks appear, the container grows to include them, so all the other elements below in the page move down too, and the scrollbar changes. Basically, it behaves as if the timeline blocks had a class “display: none” instead of “visibility: hidden”. And the result is quite dirty…

The conflict comes from the class “is-hidden” that also exists in the Foundation style but used differently.

So be advised: there is a conflict with Foundation, but quite easy to solve: just change the name of the class “is-hidden” by “is-hidden-cd” for example, both in the css and in the js. It should work fine.

Best regards and congrats for all your amazing work
- http://codyhouse.co Claudia Romano
  
  Hi there, thanks for the heads-up! We’ll take that in mind ;)
Артем Митрофанов

Hi @seguerriero:disqus , please tell me how to make records under each other, not leaving a large empty space. Unfortunately, i did not understand how to do it in code.
(An example of what I need in the photo below.)
- annestine
  
  Is there somebody who have the answer for this question? I will very much appreciate to get the answer.
  - Marc Magon
    
    Any assist would be great – thanks
- kappakeepo
  
  add margin: -70px 0; to .cd-timeline-block on line 55
Kas

I’m having trouble adding text that appears after the “read more” button is clicked. Any help with that?
Massimo Ivaldi

Hi @seguerriero:disqus i used your snippet and i put you a credit link on my site:

http://www.marketingmix.tf/
Mohamad Qaddura

Why not github it, it is really more than enough for a timeline it has everything that we need? I want to add it to my bower_components, but you should have the honor of the repository :) or do you prefer that we github and say strictly that you own it and we use it?
SammyJ Koza

by chance are there detailed instructions on how to implement this into a squarespace template?
Silvanael

Works, great only problem that images are square not round. Ehere should i look for conflict.
- Maroš Dovec
  
  try adding this to your CSS file:
  
  .cd-timeline-img { border-radius: 50%; }
- mohammad
  
  absolutely
britneyfarsi

Is it OK to use in Joomla! custom module ?
- Aaron Lavers
  
  If you’re referring to something like this: https://www.wp-timelineexpress.com/examples/basic-timeline/ where someone has directly taken this exact tutorial, modified basically nothing and then made it as a paid module… Then no, that is a dick move
Anum Sheraz

Hello @seguerriero:disqus , first off, great work and thanks for sharing this on public. I have implemented this timeline on my project, where I am adding custom timeline feeds over time. But I cannot see the bounce effects on my new feeds. How can I do that ? , here is my code http://bit.ly/28SjVNb
- Anum Sheraz
  
  By adding class name bounce-in into cd-timeline-img and cd-icon, I have successfully achieved my goal. How can I make this bounce effect work in mobile devices ?
- mohammad
  
  simply by adding “cssanimations” class to grandparent element like body tag.
Alessandro Staniscia

Great work! I’m happy to notify you that I used it for the implementation of one WordPress plugin named Simple Vertical Timeline ( https://wordpress.org/plugins/simple-vertical-timeline/ ) and this is the final result http://www.staniscia.net/simple-vertical-timeline/
Thanks!
- http://codyhouse.co Claudia Romano
  
  Hi Alessandro, thanks for letting us know! Please align to our Terms as soon as possible:
  https://codyhouse.co/terms/
  
  Thanks!
exo_duz

FYI I just found an exact copy of your timeline albeit being a bit cut down… they didn’t even bother to change the HTML code

https://www.script-tutorials.com/vertical-timeline-with-css-and-javascript/
- http://codyhouse.co Claudia Romano
  
  Hi there, thanks for the heads up! we got in touch with the author of the post.
@dgoore

First of all, this is a beautiful implementation. I am attempting to squeeze it into a relatively small sidebar in a bootstrap3 layout, which is cutting off part of the image. Any suggestions? screenshot below
mohammad

thanks a lot
Zefau

Very nice timeline, thanks a lot!
I have a small question though: Why is the script looping through the blocks to hide them (function hideBlocks())?
Why not just doing as the following?

function hideBlocks() {
$(‘.cd-timeline-block .cd-timeline-img, .cd-timeline-block .cd-timeline-content’).addClass(‘is-hidden’);
}

Furthermore, showBlocks() is always iterating through all blocks. Why not stopping after the after the last visible block?

function showBlocks(blocks, offset) {
blocks.each(function(){
if ($(this).offset().top <= $(window).scrollTop()+$(window).height()*offset)
($(this).find('.cd-timeline-img').hasClass('is-hidden')) && $(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden').addClass('bounce-in');
else
return
});
Harper Holden

Nice, working on one of these right now. This was helpful, keep up the good work!
Tara

Hey all,

Anyone know why the Demo button isn’t working?

Thanks!
- http://codyhouse.co Claudia Romano
  
  Hi Tara, thanks for the heads-up! It has been fixed now ;)
Peggy

New to sqarespace but I want to include this on my site – can we have a walkthrough on that?
Mohamad Qaddura

It is awesome & I love it,
I see that it has no license, and nothing mentioned in the read me regarding using it.
I am not really knowledgeable with licenses, so I would like to know if you allow others to use as a component in a website, or if it should be bought
- Neven Ignjic
  
  I found link to these Terms in the readme.pdf ( https://codyhouse.co/terms/ ).
Govind Samrow

Thanks, It is awesome
A Person

Thank you.
realdesignstudios

Can you add anchors to each of the points in time? And then link to them externally?

Cheers in advance!
Peter Brennan

what happened to your css?
Dan Nordholm

This largely works for me except that the odd side center on the timeline rather than being to the left of it. The even ones land in the correct place. Also, the image icons don’t center inside the circles either.
http://sebastien.vignol.be SEMΛHO

A tiny improvement could be putting out the calculation “height()*0.75″ so it’s not computed on each scroll. However you’d have to add a “window onresize” function to recompute this value on window resize.
APKC

I like this very much, and was able to get it working in conjunction with a database. It works great everywhere except Firefox, where I end up with scrollbars where scrollbars shouldn’t be. I tested your demo on the same version of Firefox and yours doesn’t show the scrollbars, so clearly it is something specific to mine. Other pages of my site don’t have the issue, just this one. Any suggestions? Thanks very much.

https://uploads.disquscdn.com/images/139b03686c2a41bd8d9ba8ff6cbdece91fb71d0707598782292c43e47e7aae53.jpg
Nook

I am wondering if any one has or if it can be so that 2 of the .cd-timeline-block can be set so that they are together. As in instead of one child being left and one child being right.
Use case: if there was a time line where the left and right of the time line represent two different personas and an event in this time line that is mutual to both . so something like this… https://uploads.disquscdn.com/images/c242b2ce8eae3dae912302bf8c5d6c96c90396748d9703244d02d79b340961bf.png

Please let me know if anyone was able to create this
http://www.mikeptaylor.net Mike Taylor

Awesome job! Works like a charm!
https://nickparsons.io Nick Parsons

For what it’s worth, timelines are great; however, coming up with the content to populate the timeline can be cumbersome. With that being said, https://getstream.io is a great choice for generating timeline data. They even offer notification support. Highly recommended! Great article too, btw.
Mervyn Lee

Hi, may I ask what should I do if I want to implement few timeline on the same HTML form? The jquery only bind with one id =(
https://www.tumblr.com/blog/homer8371 homer83

wonderful render with few code, nice solution

Extended license

Do you want to include this resource in a product offered for sale? Buy the extended license or learn more about it.