ScrollTrigger scrollTo specific point

[mvaneijgen]

I see a lot of people hung up on creating buttons to scroll to a particular point on a page while using ScrollTrigger. Of course GSAP has you covered with this! See the ScrollTo plugin! But as with everything in GSAP it starts with an animation. 

 

First of please read my post about creating a stacking card effect, it will be used for the bases of this post

 

 

 

So as usual everything in GSAP starts with an animation, so you first have to have an animation before you start doing anything on scroll, first focus on creating the animation you want to happen and when that is done we can worry about enhancing it with some scrolling

 

See the Pen WNWqEYx by mvaneijgen (@mvaneijgen) on CodePen

 

If you’re happy with the animation you can add some ScrollTrigger logic to see how your animation works on scroll. 

 

See the Pen OJGevrB?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Ok, now for the reason you’re here. How can we have a button that scrolls to a certain position on the page? That is where the ScrollTo plugin comes in, if you check the docs (https://gsap.com/docs/v3/Plugins/ScrollToPlugin/), the most simple setup is to just animate to a pixel value, let’s see how that works! 

 

The below example scrolls to 1000px, simple enough but I hope it illustrates what it is doing under the hood, because scrolling to a specific section will be nothing more than getting the pixel value you want to scroll to and using this as the value in the scrollTo: property!

 

See the Pen JjVQOyK by mvaneijgen (@mvaneijgen) on CodePen

 

But now we want to scroll to the third card in the animation, how can we do this? We know the total scroll distance of the ScrollTrigger because we define that in the start and end properties, right now the ScrollTrigger starts on the top of the browser and has a distance of 4 times the current window height (end: `${window.innerHeight * 4} top`) and we have in total 4 animations! This means each slide animates over the hight of the window, so what do you think will happen if we animate to the current window hight times 2? Well let's see! 

 

See the Pen BaEgwoz by mvaneijgen (@mvaneijgen) on CodePen

 

It animates to the third slide! As you can see I’ve wrapped the code in an arrow function, this indicates to GSAP that we want to recalculate this value if ScrollTrigger.refresh() is triggered, which happens on a page resize, because when the page resized probably the height of the browser changes, so we need to get new values. 

 

If you do not use a function based value you indicate to GSAP that it should not recalculate it’s values and can use its cached values. If you want to read more please check out the docs https://gsap.com/docs/v3/GSAP/gsap.to()/#function-based-values

 

Great we’re done! lets add some more content to the page and everything will be working just fine! But wait!? Why does it now only scroll to the second slide? Before it was scrolling to the third slide. Well all ScrollTrigger is doing is animating to a specific pixel value and because we’ve add another section before it, the scroll distance will be different. What you can do in this case is add the ScrollTrigger start value to the calculations, so instead of just animating to twice the window height, we animate to tl.scrollTrigger.start + window.innerHeight * 2, just try it your self and you’ll see it will always scroll to the top of the ScrollTrigger + twice the window height

 

See the Pen BaEgwoz by mvaneijgen (@mvaneijgen) on CodePen

 

Ok, I hear you thinking, but I want to animate to each slide, and what if my scroll distance changes then I need to update my calculations every where! You are totally right! And the folks on the GSAP team has thought of everything! So what you can do is add labels to your timeline and then scroll to those labels! This can be as simple as scrolling to a specific label eg tl.scrollTrigger.labelToScroll("label3") or this can be be fancy like the example below by getting the next label in the timeline and scrolling to that, I hope you see that you can as easily scroll to the previous label. 

 

See the Pen gOyNeqj?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

If you don't have labels in your timeline you can also do some math to scroll to a specific point in a timeline. The progress of a timeline is always between 0 and 1, so what you can do is get the end and start values of you ScrollTrigger and then subtract and then multiply that by 0.5 to that the halfway point of the animation or any other value!

 

Again to emphasise all ScrollTo need is a pixel value and it is up to you to get the correct value. GSAP gives you all the tools you need, but it is for you to figure out what the math is behind the logic you are looking for! 

 

Hope it helps and happy tweening!

See the Pen poBXLKX?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[GreenSock]

There are a few helper functions that can save you from figuring out the math/logic: 

• To find the scroll position of a particular element: https://gsap.com/docs/v3/HelperFunctions/helpers/getScrollLookup/
• To find the scroll position of a particular animation: https://gsap.com/docs/v3/HelperFunctions/helpers/getScrollPosition

If you want to scroll to the start of the 2nd animation, for example, you could do this: 

See the Pen vYMqVVL?editors=1010 by GreenSock (@GreenSock) on CodePen

 

function getScrollPosition(animation, progress) {
  let p = gsap.utils.clamp(0, 1, progress || 0),
      nested = !animation.scrollTrigger,
      st = nested ? animation.parent.scrollTrigger : animation.scrollTrigger,
      containerAnimation = st.vars.containerAnimation,
      range = st.end - st.start,
      position = st.start + range * p;
  if (containerAnimation) {
    st = containerAnimation.scrollTrigger;
    return (st.start + (st.end - st.start) * (position / containerAnimation.duration()));
  } else if (nested) {
    let start = st.start + (animation.startTime() / animation.parent.duration()) * range,
        end = st.start + ((animation.startTime() + animation.duration()) / animation.parent.duration()) * range;
    return start + (end - start) * p;
  }
  return position;
}

 

[Carl]

wow. there's some great info and demos in here!