Looking for a starting point to create something like this...

[ThePixelPixie]

I've been given a mockup of an idea for a timeline interface. I have no idea where to start to find something I can use as a jumping off point to create this. Since I was kindly sent in a perfect direction for another item I was trying to emulate (and I'm *nearly* there with it), I'm hoping someone can send me down another fun rabbit hold here?

 

Thanks in advance.

[akapowl]

Hello there,

 

as a very basic starting point, maybe this codepen demo here by @PointC can help.

I remembered it from an older thread (unfortunatelly I don't remember which thread it was, though).

 

See the Pen YYxvgQ by PointC (@PointC) on CodePen

 

Note, that it still uses old TweenMax, so updating it to GSAP3 would probably be a good idea - and not too hard to do.

 

If you want the individual elements to remain horizontally leveled throughout the animation (as it looks on your picture), you would probably have to add some countering rotation to the individual elements themselves.

 

I'd suggest first getting the animation itself up and running in a way that it works for you, to get a good feeling for what is important for it to work in the first place. Depending on what interaction you want to enable, you can then try hooking it up to Draggable and/or ScrollTrigger.

 

If you'd want both (dragging and scrolling) to work on it, it would probably be best to utilize a proxy element - similar to what was discussed in these threads...

 

 

 

...and is being used in this demo (note: I'm talking about the concept - not saying it is the exact solution you should use).

 

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

 

 

If you'd then also want to trigger things on click of the arrows, maybe it would be best to use the ScrollToPlugin to scroll the page to a certain point that you'd have to calculate. That would obviously not be neccessary/doable, if you don't want to hook things up to ScrollTrigger - then you could just tween things to a certain point and update your draggable along the way (if you want it to be draggable at all).

 

..best don't try implementing everything at once - go piece by piece here. As you can see, the rabbit hole is veeery deep

 

Happy digging into it.

 

[PointC]

Yeah - that demo is a bit old and needs updating, but it may be a jumping off point. This is the original thread for that one:

Happy tweening.

 

[Cassie]

It's nice to have you back Craig ☺️

[mikel]

On 7/29/2021 at 4:47 PM, PointC said:

that demo is a bit old and needs updating

 

Just another concept

 

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

 

Happy tweening ...

Mikel