This technique requests Scripts Manager feature by Swiss Knife or Scripts Organizer to quickly import a script.
Register Script
We will start by going into Script Manager feature and paste CDN link or Upload it to media library to store it on our server.
Give it a name, Script Type set as JavaScript, Location for best performance set as footer as any other script and Include type set as Register if you don’t want that that script is triggered on any page on the website.
Script URL: https://rawcdn.githack.com/flackr/scroll-timeline/94866999efe41b3ccba846be7ed37c9313dd880e/dist/scroll-timeline.js
Oxygen Builder
Add Code Block and add class to the code block .progress-bar--scroll ( never mind where on the page as it is going to be fixed position )
Include Script
Go back to the Scripts Manager and copy Code
Code will look something like this depending on the title of your script. Paste it inside Code Block > PHP Section
wp_enqueue_script('scroll-script'); Style Bar
Paste it inside Code Block > CSS Section
.progress-bar--scroll {
position: fixed;
z-index: 10;
left: 0;
top: 0;
width: 100vw;
height: 10px;
transform-origin: 0 50%;
transform: scaleX(0);
background: rgb(0, 255, 200);
}Trigger Script
Paste it inside Code Block > JavaScript Section
// Create ScrollTimeline
const myScrollTimeline = new ScrollTimeline({
source: document.scrollingElement,
scrollSource: document.scrollingElement,
orientation: 'block',
scrollOffsets: [
new CSSUnitValue(0, 'percent'),
new CSSUnitValue(100, 'percent'),
],
});
// Animate Progress Bar on Scroll
document.querySelector(".progress-bar--scroll").animate(
{
transform: ["scaleX(0)", "scaleX(1)"]
},
{
duration: 1,
fill: "forwards",
timeline: myScrollTimeline
}
);