Jump to content
Search Community

History timeline using draggable

Thanooshan test
Moderator Tag

Recommended Posts

Hi, I've been trying to re-create the history timeline where I found in: https://www.longines.com/company/history/20th/1939

I tried up to a certain point, after that i'm out of ideas. I've provided the work i've done so far. 

 

Up to now i've done the following things,

  • OnDrag the handler, the years dots moves
  • OnClick the year dot, page will scroll to the relevant history topic.

 

Now I'm struggling in following areas, 

  • how identify, the handler is in between which two years dots, have to show the years data in the handler
  • on passing each year dot, the content should scroll to relevant topic . If you look at the link you'll understand what i'm saying.

 

And even-though, I manage to move the years dots, at end of it, the handler is going pass the last dot. If you look the reference link. They are correctly managing it. 

 

I've been trying this for last couple of weeks now. If you guys help on this that would be great.

See the Pen mdebMWN by thanooshan (@thanooshan) on CodePen

Link to comment
Share on other sites

Hey Thanooshan and welcome to the GreenSock forums!

 

On 4/8/2020 at 3:34 AM, Thanooshan said:

how identify, the handler is in between which two years dots, have to show the years data in the handler

Sounds like a use case for Draggable's snapping. Learn more in the Draggable docs.

 

On 4/8/2020 at 3:34 AM, Thanooshan said:

on passing each year dot, the content should scroll to relevant topic . If you look at the link you'll understand what i'm saying.

You should use Draggable's onUpdate to change the position of the scroll of the text section.


Hope that helps :) 

  • Like 2
Link to comment
Share on other sites

Hi, ZachSaucier, Thanks for the quick response.

 

Quote

You should use Draggable's onUpdate to change the position of the scroll of the text section.

Could you give a demo using this scenario. I didn't get a clear idea on that. When I drag the handler the years belt starts to move and the handler can move from 0- 1440px (width of laptop screen width). When handler reaches around 1400px, the years belt will be at the last dot. So, how to find out  the handler is passing which dots? 

Link to comment
Share on other sites

12 hours ago, Thanooshan said:

Could you give a demo using this scenario.

Sorry, as much as we love helping people around here, we just don't have the resources to build out the implementation for everything that people request that isn't directly related to GSAP. But the core of the approach is this: You should be able to calculate how much of the timeline has been dragged. You should also be able to calculate how much you should scroll. So use the first amount to set the second amount using proportions. Or get the closest element in the timeline and use its position to set the scroll position of the text.

 

If you have any GSAP-specific questions or issues that I can help with, I'm happy to help.

  • Like 1
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.
×
×
  • Create New...