Jump to content
Search Community

scrollTrigger Horizontal Carousel Dot Navigation Indicator

cooletski test
Moderator Tag

Recommended Posts

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...
  • 4 months later...
1 hour ago, OSUblake said:

You're going to have to position it inside whatever you are pinning.

Hi @OSUblake, Thanks for your reply. But it's not working without fixed position. But i want dot navigation only for horizontal section not in the full viewport. Please check this link: 

See the Pen VwMPPpr by bdthemes (@bdthemes) on CodePen

 when you scroll and go to bottom of the page dot navigation overlapping the bottom section when i want to keep the dot navigation only in horizontal area (http://prntscr.com/22zolmc). I hope you understand it.

Link to comment
Share on other sites

Like I said, you need to position it inside of whatever you're pinning and then absolute position it.

 

<div class="wrapper">
  <section id="first" class="slide">
    <h1>First Section</h1>
    <p> This is a content.</p>          
  </section>
  <section id="second" class="slide">
    <h1>Second Section</h1>
    <p> This is a content.</p>          
  </section>
  <section id="third" class="slide one">
    <h1>Third Section</h1>
    <p> This is a content.</p>          
  </section>
  <section id="fourth" class="slide">
    <h1>Fourth Section</h1>
    <p> This is a content.</p>          
  </section>
  <section id="fifth" class="slide">
    <h1>Fifth Section</h1>
    <p> This is a content.</p>          
  </section>
  
  <ul class="dot-nav">
    <li class="is-active"><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
  </ul>

</div>

 

Link to comment
Share on other sites

Hi @OSUblake, Thanks for your previous help. I am fetching another issue. When i using multiple horizontal scroll section and when i click the second scroller section dot nav it's scroll to first section. How i fix it? I mean how i works each dot nav for each section.

 

Please look at this codepen example:

See the Pen LYzjRmL?editors=1010 by bdthemes (@bdthemes) on CodePen

 

Link to comment
Share on other sites

Hey there Selim,

What you're referring to is the browser rendering 'catching up' as you scroll. 

 

I can only see the flicker by viewing this in an iframe (on codepen) or scrolling super fast - and that's not really something GSAP can get around. It's just how browsers work.

If you check in debug mode it's better.


https://cdpn.io/bdthemes/debug/bGooabo/PBrNWRVqvXZA

If this is really a blocker for you, you could look into smooth scrolling, then the animation and scroll would happen on the same thread. However this comes with an accessibility trade off and will be more complex to set up.

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy()

  • Like 1
Link to comment
Share on other sites

Hey @Cassie, Thanks for your reply. But it's not only iframe or one browser issue. It's happened to all browser even non iframe page.

 

It's working smoothly when i remove the top section (http://prntscr.com/245jv0a). But when i add any element before horizontal scroller section problem start again.

 

I have some limitation to add any extra 3rd party plugin for smooth scroll. Can you carefully check this issue and give me a right solution for it?

 

Link to comment
Share on other sites

Hi Selim, I'm afraid that my answer isn't going to change.

There isn't really a GSAP solution, this isn't a GSAP issue, it's a limitation that's down to browser rendering, we can't do anything about that.

There's a GSAP smooth scrolling solution in that page I linked to so you don't have to use a third party. But as I said before, there are accessibility implications so it's worth considering whether it's worth sacrificing functionality for some people to avoid a rendering flicker.

In chrome and in debug mode I can't see the flicker at all.
 

 

  • Like 1
Link to comment
Share on other sites

Hi @Cassie, Thanks for your reply.  Scrolling working smoothly but problem when i click on dot nav. Also same problem in your another example:

 

 

 

Please check my previous codepen demo also have same problem. 

 

NOTE: When i removed the top section (keep only horizontal section) it's working fine.

 

 

 

Link to comment
Share on other sites

Hello Selim.

 

As @Cassie mentioned twice already, that flicker is related to how browsers handle the scroll on a different thread than the JS, so unless you are going to implement some sort of smooth-scrolling, you will not get rid of it - the best you can do is try and find a workaround for it. That was also mentioned by @GreenSock in this thread:

 

 

 

A workaround in a similar vein could be to make your .slide 2px wider than the viewport and in the scrollTo calculate things, so it will land with 1px overflowing to the left and 1px to the right - this way the flicker shoudln't happen if you used the scrollTo on the first or last section before.

 

See the Pen oNGGqYm by akapowl (@akapowl) on CodePen

 

 

 

It will still happen when you are in between different horizontal sections and click one of the bullets then - that wouldn't be happening with the suggested smooth-scrolling approach though, as you can see here.

 

See the Pen poWWKQb by akapowl (@akapowl) on CodePen

 

  • Like 3
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.
×
×
  • Create New...