Forum Academy Marketplace Showcase Pricing Features

Animate inside a cell?

Is there a way to animate an element inside a repeating group cell from outside the cell based on a condition? For example, if URL parameter is XYZ, animate the image inside the cell that is XYZ.

I don’t think you can. There is no way to animate elements of a specific RG’s Thing. Only action you can do is scrolling to a specific entry of a RG.

1 Like

Bump. Any updates on this? I’d like to have the first Cell inside of a Repeating Group ‘fade in’ every time text is added from a Text Input on the same page.

Thanks!

So, you can’t access elements inside specific cells from outside the RG in a workflow, but trying to think of a workaround. Question: is this to fade in the addition of a new item (new cell) in the RG list altogether or fade in a text element in an existing cell - that is, the cell’s thing’s text was previously empty (no value) and now does, so you’re fading it in…?

I’m looking to populate a list with text values from an Input on the same page; each time a new one is added it’s faded in as the first item and the list grows longer.

The fade in helps illustrate success to the user, as well as provide eye candy. I’d take most any minimalistic-animation, I just want to class up the experience a bit.

I follow. Hmm will have to think about this. Might need to get crafty with a custom state and visibility condition based off number of items in the list.

1 Like

Is the repeating group that you have now only one column? If so, you could create a workaround where there is a separate text element outside of the repeating group (disguised as being the ‘first cell’) which always showed the first item of the data source, and the repeating group cells beneath it would display items from #2 and on. This would make it appear as if all of the texts were within the same repeating group, but you would have the ability to access the first text since it’s not within a cell.

Then you can create a custom state to track the count of entries like Gaby said, which would then hide/animate the most recent submission every time that changes. If you think this might work for you, I can create a forum app example. :slight_smile:

That sounds like exactly what I’m looking for! I think I need to go familiarize myself with states a bit more…

I just realized that it’s much easier to set this up with custom events instead of custom states. In this example, after text is entered into the input and the Submit button is clicked - the workflow creates a new entry, resets the input, triggers a custom event which hides the text within the first Group, and then schedules a custom event (delay: 0.5 seconds) to fade-in the newest text entry. Let me know if you need any assistance with setting this up in your app. :slight_smile:

Preview:

Editor:

3 Likes

Awesome! Thanks for this; exactly what I was looking for.

1 Like

Awesome! No problem Andy! :slight_smile:

Hey Andy, I just realized that I forgot about the ‘pause action’. Instead of using two custom events, I updated the workflow actions to be:

This will use much fewer workflows (1 as opposed to 3!)

2 Likes

Thanks for the update!

1 Like

Say you wanted to assign all of the ‘Entry’'s into a single data type. Would it be better to add them as a List or add as individual Things the same Type instead? The end result of this animation in question is to do just that; add the same data Fields (Entry’s in this case) to singular Things, and then have the things recalled individually on a single page with a RG populating with the existing Entrys. User can add a new Entry and the list will continue to grow downward.

Easiest to filter using a List. Or Do a Search for Thing Type and filter based on instance?

To double-check, are you asking if it’s best to save/store Entrys as a List of Entries on the User and display that in a repeating group using “Current Page User’s List of Entries”; Or instead, have a repeating group’s data source be a “Do a Search for Entries” with the constraint being Created by = Current Page User? In either case, I would definitely have each Entry be their own data type (not just a list of texts), and I would store the Entries as a list on the Creator (important to note that lists can contain up to 10,000 items). I’ve read that if you have a repeating group - it can be faster to use “Do a Search for” and add constraints to the search, instead of displaying a List with :filtered. Both ways will display the same data; I think how you store/query it depends on what makes the most sense for your app. Are the entries only going to contain one field of text that the User created?

Interesting. More than one field, but one of the fields will be continuously updated. For example;

Data Type: Person
Field: Name
Field: Location
Field: Food_Person_Likes

So, an entry could be…

Steve
Florida
PIzza

But then later, adding or subtracting another Food_Person_Likes…

Steve
Florida
Noodles

All while displaying these three fields on a page with a RG displaying Steve’s current list of Food_Person_Likes.

This is great. I can even delete the ‘Pause’ and it has a good effect. Thanks for helping me wrap my mind around some of these concepts.

That makes sense I think! So the data types are set up in this way:

Data Type: User
Name (Type: Text, List: No)
Location: (Type: Address, List: No)
List of Favorite Foods (Type: Food_Person_Like, List: Yes)

Data Type: Food_Person_Like
Type (Type: Text, List: No).
Creator (Built-in, Type: User, List: No).

Then if you wanted to display Steve’s list of Food_Person_Likes in a repeating group, the data source would be: Current Page User’s List of Favorite Foods.

(Note: if you define your page as having a Type of ContenT = User, in the page’s property editor, the option for “Current Page User” will become available. This is different from Current User; Current Page User displays the data that was just sent to the page (of a User); Current User will always display the Current User’s data.

So if you were on a ‘search people’ page and clicked on Steve’s profile picture, the workflow could navigate you to the profile page, sending Steve’s User data. You can then display any User’s dynamic info on the profile page using the expressions “Current Page User’s Name” (for Steve) and "Current Page User’s Location) (for Florida) in text elements on the page itself. For the repeating group text elements, each cell could contain a text element with the following dynamic data: “Current Food_Person_Like’s Type” to view the word ‘Pizza’.

Or if you wanted to display a repeating group of every User’s Food_Person_Like’s, then your repeating group would do a Search for Food_Person_Likes, with the text elements in each cell being:

“Current Food_Person_Like’s Creator’s Name” (Steve)
“Current Food_Person_Like’s Creator’s Address” (Florida)
“Current Food_Person_Like’s Type” (Pizza)

If any of this was confusing at all, or if you need any help settings this up in your app please let me know. If you are coming from structuring relational databases, I think this thread may be helpful as well!

https://forum.bubble.io/t/are-many-to-many-relations-supported/8019/20