Jump to content
GreenSock

s-jay

Navigate to section clicking dot Indicator

Recommended Posts

hello everyone,

thanks for reading.

 

i want to navigate to section by clicking dot Indicator.

i have tried  to change the Observer code but couldn't Understand the Logic to Sync Both.

please Give Me your guidance.

thank you very much.

 

See the Pen OJvmLNE by sj-jay (@sj-jay) on CodePen

  • Like 1
Link to comment
Share on other sites

 

Hello @s-jay

As I already mentioned in that older thread of yours.
 

On 6/20/2022 at 9:29 AM, akapowl said:

[...] GSAP's Observer Plugin can come in really handy with exactly that part, the listening for events - but all the rest of the logic for how to handle things when the events occur, would be up to you.

 

Using browser native navigating via hrefs to IDs on the elements you click will not work because this basic example I created for you does not work with native browser scrolling.

 

The part for how to tween things is already in that example, though. So you could use that as a basis for what needs to happen when you click on one of your bullet-links there.

 

Here's how you could approach it

  • forEach of your links add an eventListener
  • prevent the default behavior on click of that link
  • instead, on click create a timeline for the tweening similar to how it is in the change() function of that example - but instead of things being based on the direction as it is in that function, maybe base the logic for where to tween to on the current slide you are on and the index of the link you clicked.

    So now you'll need to think about how to get the correct amount to tween things where you need them to be.

    Let's say you are currently on the slide with the index 0 and click on the third bullet that has the index 2. This could be one way:
     
    (index - current) * 100 = amount of yPercent to tween things
    
    (  0   -    2   ) * 100 = -200

 

I say this is how you could approach it, because the example I provided you with the last time was just with the very basic tweening from one slide to another in mind - every time you want to implement other behaviour, chances are good that the basic logic provided could be improved to better implement that behaviour. And with this new behavior you want to implement in mind, the general underlying logic could probably be improved already. 

This has nothing much to do with GSAP though and thus is out of scope for what this free support forum can offer. As I mentioned, you've already got a suggestion for how to approach things from the GSAP side in that example, so maybe give it a shot with what I suggested beyond that now.

  • Like 2
Link to comment
Share on other sites

thank you for your Guidance .  your Explanation is very helpful.

 

  • Like 1
Link to comment
Share on other sites

Thanks again for your help.

finally got it working...

See the Pen OJvmLNE by sj-jay (@sj-jay) on CodePen

  • Like 1
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.
×