Scroll Progress
A fixed bar at the top that fills as you scroll the page. Uses
scroll-driven animations (animation-timeline: scroll(root)).
Zero JavaScript. Where unsupported, the bar is hidden (no false progress).
Scroll down to see the bar fill.
Section 1
This section also uses .c-reveal to fade and slide in as
it enters the viewport via animation-timeline: view().
Scroll slowly to see the effect.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Section 2
This section also uses .c-reveal to fade and slide in as
it enters the viewport via animation-timeline: view().
Scroll slowly to see the effect.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Section 3
This section also uses .c-reveal to fade and slide in as
it enters the viewport via animation-timeline: view().
Scroll slowly to see the effect.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Section 4
This section also uses .c-reveal to fade and slide in as
it enters the viewport via animation-timeline: view().
Scroll slowly to see the effect.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Section 5
This section also uses .c-reveal to fade and slide in as
it enters the viewport via animation-timeline: view().
Scroll slowly to see the effect.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Section 6
This section also uses .c-reveal to fade and slide in as
it enters the viewport via animation-timeline: view().
Scroll slowly to see the effect.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Reveal with delay
Enters immediately.
Enters slightly later.
Enters with more delay.
Enters last.