Jean Polkin Posted August 28, 2022 Share Posted August 28, 2022 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 More sharing options...
GSAP Helper Posted August 28, 2022 Share Posted August 28, 2022 That's definitely beyond the scope of help we can typically provide here, but I would recommend a few things: 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 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. 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 More sharing options...
Jean Polkin Posted August 29, 2022 Author Share Posted August 29, 2022 Thanks for the hint, i will fallow that Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now