Scrolling animation (like Intersection Observer)

Need help
1

Hey, guys！

I want to implement a scrolling animation (like Intersection Observer) in Bubble.
I would like to change the color of the corresponding text on the other RG according to the contents of the currently displayed RG.
I’m having a hard time coming up with an implementation image, so if you have any ideas on how to approach this, I’d love to hear from you.
Thank you in advance!

■Components
The following two RepeatingGroups are placed in Group Contents (Container layout is Row).

RepeatingGroup Items
RepeatingGroup item_initials

RG Items: Displays product images and titles in two columns.
RG item_initials: Displays the text of option set “item_initial” vertically.

Item Type
item_name
item_image
etc…

option set “item_initial”
initial_id (number)
Display (A to Z)

スクリーンショット 2023-12-03 15.05.20
スクリーンショット 2023-12-03 15.05.20840×1110 43.5 KB

■Details
For example, if the first letter of item_name of RG Items currently displayed on the screen is Z, we would like to change the text color of Display Z Text in RG item_initials. Here is another example. If the first letter of item_name of RG Items currently displayed on the screen is G, I want to change the text color of Display G of RG item_initials.

2

Something like this?
obs: it does not keep track of scroll position, it just saves your last hovered item and then saves it in a custom state, them regex to get te first letter

1 Like
3

Nice to meet you, Jeferson de Oliveira!

Thank you so much for making the implementation image screen! It is also helpful to share the approach.

Getting the scroll position seems to be difficult with Bubble.

The app I am building is supposed to be viewed on a smartphone, so it would be best if I could implement it in an Intersection observer style.

The approach you shared with me is also really great, so I will consider it as my first choice!
Thanks again, though!

1 Like
4

Can you show the event you used to save your last hovered item inside the repeating group?

I have tried to do something like this before but you can’t reference an element inside of a repeating group in a statement for a workflow so it didn’t work

Cheers Mate!

1 Like
5

Sure no problem, i imagined that it was ment to be for mobile… i hope you can find a plugin or somenthing that can take care of that.

Let me know if you want to keep this sample project :slight_smile:

1 Like
6

Thank you very much!

You have greatly increased my implementation image from what it was before our consultation!

I wanna keep this sample project :smiling_face_with_three_hearts:

1 Like
7
1 Like
8

Thank you! Jeferson de Oliveira!

9

Plugin Hoverd Action!

10

sorry, didnt see your comment before, i used a free plugin that shoud do the trick, you can see it in the workflow actions

1 Like
11

This topic was automatically closed after 70 days. New replies are no longer allowed.