Jump to content
GreenSock

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

History timeline using draggable

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 post
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 post
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 post
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 post
Share on other sites

Thanks for the idea. I'll try that out. 🙂

Link to post
Share on other sites

This isn't exactly the same as what you're doing, but it may help a bit. Please keep in mind that these demos are from another thread and have not been updated to GSAP3.

https://codepen.io/PointC/details/MvEPZq

 

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

 

This was the original thread.

Hopefully that gives you some ideas. Happy tweening. :)

 

  • Like 3
Link to post
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.

×