[Using ScrollTo plugin with a smooth scrolling page]

Hi All,

I've ran into an issue I can't quite figure out and I'm throwing it out here to see if anybody has any insights.

I'm using ScrollTrigger to smooth scroll my entire page with this:
gsap.to(container.current, {
  y : () => -(getContainerHeight() - document.documentElement.clientHeight),
  scrollTrigger: {
    trigger: document.body,
    start: "top top",
    end: "bottom bottom",
    scrub: 1,
    invalidateOnRefresh: true
  }
})
 

What I'm trying to get working is anchor links to different content on my page using the ScrollTo plugin like this:
gsap.to( window, { duration : 1, scrollTo : `.page__index__${cls}`, ease : 'power2' } )

I've tried a handful of different options with the scrollTo plugin, but each one translates the page to somewhere around where I want it to go, but never the actual top of the element, where a regular anchor link would go. Does anybody have any experience with this or could provide any insight as to how I might get accurate anchor links? Please let me know if you need any more information!

[Setting TimelineMax tween duration to viewport height]

wow, thank you so much. This information is EXACTLY what i needed. And I swear I was googling and experimenting all yesterday. You've really helped me understand the process and i've implimented it successfully into my project. THANKS!

[Setting TimelineMax tween duration to viewport height]

I'm using TimelineMax to build a timeline of tweens as you scroll down the page. So far it's pretty basic, My page scroll listens to this function:

onScroll = ({ offset, limit }) => {
  const scrollPercentage = offset.y / ( limit.y - window.innerHeight )
  this.tl.progress(scrollPercentage)
}

And i am defining my tweens like so:

for (var i = 0; i < container.children.length; i++) {
  const article = container.children[i]
  const [ title ] = article.children

  this.tl.to( title, 100, { transform : 'translate3d(15vw,0,0)' })
}

What I want is for each tween's duration to be exactly the window height. Each article is 100vh so as soon as the article enters the viewport is the start of the tween, and as soon as it leaves the viewport is the end of the tween. I have the duration set to 100 just to play around with it, but it doesn't seem to effect the tween.

 

Can anybody point me in the right direction here?