Animate navigation dot based on repeating group's item/scroll position

[ajisican]

I have a repeating group with 3 items, and a custom state “currentIndex” (to store which item is being viewed)

clicking the navigation dots will update the custom state into their corresponding number (1-3) and has a conditional that when it corresponds to the number, it grows and turns to black to show active state.

However, I cant find a way to change the state “currentIndex” of the repeating group when the item is being scrolled. The first dot should show an active state when item 1 is being viewed, and 2nd dot for 2nd item on repeating group etc.

see demo below:

any solution or complete alternatives for this? thank you so much guys!

[kouakouamed5474]

Hi ! Could you tell me how you created horizontal scrolling repeating group ?

[ajisican]

I just created a repeating group with a fixed row of 1, and no fixed columns

[kouakouamed5474]

Yes I got it, thank you so much

[thekeybeats2]

You can calculate the current index of the scroll:

1. Give the repeating group an ID. (for this example I’m using “mplRG”);

2. Download free Toolbox plugin from the store.

3. add a javascriptToBubble on the page and give it a name for reference. Also publish the value. Give it type number:
   

   

4. The code to calculate the current Index is as following:

const rg = document.querySelector('#mplRG');
rg.addEventListener('scroll', calculate);
const cells = rg.childElementCount;

function calculate(){
const index = (rg.scrollLeft / (rg.scrollWidth - rg.clientWidth)) * cells + 1;

bubble_fn_index(index);
}

Basically:

1. you’re finding the repeating group with querySelector (don’t forget the #) and storing it as a reference in “rg”.
2. You’re then counting the amount of cells in the repeating group (be sure to enable “show all items immediately” in your repeating group)
3. Then you’re telling javascript to do something when this repeating group is scrolled, which is to calculate the scroll index.
4. Lastly, you’re giving this value to the javascriptToBubble element.

Your Dots
Now your conditionals for those dots don’t have to rely on a custom state.

1. Put a dot in a repeating group
2. The repeating group data source is just the main repeating group with the user cards → (repeating group users’s list)
3. Then for the dots you’ll have a conditional along the lines of: javascriptToBubble’s value:floor = current cell’s index – apply the style you wish.

Cheers!

[ajisican]

wow thanks for the very detailed solution, I will try this now and give an update right away. Thank you very much @thekeybeats2

[ajisican]

Ive followed your instructions , it detected the scroll event but it doesn’t add 1 to the index,

(ive added a text below the rg, referencing the value of the javascript element)

[thekeybeats2]

When you inspect the console, is there an error?

for bubble_fn_index try putting a static number in there → bubble_fn_index(3). Do you see a number 3 appear when you scroll?

[ajisican]

There’s no error in the console, and i tried adding the 3 in the function and it works. this means that the java script is working right?

but maybe the function “calculate” is what’s causing the issue.

[thekeybeats2]

Hmm, that exact code is working on my end. Just to confirm, you’ve added “rgreviews” to the repeatingroup right? (Only one repeating group)

if you did, try adding this right above bubble_fn_index();

console.log(index);

Inspect the console to see if you’re getting any value.

[ajisican]

yes i added the ID attribute to the repeatinggroup.

here’s the console

[ajisican]

Ah! I think i know now the problem, what should be the positioning of the javascript and html element?

here’s mine

[thekeybeats2]

Javascript element and html should be outside the repeating group. Anywhere on the page really, but not inside of a rg.

[GH5T]

Intersection observer would be your best bet. I’m sure there is a plugin using it.

let options = {
  root: document.querySelector("#scrollArea"),
  rootMargin: "0px",
  threshold: 1.0,
};

let observer = new IntersectionObserver(callback, options);

Intersection Observer API - Web APIs | MDN

Could easily use bubble to js or whatever it’s called from the Toolbox plugin I believe

[ajisican]

You’re a life saver @thekeybeats2 ! Thanks so much. I ran the script through workflows instead of adding it in an html element and it worked. Thanks so much!

[thekeybeats2]

Awesome! Glad you got it working. If you have any other questions, let me know