Horizontal section animated with ScrollTrigger: scrollTo not working

[Florent Catiau-Tristant]

Hey there! 👋

 

I have a section with a row of multiple images (horizontal) which is animated thanks to the ScrollTrigger plugin (see the CodePen link)

So far so good, but I'm trying to make "navigation links" to jump to a certain moment of that animation.

 

I tried the scrollTo plugin property with the id of my elements, but it doesn't appear to work. I guess it's because all my elements are actually on the same level. In the scroller, they should be on the same scroll level...

 

Is there anyway I can tell the scrollTo to scroll to a certain point of my Timeline with scroll trigger? Should I compute a scroll position manually somehow?

 

I tried to use TIMELINE.progress(x), which does updates the animation to a specific progress point, but it obviously breaks when I go back to scrolling, because the scroll position didn't changed.

See the Pen NWXjvze by Kapcash (@Kapcash) on CodePen

[Florent Catiau-Tristant]

Ok I figured this out myself! (So proud haha)

 

Basically, I had to compute the scroll level of the scroller manually. It's a simple computation:

 

const scrollOffset = (TIMELINE.scrollTrigger.end - TIMELINE.scrollTrigger.start) / NUMBER_OF_SECTIONS
// start is the Y pos where the scrolltrigger starts, the offset is how much scroll pixels to reach next section * by the number of the section to reach
const scrollYTarget = TIMELINE.scrollTrigger.start + scrollOffset * INDEX_OF_SECTION
gsap.to(window, {duration: 2, scrollTo: scrollYTarget });