---
title: "On Scroll Line Filling"
url: https://cooltimeline.com/demo/scroll-line-filling-timeline/
date: 2025-11-11
modified: 2026-09-21
lang: en
author: "cpsatinder"
description: "On Scroll Line Filling Mid-line Filling on Timeline Scrolling Add smooth mid-line filling effects during scrolling with flexible timeline settings for better visual engagement. Cool Timeline Pro ASC/DESC Navigation Animation..."
image: https://cooltimeline.com/wp-content/uploads/2025/12/on_scroll_line_filling.jpg
word_count: 179
---

# On Scroll Line Filling

**On Scroll Line Filling**

# Mid-line Filling on Timeline Scrolling
Add smooth mid-line filling effects during scrolling with flexible [timeline settings](https://cooltimeline.com/doc/timeline-settings-cool-timeline/) for better visual engagement.

![cool-timeline](https://cooltimeline.com/wp-content/uploads/2025/10/icon-cool-timeline-150x150.png)
### Cool Timeline Pro
[
ASC/DESC
](/demo/order-asc-desc-timeline/)
[
Navigation
](/demo/scrolling-navigation-timeline/)
[
Animation
](/demo/animation-effects-timeline/)
[
Load More
](/demo/ajax-load-more-or-pagination/)
[
Category
](/demo/category-filters-timeline/)
[

Buy Plugin
](/plugin/cool-timeline-pro/#pricing)

Horizontal

One Sided

Vertical

#### With Horizontal Timeline- (Modern Design)

#### Sorry,You have not added any story yet

**

**

**Shortcode** (Above timeline uses this shortcode) :-

`
[[cool-timeline layout="horizontal" category="amazon-history" skin="light" designs="design-6" show-posts="5" order="ASC" items="1" icons="icon" story-content="full" date-format="d M, Y" based="default" autoplay="false" autoplay-speed="3000" start-on="0" line-filling="true"]]
`

#### With One Side Timeline- (Modern Design)

2000October 23
[Google Adwords For Advertisement](https://cooltimeline.com/timeline/google-adwords-for-advertisement/)
**![](https://img.youtube.com/vi/87GrNuDl7W4/hqdefault.jpg)
Launched in 2000, Google AdWords revolutionized online advertising by offering a pay-per-click model.

- Enabled businesses to target ads based on specific keywords and demographics.
- Provided detailed analytics and performance metrics to optimize advertising campaigns effectively.

1998September 04
[Google Officially Founded](https://cooltimeline.com/timeline/google-officially-founded/)[![Google Officially Founded](https://cooltimeline.com/wp-content/uploads/2021/08/google-1.png)](https://cooltimeline.com/wp-content/uploads/2021/08/google-1.png)Google was officially founded on September 4, 1998, by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University. Initially operating from a garage, Google rapidly evolved into the world’s leading search engine, transforming the way people access information online.

August 30
[First Google Doodle Created](https://cooltimeline.com/timeline/first-google-doodle-created/)[![First Google Doodle Created](https://cooltimeline.com/wp-content/uploads/2021/08/google-2.png)](https://cooltimeline.com/wp-content/uploads/2021/08/google-2.png)In August 1998, Google created its first Doodle, featuring a stick figure behind the second “o” of the logo to indicate the founders’ attendance at the Burning Man Festival. This playful alteration marked the beginning of Google’s tradition of celebrating events and anniversaries with unique Doodles.

Page 5 of 5 [**](https://cooltimeline.com/demo/scroll-line-filling-timeline/page/4/)
[1](https://cooltimeline.com/demo/scroll-line-filling-timeline/page/1/)
…
[4](https://cooltimeline.com/demo/scroll-line-filling-timeline/page/4/)
5

**Shortcode** (Above timeline uses this shortcode) :-

`
[[cool-timeline layout="one-side" designs="design-6" skin="light" category="google-history" show-posts="4" order="DESC" icons="icon" animations="fade-up" date-format="F d" story-content="full" line-filling="true"]]
`

#### With Vertical Timeline- (Modern Design)

#### Sorry,You have not added any story yet

**Shortcode** (Above timeline uses this shortcode) :-

`
[[cool-timeline layout="default" designs="design-6" skin="default" category="bc-ad-timeline" based="custom" story-content="short" show-posts="4" animations="fade-up" order="ASC" story-date="show" date-format="F j" icons="icon" pagination="default" pagination-style="style-4" filters="no" line-filling="false" read-more="show" content-length="20" show-title="show" equal-height="false"]]
`