Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
cooletski

scrollTrigger Horizontal Carousel Dot Navigation Indicator

Recommended Posts

Hi, I need some help for the Dot Navigation Indicator at the bottom of the screen, see the codepen that I created. I'm trying to make it work but it was no luck. Really appreciate for the help. Thanks!

See the Pen eYzPWvB by derwinsadiwa (@derwinsadiwa) on CodePen

Link to comment
Share on other sites

Hey cooletski and welcome to the GreenSock forums.

 

Since you're using ScrollTrigger to fake horizontal scrolling, you need to calculate the distance that the anchors should go. That calculation should be the vertical offset of the parent (0 in the case of your demo) and the horizontal offset of the element to be navigated to. I answered a very similar thread the other day:

Applying the same approach to your situation, you should get something like this. Since all of your horizontal sections are the same width it makes the calculations simple:

See the Pen JjKmpWO?editors=0010 by GreenSock (@GreenSock) on CodePen

 

You should probably use a button element for you dots instead of spans and have the whole thing wrapped in a <nav>. Semantic HTML is important.

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Thanks for the quick response, I got a lot of ideas from your code Zach, You're awesome! 

 

That clickable dot navigation is a nice to have for every projects. Which is expected to click by the user. But my main concern here is to update the active dot navigation while scrolling. Just to tell the user that which current section he is right now. 

 

I tried using onEnter callback to update the active dot but I'm having trouble to target that specific section while scrolling.

Link to comment
Share on other sites

1 hour ago, mikel said:

This could be an option

This approach faces some issues with conflict between the click event and scroll animation. 

 

1 hour ago, mikel said:

another concept

This approach breaks for me if I try to scroll horizontally with my mousewheel. Also using spacebar to navigate doesn't work.

 

I think the way that I would do it is use the onUpdate of the ScrollTrigger to detect the current section and then animate the buttons accordingly.

See the Pen zYBMrVr?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 3
Link to comment
Share on other sites

  • 8 months later...

Hi ZachSaucier,

 

Can you do it same in vertical, i need it please.

 

Many thanks

Link to comment
Share on other sites

Hi @trinov,

It's a little out of the scope of these forums to provide custom solutions.

If you're struggling to convert this to a vertical format and have a GSAP specific question, feel free to make another forum thread and we'll see what we can do to help.

Otherwise we have a freelance forum here. Maybe someone can help you build it.

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