Scroll indicator/timeline and toggle class with scrolltrigger

[idiakite]

Hi, when we click on the button it opens a modal. Inside this modal, it's possible to scroll down to read all the content. It has on the left a "scroll indicator" and some bullet points related to text content on the right. I'd like to anim the scroll indicator (increase the height when we scroll down) and add a class to the bullet points when the scroll indicator hits them.

I have two issues right now:
- about the scroll indicator, scrolltrigger creates a huuuge blank space after my content so the the scroll indicator is biased and I don't know why (is it related to the end parameter) ?
- I created another function to toggle class my bullet points, it's "working" but it's not perfect because classes aren't toggle exactly when the scroll indicator meet the bullet point.

Is it possible to achieve what I want with only one function/scrolltrigger ? How to fix the end section bug ? Thanks in advance.

See the Pen vYbjBLp by idrissdiakite (@idrissdiakite) on CodePen

[mvaneijgen]

Hi @idiakite

 

If you want things to line up, they will need to have the same settings, so you growing of the line and the bullets, will need to have the same trigger and the same scrub value, otherwise they will never line up. Also I would give all your animations and ease: "none", this feels nicer with ScrollTrigger and will be much easier to line up. 

 

What I've also done is add an onComplete all back to the animation of opening the modal, because only when it is done animation, ScrollTrigger check we're it needs to put the triggers, if you do it earlier nothing will line up, because it still is in the middle of the animation. Maybe you could add another fade animation when it is done, because now it springs in to place when everything.

 

I've also moved your toggleClass from the bullets to a GSAP animation. I've also removed the 9999 from the ScrollTrigger, because that will add empty space to the page which is not needed.

 

The only issue now is that there is no way to scroll to the bottom of the page. You will need to make the modal fit in the current window height and add a padding to the bottom of half the window height if you want to be able to scroll to the last item. Maybe add some cool graphic or text in that bottom space, so that it doesn't feel that empty, "To infinity, and beyond!".

 

Hope it helps and happy tweening! 

 

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

[idiakite]

Hi @mvaneijgen now I understand thank you very much for your help I'll update my functions/modal to make it works !