How to create a minimalist and animated time line using html ,css , javascript

Question

All content ( div) will come with nice effect when it will be scrolled ..

Answer 1

There are many examples of timelines here:
https://onaircode.com/html-css-vertical-timeline-examples/
Each has a "Demo/Code" link so you can quickly see how they work.

Some other timeline examples are shown here with code links:
https://freefrontend.com/bootstrap-timelines/

Here are some more timeline examples that depend on Twitter Bootstrap:
https://bootsnipp.com/search?q=timeline

By looking at a few, it looks like well written CSS is the key to making a clean and professional looking timeline with minimal HTML and JavaScript.

If I wanted to add a timeline to my website, I'd browse the examples and find one that fairly closely matches the aesthetic of the website, copy it, and then tweak to make it fit better.

You might be interested in this tutorial on making a timeline:
https://www.w3schools.com/howto/howto_css_timeline.asp

Making the content scrollable is as easy as having a timeline element in a smaller div and setting the div's overflow: auto in CSS. The different overflow values are demonstrated here:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_overflow