customizing the number of logos in the logo3 interactio...

At a glance

The community member has a component with a Logo3 structure that includes a Logo3_list, logo3_wrapper, and Logo3_logo. They can add up to 8 logos to each list, but want to have a different number of logos. However, when they add or remove the logo3_wrapper classes, it causes gaps in the animation. The community member is asking how to customize the number of logos and what changes to make in the interaction configuration to make the animation work smoothly.

In the comments, another community member suggests following a video by Adam that explains the process. They explain that the two lists need to be identical, with the same number of logo3_wrapper and logo3 images. The community member also needs to match the number of fixed-width columns in the grid component for one of the two lists, and calculate the total width of the columns and gaps to add to the animation.

The community member says they've tried this approach, but anything less than or more than 8 columns in the grid doesn't seem to work, despite changing the other settings. Another community member notes that fewer than 8 columns always leaves a gap between the lists or creates a "jump" in the animation, while 8+ columns work fine. The final comment suggests that on narrower screens, the grid wraps into multiple rows, so the grid columns need to

Useful resources

BBlair

Component / Logo 3

Structure is:

Logo3_list

logo3_wrapper

Logo3_logo (the logo image)

There are two Logo3_list tags and I can add 8 logos to each tag for the interaction to appear correctly.

Question: I want to have a different number of logos, but when I add or remove logo3_wrapper classes, then there are gaps in the animation.

How do I customise the number of logos?
What do I need to change in the interaction configuration to make the animation work smoothly?

4 comments

AAndy Hoey

Hi Blair, in this video Adam explains the process around 13 minutes 35 seconds
https://www.youtube.com/watch?v=aKSe3XZvwkQ

Basically the two lists have do be identical, they can have as many or as little logo3_wrapper and logo3 images as you want, i created one list and then duplicated it, thats it, then you just need to make sure in the grid you match the same amount of fixed width column's in the grid component for 1 of the 2 lists, along with that you need to total the width amount of each column's plus the column's gap between each div to get the total value to add to the animation. hopefully the video explains it better than i do 🙂

BBlair

Somewhat got it working 🫤
I know how to do everything you described and is shown in video, anything less than or more than 8 cols in my grid never seems to work, despite changing all the other settings on the interaction, grid and elements. Will keep trying.

BBlair

Not sure why, but fewer than 8 columns in grid always leaves a gap between lists or creates a "jump" in the animation. 8+ columns works fine, which is what I need, but yeah, not sure why <8 doesn't work.

BBlair

On narrower screens, the grid wraps into multiple rows. Got to customise the grid columns for each screen size.

Add a reply

Community forum for knowledge and support

customizing the number of logos in the logo3 interaction