KPC
Kevin Powell - Community•3d ago
CantFind

I need help on making website scroll timeline

I'm trying to achieve a timeline that goes till the end of all the days when It comes nearly to the center of the screen but after a period of time it sadly starts to appear much later which leads to the last one appearing nearly at the top of the screen so what can I do to fix this? 
    .timeline-bar {
      content: " ";
      position: absolute;
      width: 4px;
      height: 3205px;
      border-radius: 5px;
      left: 488px;
      top: 0;
      background-color: #e72f32;
      z-index: 2;
      scale: 1 0;
      overflow: hidden;


      animation: TimelineBarFill steps(19,jump-none) forwards;
      animation-timeline: view();
      animation-range-start: 4.5%;
      animation-range-end: exit;
      transform-origin: top;
    }

    @keyframes TimelineBarFill {
      to {
        scale:1 1;
      }
    }
    .timeline-bar {
      content: " ";
      position: absolute;
      width: 4px;
      height: 3205px;
      border-radius: 5px;
      left: 488px;
      top: 0;
      background-color: #e72f32;
      z-index: 2;
      scale: 1 0;
      overflow: hidden;


      animation: TimelineBarFill steps(19,jump-none) forwards;
      animation-timeline: view();
      animation-range-start: 4.5%;
      animation-range-end: exit;
      transform-origin: top;
    }

    @keyframes TimelineBarFill {
      to {
        scale:1 1;
      }
    }
If anyone knows how to make steps smoother It can be cool too but not necessary
No description
3 Replies
Pradeep
Pradeep•2d ago
scroll-behaviour: smooth for smoother scrolling
Kevin Powell
Kevin Powell•2d ago
I'm not sure if there is a way to perfectly line it up so that it's directly in the middle of the viewport with how you're doing it. The first thing I'd try is starting the animation when it's at 50vh, instead of 4.5%, and removing one of the steps in the animation. If that doesnt' work, I do have another suggestion that's a bit more complex, but would definitely work 😄 Oh, having the end also be at 50vh might also work... like, the start and the end (and what might require keeping the extra step?)
CantFind
CantFindOP•2d ago
Aight lemme give it a try :)

Did you find this page helpful?