This content originally appeared on Bram.us and was authored by Bramus!
Just before I left on holiday, the 2nd article I wrote for CSS-Tricks got published. In it, I take a look at the JavaScript side of the Scroll-Linked Animations specification.
The typical progress-bar as you scroll can be code like this:
const myScrollTimeline = new ScrollTimeline({
source: document.scrollingElement,
orientation: 'block',
scrollOffsets: [
new CSSUnitValue(0, 'percent'),
new CSSUnitValue(100, 'percent'),
],
});
document.querySelector("#progress").animate(
{
transform: ["scaleX(0)", "scaleX(1)"]
},
{
duration: 1,
fill: "forwards",
timeline: myScrollTimeline
}
);Find the details in the article.
Scroll-Linked Animations With the Web Animations API (WAAPI) and ScrollTimeline →
This content originally appeared on Bram.us and was authored by Bramus!
Bramus! | Sciencx (2021-11-24T11:10:12+00:00) Scroll-Linked Animations With the Web Animations API (WAAPI) and ScrollTimeline. Retrieved from https://www.scien.cx/2021/11/24/scroll-linked-animations-with-the-web-animations-api-waapi-and-scrolltimeline-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.