Clickable indicators

[shilpa_gz]

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

[mvaneijgen]

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

[akapowl]

 

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

[shilpa_gz]

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
 

[Cassie]

Hey there!

 

Have you added the scrollTo Plugin to your project?

 

https://greensock.com/docs/v3/Plugins/ScrollToPlugin

[shilpa_gz]

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. 

[akapowl]

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