https://www.addevice.io/js/website/blog/topics-animation.js

1let activeButton;
2let activeProgressLine;
3let timeout = null;
4
5const topics = $('.blog-topic-nav');
6const progressLines = topics.find('.blog-topic-progress-item-line');
7const topicNav = topics.first();
8
9$(function () {
10
11  animationEndEvent();
12
13  topicHoverEvent();
14
15});
16
17function topicHoverEvent() {
18
19  topics.hover(function () {
20    getTabContent($(this));
21  })
22}
23
24function getTabContent(topic) {
25  clearTimeout(timeout);
26
27  timeout = setTimeout(() => {
28    topic.tab('show');
29  }, 100);
30
31  progressLines.removeClass('animate');
32  topic.find('.blog-topic-progress-item-line').addClass('animate');
33
34}
35
36function animationEndEvent() {
37  progressLines.on('animationend', function () {
38    topicsAnimation($(this))
39  });
40}
41
42function topicsAnimation(animationItem) {
43  activeButton = animationItem.parents('button').next();
44
45  if (!activeButton.length) {
46    activeButton = topicNav;
47
48  }
49  activeProgressLine = activeButton.find('.blog-topic-progress-item-line');
50
51  progressLines.removeClass('animate');
52  activeProgressLine.addClass('animate')
53
54  activeButton.tab('show');
55}
56
57
58// $(window).on('scroll', function () {
59//   if ($(window).scrollTop() >= $(".blog-2").offset().top || $(window).scrollTop() <= $(".blog-2").height()) {
60//     topicsAnimation(topicNav.find('.blog-topic-progress-item-line'))
61//   }
62//   else{
63//     $(`.blog-nav > .nav-link .blog-topic-progress-item-line`).removeClass('animate');
64//   }
65// })