Community forum for knowledge and support

Updated 9 months ago

customizing the number of logos in the logo3 interaction

At a glance

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?

A
B
4 comments

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 πŸ™‚

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.

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.

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

Add a reply
Sign up and join the conversation on Slack