Trigger animation immediately with Flackr's Scroll Timeline Polyfill

Hi! I am trying to create an animation of text shrinking to 1 character. But the animation only get triggered when the text element reaches the top (0% in CSS). I want the text to shrink immediately when I start scrolling. The JavaScript looks like this:
document.addEventListener("DOMContentLoaded", init);

function init() {
console.log("loaded");
const scrolledTitle = document.querySelector(".introduction h1");

const scrolledTitleTimeline = new ScrollTimeline({
scrollOffsets: [CSS.percent(50), CSS.percent(100)],
});

const keyFrames = [{ width: "100%" }, { width: "1ch" }];

scrolledTitle.animate(keyFrames, {
duration: 0.5,
timeline: scrolledTitleTimeline,
});
}
document.addEventListener("DOMContentLoaded", init);

function init() {
console.log("loaded");
const scrolledTitle = document.querySelector(".introduction h1");

const scrolledTitleTimeline = new ScrollTimeline({
scrollOffsets: [CSS.percent(50), CSS.percent(100)],
});

const keyFrames = [{ width: "100%" }, { width: "1ch" }];

scrolledTitle.animate(keyFrames, {
duration: 0.5,
timeline: scrolledTitleTimeline,
});
}
1 Reply
NeilVanGotham
NeilVanGotham16mo ago
I got it! I have to use the new "ViewTimeline" instead of "ScrollTimeline"
Want results from more Discord servers?
Add your server