Animated Scroll Indicator

English Shopify Shopify Design
,
1

Hi everyone,

I hope you are doing well. I am making a website for a client of mine and I wanted to add a scroll indicator on my website for the about us page to show the timeline for just. It’s for this section: “multirow section-template–23693559136584__multirow_Gjf78y-padding gradient color-scheme-1”. You can see something like this on this website https://therealworld.net/. I unfortunately dont really know how to code so I hope someone can help me out. I have also provided some example pictures.

Thank you in advance for your troubles.

Kind regards,

Jonathan

Screenshot 2025-05-01 at 10.33.07.png
Screenshot 2025-05-01 at 10.33.07.png2916×1546 336 KB

Screenshot 2025-05-01 at 10.33.15.png
Screenshot 2025-05-01 at 10.33.15.png2916×1546 338 KB

2

Hi,

Hope this will help

  • Add timeline structure inside About Us section.

  • Style using CSS for vertical line.

  • Add simple JavaScript to animate line on scroll.

JavaScript example

document.addEventListener("scroll", () => {
  const line = document.querySelector('.scroll-line');
  const scrollTop = window.scrollY;
  const section = document.querySelector('.scroll-timeline');
  const offsetTop = section.offsetTop;
  const sectionHeight = section.offsetHeight;
  const windowHeight = window.innerHeight;

  let progress = (scrollTop + windowHeight - offsetTop) / sectionHeight;
  progress = Math.min(Math.max(progress, 0), 1); // Keep between 0 and 1
  line.style.height = `${progress * 100}%`;
});
3

Thank you so much for your reply and thanks for the java code. Unfortunately I dont know how to either add a timeline structure neither do I know how to code CSS. Could you please help me with that it will be greatly appreciated?

Thank you so much in advance