Scroll to label with ScrollTrigger
Hi. I have the structure where all the elements are in "position: fixed" and animate them with ScrollTrigger.
My problem is when I want to play animation to label or position in timeline on click. Timeline plays, but page scroll does not move.
I thought to try to calculate scroll position but all elements are fixed so it doesn’t work.
Is there any possibility to create timeline that doesn’t depend on scroll page but plays on scroll? Or something that will scroll and play at the s
Here's a helper function that'll let you feed in a timeline and label, and then it'll return the associated scroll position (assuming that timeline has a ScrollTrigger attached):
function labelToScroll(timeline, label) {
let st = timeline.scrollTrigger;
return st.start + (st.end - st.start) * (timeline.labels[label] / timeline.duration());
}
And here's a fork of your demo with it working (assuming I understood your goal correctly):
See the Pen ExvbZXg?editors=
