ScrollTo not scrolling to previously viewed elements when they are sticky or absolute

[AllYourCodes]

Hey folks, 

 

I've been trying to get this animation working for a few days now and I keep getting close but I can't quite nail the navigation.

 

In the 'Pen you'll see what I'm trying to achieve.

However in summary:

I'm trying to create an interface where a user scrolls through a series of cards. These cards scale to 1 and opacity to 0, it disappears revealing the next card, and so on.  On the right is a navigation that highlights each nav item as the user scrolls through the cards. They are also clickable and should scroll the cards to the corresponding one.

 

I can achieve both functionalities separately however when I combine them the navigation stops working correctly. 

 

I think it's related to the cards being either set to position:sticky or absolute. If I leave them as relative then everything works, however I don't get the desired animation for the cards.

 

I've been scratching my head a lot on this, so any suggestions would be greatly appreciated ❤️

 

Thanks

See the Pen vYwKGYB by theSolTrain (@theSolTrain) on CodePen

[AllYourCodes]

Here's an example I made when testing different approaches such as using position:relative for the card (.box in this example)  

See the Pen NWVrNBX by theSolTrain (@theSolTrain) on CodePen

 - Here the nav works just fine, but the animation isn't what I'm looking for. 

[Rodrigo]

Hi,

 

This is mostly about the way position: sticky works. It works as a relative element until it becomes sticky, then it behaves as fixed/absolute, therefore is taken out of the document flow, the same applies with the cards in your left column which are absolutely positioned:

https://developer.mozilla.org/en-US/docs/Web/CSS/position#sticky

 

Here is a fork of your demo with some changes to the styles and the JS logic:

See the Pen mdYErob by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[AllYourCodes]

@Rodrigo you hero! Thank you so much for your help.

Can I buy you a coffee or similar as a thank you?

 

Let's see if I've understood the changes you've made...

 

So it looks like you changed the the position of both the .container and the .navigation from sticky to relative and absolute. 

Is that so that the .container is still in the document flow? (i'm going to do a refresher on CSS and DOM elements 😅  after this)

 

In the JS i've noticed you moved the Timeline to outside of the forEach which makes sense as the animations should be attaching to one timeline instead of initialising a new one each time, is that correct?

 

You've also changed the end parameter to "+=" + 50 * cards.length + "%"could you have used "max" ?

 

In the timeline you've added pin: true is this so that the .container is pinned during the animation, which I assume is why we don't need the .container to be sticky anymore?

 

Finally you've changed the way the scrollTo in the navigation works. You've set it to tl.scrollTrigger.start + window.innerHeight * 0.5 * i + 100

 

If I understand this correctly, you're making it responsive. First you're taking the start position of the timelinescrollTrigger which is set to "top top", then you're getting the innerHeight of the window, adding them together and halving them. Are you halving it so you are in the centre of the animation for the card?.

 

You're then multiplying it by the index of the forEach, which will give you the position for each .box, and finally adding 100 so that the .box is in full view.

 

Have I understood that correctly?

 

Again thank you so much for your help, I really appreciate it. 🙏

 

 

[Rodrigo]

3 hours ago, AllYourCodes said:

So it looks like you changed the the position of both the .container and the .navigation from sticky to relative and absolute. 

Is that so that the .container is still in the document flow?

Not really, my idea is to pin the container element with ScrollTrigger, nothing more. There is no  need for position sticky in this case.

3 hours ago, AllYourCodes said:

You've also changed the end parameter to "+=" + 50 * cards.length + "%"could you have used "max" ?

The max keyword will use the maximum scrolling distance available, which could lead to unexpected results with pinning:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/#end (click the View more details link)

 

Instead I gave a string that is the amount of cards times 50 as a percentage. If you have 6 elements that would read "+=300%", which means 3 times the height of the viewport. Again check the ScrollTrigger docs for the start and end points value.

 

3 hours ago, AllYourCodes said:

Finally you've changed the way the scrollTo in the navigation works. You've set it to tl.scrollTrigger.start + window.innerHeight * 0.5 * i + 100

I'm not adding 100, this is the value being passed to the ScrollTo Plugin:

scrollTo: {
  y: tl.scrollTrigger.start + window.innerHeight * 0.5 * i
},

When a GSAP instance has a ScrollTrigger configuration, that instance has a scrollTrigger property, that is the ScrollTrigger instance. A ScrollTrigger instance has many properties, among them is a start and end properties that correspond to the scroll value when the ScrollTrigger starts and ends, of course. I'm telling the ScrollTo Plugin to scroll to the start of the ScrollTrigger instance associated with the plus half the height of the viewport times the index of the link. Since we have the same amount of links and cards it matches the scroll position of each card animation. So for the first card it would be this:

tl.scrollTrigger.start + window.innerHeight * 0.5 * 0 // tl.scrollTrigger.start

And for the final card would be this:

tl.scrollTrigger.start + window.innerHeight * 0.5 * 5 // tl.scrollTrigger.start + 2.5 * viewportHeight

Remember that the ScrollTrigger instance ends at 3 times the viewport height, which is when the animation of the last card is completed.

 

Hopefully this clear things up.

Happy Tweening!

[AllYourCodes]

Thanks @Rodrigo for clearing that up.

 

I'm still learning GSAP and this was a great lesson, cheers 🙏

 

Can you recommend a tutorial for GSAP, from beginner to expert?

 

Thanks

[Rodrigo]

There are lots of tutorials out there on the web and youtube, that will cover some specific effects and tricks with GSAP, so you should start by looking on google.

 

You should definitely check our Learning Center:

https://gsap.com/resources/

 

Also check our starter demos on codepen:

https://gsap.com/demos/?page=1

 

While you go through those demos be sure to have the documents at hand in order to check the API:

https://gsap.com/docs/v3/GSAP/

 

Finally @Carl offers great learning resources in his courses and he is a great teacher as well, so is definitely worth taking a look at it:

https://www.creativecodingclub.com/bundles/creative-coding-club?ref=44f484

 

Happy Tweening!

[Rodrigo]

Be sure to check our Youtube channel as well:

https://www.youtube.com/@GreenSockLearning/videos