Jump to content
Search Community

historical timeline

Jean Polkin test
Moderator Tag

Recommended Posts

Here's the topic, here I'm trying to create a historical timeline with a kind of slider. I found two animations on the forum that could do this."History timeline using draggable" and "horizontal reveal on scroll"
I combined these two animations but the problem is that the anchor links no longer work.
What I would like to do is that when we click on a point in the timeline, this displays the text panel and the associated image
and when the panel is active, this enlight the point in the timeline.

 

Do you know what would be the best approach to achieve this.

 

your sharing of knowledge is greatly appreciated.

 

thank you very much to help me accomplish this cool animation

See the Pen QWmXxQz by JPolkin (@JPolkin) on CodePen

Link to comment
Share on other sites

That's definitely beyond the scope of help we can typically provide here, but I would recommend a few things: 

 

  1. Don't use the very old syntax - TweenMax is no longer necessary. Use the simpler, more modern syntax like gsap.to() instead of TweenMax.to(). See
  2. If you need to figure out the scroll position associated with a particular ScrollTrigger animation, there are some helper functions in the docs that may assist you. 
  3. There's no reason to use function-based values if they're always returning exactly the same thing (not dynamic). And use yPercent instead of y if you're using percentages.  
    // old/long
    .fromTo(text, { y: () => { return "100%" }, opacity: () => { return 0 } }, { duration: 0.33, y: () => { return "20%" }, opacity: () => { return 1 } })
    
    // new/better
    .fromTo(text, { yPercent: 100, opacity: 0 }, { duration: 0.33, yPercent: 20, opacity: 1 })

 

If you still need some help, you can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a much more simplified minimal demo and we'd be happy to take a look. I would strongly recommend only focusing on one little piece at a time and keep your minimal demo reduced to only that part. For example, if you want the links to jump to a certain part in the ScrollTrigger-driven horizontal timeline, then Don't include anything with Draggable and eliminate everything else - just have the simplest ScrollTrigger setup with maybe one link so that you can really focus and isolate things. You'll significantly increase your chances of getting a good answer that way.

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