Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

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

Recommended Posts

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.


Link to comment
Share on other sites

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 :D


Happy digging into it.


  • Like 6
Link to comment
Share on other sites

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.



  • Like 4
Link to comment
Share on other sites

It's nice to have you back Craig ☺️

  • Like 4
Link to comment
Share on other sites

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 ...



  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.