The Vertical WebPart

[AshwinKheta]

The Vertical WebPart is having an error It does not fetch the Title and Description of the event only shows the static Date and time of the ##events. The Dynamic animation where in the Title and Description of event slide into view is not working. Tried the latest version for deployment, link still this issue persists. If you would reply then it would be very greatfull @OlivierCC

[billburke6]

I'm experiencing the same behavior. Vertical Timeline only displays date and time, it's does not display the title or description.

[zshane15]

I'm getting the same but it actually looks like the issue is that the animation isn't firing, when I inspected the elements, the content is actually loaded, it's opacity is just set to 0. Maybe this is an issue when there are too few events?

.timeline.animated .timeline-row .timeline-content { **opacity: 0;** left: 20px; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; transition: all 0.8s; }

[mirahManlapig]

@zshane15 this resolved the issue of the display but how do we keep the animation?

[zshane15]

@mirahManlapig sorry it's been a while since I looked at this, but maybe play around with an animation delay class once you figure out how many items are returned? That way it would simulate an animation, otherwise it just works as normal.

.tooFewEvents {
  animation-delay: 2s;
}

[mirahManlapig]

@zshane15 , thanks for your response. However, I tried the following:

.timeline.animated .timeline-row .timeline-content { /**opacity: 0;**/ left: 20px; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -webkit-animation-delay: 2s; transition: all 0.8s; animation-delay: 2s; }

But the animation still didn't appear. I am using the workbench test data and i have 10 items in the timeline.

[mirahManlapig]

I found the answer. It seems like previously, inside the SharePoint page there's an id named pageContent. But now it needs class mainContent instead.

$(".mainContent").scroll(() => { this.timelineAnimate(); }); }

private timelineAnimate(): void { $(".timeline.animated .timeline-row").each(function (i) { var bottom_of_object, bottom_of_window; bottom_of_object = $(this).position().top + $(this).outerHeight(); bottom_of_window = $(".mainContent").scrollTop() + $(".mainContent").height(); if (bottom_of_window > bottom_of_object) { return $(this).addClass("active"); } }); }