Community forum for knowledge and support

Updated last year

Smooth logo transition

At a glance

The community member has a question about a logo section where the logos move from one side to the other, and there is an empty moment before the logos restart flowing. The comments suggest a few things to try:

1. Calculate the width of one logo including padding, multiply by the number of logos, and add this to the interaction settings to adjust the x-position value.

2. Ensure the logos span the full width of the screen.

3. Set the grid width in the style panel to use REMa units instead of FRs.

The community members also suggest providing screenshots or a video to help troubleshoot the issue further.

Useful resources

Hey everyone, I've got a question regarding the logo section where the logos move from on side to the other.

My issue is that there is an empty moment before the logos restart flowing from one side to the other.

How can I change this?

B
B
6 comments

From memory it takes a few things.

1 is to do the maths on how wide one logo is including padding. Then multiply by number of logos. Add this to the interaction. Edit interaction and you'll see the x position which will be a negative number.

2 is it seems like you need logos spanning the full width of the screen.

3. The width of the grid in the grid settings in style panel has to be on REMa (I think? Worked for me as opposed to FRs).

Does that help? Let me know if you;re not sure about the x pos value in the interaction settings.

Thanks, sounds complicated ngl πŸ˜ƒ

Can you post a screenshot of:

  1. The grid element in your logo component showing the column size and gaps? Select and edit grid settings.
  2. The interaction for the logo list (just select interactions panel and then click logo component and drill down until you see an interaction listed in right panel. Then click view its settings (double click or click a cog icon) and you'll see two steps. Select the second one which should show an x-axis value of negative something, e.g. -128

Or a video

Go to 13:40 in this video to see what I'm referring to. You may be able to figure it out from here.

It seems like once you have the logo width and spacing you x by number of logos and that width gives you your x-axis offset (basically moving the first set of logos back to where it started on the right).

Add a reply
Sign up and join the conversation on Slack