Is it possible to make a timeline scrollbar with gsap?

[bntratox]

Hello,

I wonder if its possible to make a scrollable timeline with gsap in theory or should I use another library for this?

 

I want to make somthing like this:

 

Im just planning it atm so I have no codes yet.

The black boxes and dots will be opacity 0.1 or something like that, and when user comes in the viewport of the div, it will have a different color and opacity 1.

I think its easy to do with scrolltrigger and start top top or something like that. I can do that. No problem.

 

But the part confuses me :

1- I want the line also go down when scrolling, what is the best approach to do that? increasing it height based on scroll with scrub?

2- I Will use AJAX to add more and more boxes by scrolling. Is it possible? lets say I will have 30 boxes, I don't want to load them all. I want to fetch them from database with ajax and add it to the timeline.

3- When the line hits a ball, I want the line grabs the ball and drags it with it https://streamable.com/fagyed like in the video, the line will hook to the ball and keep scrolling with it till the next ball. Is that possible and easy to do? or should I skip this part.

 

I thought it would be better to think about it before coding it so I wanted to ask here.

Thanks.

 

 

Edit: 

 

 I've seen this on demos but can't we do it without svgs?

See the Pen PgKjjG by mikeK (@mikeK) on CodePen

[Cassie]

Hey there!

 

Taking a look at that demo it looks like you could do the #1 by just having a fixed position line that takes up 50vh. There's no need to draw the line in as it only ever takes up 50% of the screen.

 

#2 Is possible yes - there are lots of examples in the forums. Just search for infinite scrolling ☺️

 

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

 

#3 you can do with pinning.

 

All very possible. 

If you learn by reading - give the scrollTrigger docs a look, there's a bunch of helpful info in there, if you like digging into other demos there are a bunch here that may help you understand some common approaches.

https://greensock.com/st-demos/

 

And there's an explainer video here too!

 

Good Luck!