shilpa_gz Posted May 19, 2022 Share Posted May 19, 2022 Hi, I have created indicators and trying to make them clickable. Even I get the index for every ball position on click indicators. But I don't know how to make it work just like a slider indicator. Can anyone help me that how I can achieve this functionality Thanks in advance. Shilpa See the Pen jOZmGaY by Ankita-gupt (@Ankita-gupt) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted May 19, 2022 Share Posted May 19, 2022 Is something like this what you are trying to do? I've add the ScrollToPlugin to your project and on click of the indications I scroll the page `index * 100` this is just an arbitrary number, but your scroller height is 600 and you have 7 elements, so that gets you kinda close. See the Pen MWQmQwr?editors=1011 by mvaneijgen (@mvaneijgen) on CodePen What I would do is add labels to your timeline `.add("myLabel")` to points you want to jump to and then you need to calculate that position based on the timeline. Here is an example of that working with just one label. That works on the third indicator (index 2) See the Pen eYVWVJr?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen 3 Link to comment Share on other sites More sharing options...
akapowl Posted May 19, 2022 Share Posted May 19, 2022 Working with labels, as @mvaneijgen suggested is a good idea. And ScrollTrigger even does have a .labelToScroll() method. So what you could do as an alternative is slap some data-attribute with the label you want to scroll to on your <li>s, add some labels to your timeline, and get that data-attribute on click. You might have to adjust things a bit though. It looks like you have two tweens tweening the autoAlpha of '.content-one' to 1, so I had to remove one of them to make things allign properly with that other function of yours, that is setting the active class. That's just an idea - maybe it will be helpful. Happy tweening! See the Pen abqWYjm by akapowl (@akapowl) on CodePen 1 1 1 Link to comment Share on other sites More sharing options...
shilpa_gz Posted May 20, 2022 Author Share Posted May 20, 2022 Hi @akapowl, @mvaneijgen Thanks for the response @akapowl I have tried this code on my local .html file. But getting an error when clicking on indicators and indicators not working. Do you have an idea about this error? Getting the same error while trying this animation with @mvaneijgen code. mvaneijgen Link to comment Share on other sites More sharing options...
Cassie Posted May 20, 2022 Share Posted May 20, 2022 Hey there! Have you added the scrollTo Plugin to your project? https://greensock.com/docs/v3/Plugins/ScrollToPlugin 2 1 Link to comment Share on other sites More sharing options...
shilpa_gz Posted May 20, 2022 Author Share Posted May 20, 2022 Thanks, @Cassie. It's working now.@akapowl Thanks for helping me. I am facing an issue in another animation for indicators. I implemented the same code with another animation but it's not working over there. Can you please check what is the issue in my code? See the Pen ExbpPRO?editors=1111 by shilpa_gz (@shilpa_gz) on CodePen The first indicator -> Should scroll to the First image The second indicator ->Should scroll to the Fourth image The third indicator ->Should scroll to the eighth image Thanks in advance. Link to comment Share on other sites More sharing options...
akapowl Posted May 20, 2022 Share Posted May 20, 2022 30 minutes ago, shilpa_gz said: Can you please check what is the issue in my code? You don't have any labels on your timeline, so first you have to make sure to add labels to your timeline - like maybe here: images.slice(1).forEach((image, i) => { t2.add(() => { showImage(t2.scrollTrigger.direction < 0 ? i : i + 1); }, i + 1) .addLabel('image-' + i) }); Then it also looks like instead of the e.target you will have to use the e.currentTarget on click in this other scenario. https://developer.mozilla.org/en-US/docs/Web/API/Event/target https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget See the Pen MWQopWY by akapowl (@akapowl) on CodePen And if you want to add labels to the very start and very end, too, you could do it like this then t2.addLabel('start') images.slice(1).forEach((image, i) => { t2.add(() => { showImage(t2.scrollTrigger.direction < 0 ? i : i + 1); }, i + 1) .addLabel('image-' + i) }); t2.addLabel('end') See the Pen GRQEWNY by akapowl (@akapowl) on CodePen 3 1 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