vertical timeline
June 12, 2014 | 179 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
9+

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.

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.

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.

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.

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?

  • 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.

    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!

    /a

    • 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!

        /a

        • http://codyhouse.co/ Sebastiano Guerriero

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

          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. pithhelmet@gmail.com 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: laurence.debruyne@yahoo.com
        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?

  • 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
  • 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
    • 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?

  • 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.)

  • 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 ?

  • 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 ;)